/* ==========================================================================
   AOCyber — Cybernetic Luxury Design System
   main.css — Production stylesheet, dual-theme (light + dark)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Custom Properties (Design Tokens)

   THEMING — three states, in cascade order:

     1. :root                                → LIGHT palette (the base)
     2. @media (prefers-color-scheme: dark)  → dark, unless pinned to light
          :root:not([data-theme="light"])
     3. :root[data-theme="dark"]             → dark, pinned by the toggle

   No `data-theme` attribute at all is the "System" state: the media query
   decides, and it tracks OS changes live with no JavaScript involved. The
   toggle only ever sets or removes that one attribute.

   !! The two dark blocks below are identical, and must stay that way. CSS
   !! cannot share one declaration set between a media query and a plain
   !! selector, so any dark token added to one MUST be added to the other.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Backgrounds */
  --bg:              #faf9f7;
  --surface:         #ffffff;
  --surface-elevated:#f2f0ec;
  --border:          #e2ded6;

  /* Gold accent ramp.
     --gold is the brand gold and stays #d4a853 in BOTH themes — it is for
     rules, fills, borders and the emblem. --gold-text is gold used as TEXT:
     #d4a853 on #faf9f7 measures ~2.1:1 and fails WCAG AA, so light mode
     darkens it to #8a6520 (4.6:1). Never set text colour to --gold. */
  --gold:            #d4a853;
  --gold-text:       #8a6520;
  --gold-hover:      #a37a26;
  /* #b8923e is 2.9:1 on white — too pale for the taglines and badges
     that use it as text. Muted-on-light means darker, not lighter. */
  --gold-muted:      #7d5a1a;
  /* Ink for text sitting ON a gold fill. Charcoal in BOTH themes: gold is
     a light colour, so this must never follow --bg. */
  --on-gold:         #0a0a0a;

  /* Text */
  --text:            #1a1a1a;
  --text-secondary:  #4a4a4a;
  --text-muted:      #6b6b6b;

  /* Status — darkened from the dark-theme ramp, which washes out on white. */
  --success:         #15803d;
  --warning:         #a16207;
  --error:           #b91c1c;

  /* Themed surfaces & effects. These were hardcoded rgba() literals before
     theming; they are tokens now so both palettes can define them. */
  --nav-bg:          rgba(250, 249, 247, 0.80);
  --nav-bg-solid:    rgba(250, 249, 247, 0.92);
  --glass-bg:        rgba(255, 255, 255, 0.55);
  --card-bg:         rgba(255, 255, 255, 0.60);
  --chip-bg:         rgba(107, 107, 107, 0.12);
  --chip-border:     rgba(107, 107, 107, 0.28);
  --hover-tint:      rgba(0, 0, 0, 0.04);
  --stripe:          rgba(0, 0, 0, 0.02);
  --scrim:           rgba(250, 249, 247, 0.72);
  --scrim-soft:      rgba(250, 249, 247, 0.35);
  --surface-flat:    rgba(242, 240, 236, 1);
  --bg-flat:         rgba(250, 249, 247, 1);
  --shadow-sm:       0 1px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:       0 18px 48px rgba(0, 0, 0, 0.14);
  --shadow-docs:     0 12px 32px rgba(0, 0, 0, 0.12);

  /* Hero mesh (canvas, so it cannot use var() directly — mesh.js reads these).
     Gold at dark-theme alpha is nearly invisible on paper, so light mode uses
     the darkened gold and lifts the opacity. */
  --mesh-gold:       138, 101, 32;
  --mesh-gold-light: 190, 150, 60;
  --mesh-alpha:      1.9;

  /* Gold tints — unchanged across themes; gold reads on both grounds. */
  --gold-15:         rgba(212, 168, 83, 0.15);
  --gold-25:         rgba(212, 168, 83, 0.25);
  --gold-40:         rgba(212, 168, 83, 0.40);


  /* Typography — Proxima Nova for everything structural, Petersburg for
     editorial accents. Parabolica and Warnock Pro ship in the Adobe kit but
     are deliberately not part of this system. */
  --font-sans:       'proxima-nova', system-ui, -apple-system, sans-serif;
  --font-serif:      'petersburg-web', Georgia, 'Times New Roman', serif;
  --font-mono:       ui-monospace, 'SFMono-Regular', monospace;

  /* Spacing scale (px, used with clamp / calc) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full:9999px;

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration:   0.3s;

  /* Z-index layers */
  --z-nav:      1000;
  --z-dropdown: 1010;
  --z-overlay:  1020;
  --z-modal:    1030;

  /* Inline icons (masked so they inherit the gold token) */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");

  /* Layout */
  --container:      1200px;
  --container-wide: 1440px;
  --nav-height:     72px;
}

/* --- Dark, via system preference (unless the toggle pinned light) --------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  /* Backgrounds */
  --bg:              #0a0a0a;
  --surface:         #141414;
  --surface-elevated:#1a1a1a;
  --border:          #2a2a2a;

  /* Gold */
  --gold:            #d4a853;
  --gold-text:       #d4a853;
  --gold-hover:      #e0b964;
  --gold-muted:      #b8923e;
  --on-gold:         #0a0a0a;

  /* Text */
  /* #666 measured 3.21:1 on --bg — below WCAG AA. #8a8a8a clears 4.5:1. */
  --text:            #f5f5f5;
  --text-secondary:  #a0a0a0;
  --text-muted:      #8a8a8a;

  /* Status */
  --success:         #4ade80;
  --warning:         #fbbf24;
  --error:           #f87171;

  /* Themed surfaces & effects */
  --nav-bg:          rgba(10, 10, 10, 0.80);
  --nav-bg-solid:    rgba(10, 10, 10, 0.92);
  --glass-bg:        rgba(20, 20, 20, 0.55);
  --card-bg:         rgba(20, 20, 20, 0.60);
  --chip-bg:         rgba(102, 102, 102, 0.15);
  --chip-border:     rgba(102, 102, 102, 0.30);
  --hover-tint:      rgba(255, 255, 255, 0.04);
  --stripe:          rgba(255, 255, 255, 0.015);
  --scrim:           rgba(10, 10, 10, 0.72);
  --scrim-soft:      rgba(10, 10, 10, 0.35);
  --surface-flat:    rgba(18, 18, 18, 1);
  --bg-flat:         rgba(10, 10, 10, 1);
  --shadow-sm:       0 1px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:       0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-docs:     0 12px 32px rgba(0, 0, 0, 0.50);

  /* Hero mesh — see the light block. */
  --mesh-gold:       212, 168, 83;
  --mesh-gold-light: 252, 232, 141;
  --mesh-alpha:      1;
  }
}

/* --- Dark, pinned explicitly by the toggle ------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --bg:              #0a0a0a;
  --surface:         #141414;
  --surface-elevated:#1a1a1a;
  --border:          #2a2a2a;

  /* Gold */
  --gold:            #d4a853;
  --gold-text:       #d4a853;
  --gold-hover:      #e0b964;
  --gold-muted:      #b8923e;
  --on-gold:         #0a0a0a;

  /* Text */
  /* #666 measured 3.21:1 on --bg — below WCAG AA. #8a8a8a clears 4.5:1. */
  --text:            #f5f5f5;
  --text-secondary:  #a0a0a0;
  --text-muted:      #8a8a8a;

  /* Status */
  --success:         #4ade80;
  --warning:         #fbbf24;
  --error:           #f87171;

  /* Themed surfaces & effects */
  --nav-bg:          rgba(10, 10, 10, 0.80);
  --nav-bg-solid:    rgba(10, 10, 10, 0.92);
  --glass-bg:        rgba(20, 20, 20, 0.55);
  --card-bg:         rgba(20, 20, 20, 0.60);
  --chip-bg:         rgba(102, 102, 102, 0.15);
  --chip-border:     rgba(102, 102, 102, 0.30);
  --hover-tint:      rgba(255, 255, 255, 0.04);
  --stripe:          rgba(255, 255, 255, 0.015);
  --scrim:           rgba(10, 10, 10, 0.72);
  --scrim-soft:      rgba(10, 10, 10, 0.35);
  --surface-flat:    rgba(18, 18, 18, 1);
  --bg-flat:         rgba(10, 10, 10, 1);
  --shadow-sm:       0 1px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:       0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-docs:     0 12px 32px rgba(0, 0, 0, 0.50);

  /* Hero mesh — see the light block. */
  --mesh-gold:       212, 168, 83;
  --mesh-gold-light: 252, 232, 141;
  --mesh-alpha:      1;
}



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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1vw + 14px, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

a:hover {
  color: var(--gold-hover);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection {
  background: rgba(212, 168, 83, 0.3); color: var(--text);
}

::-moz-selection {
  background: rgba(212, 168, 83, 0.3);
  color: var(--text);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}


/* --------------------------------------------------------------------------
   1b. Accessibility — Skip Link & Focus
   -------------------------------------------------------------------------- */


:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  color: var(--text);
}


h1, .h1 {
  font-size: clamp(40px, 4vw + 16px, 48px);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-size: clamp(28px, 2.5vw + 12px, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: clamp(20px, 1.5vw + 10px, 24px);
  font-weight: 700;
}

h4, .h4 {
  font-size: 18px;
  font-weight: 700;
}

.text-secondary {
  color: var(--text-secondary);
}


.text-gold {
  color: var(--gold-text);
}

small, .small {
  font-size: 14px;
}

.mono {
  font-family: var(--font-mono);
}

.uppercase {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
}

.lead {
  font-size: clamp(17px, 1.1vw + 14px, 20px); color: var(--text-secondary); line-height: 1.65;
}


/* --------------------------------------------------------------------------
   3. Layout — Container & Section
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg);
}


.container--narrow {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.section {
  padding-block: clamp(64px, 8vw, 120px);
}

.section--sm {
  padding-block: clamp(48px, 6vw, 80px);
}


/* --------------------------------------------------------------------------
   3b. Grid Utilities
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
}

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

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

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

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.flex {
  display: flex;
}


.flex--col {
  flex-direction: column;
}

.gap-lg  {
  gap: var(--space-lg);
}
.gap-xl  {
  gap: var(--space-xl);
}
.gap-2xl { gap: var(--space-2xl); }


/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */


/* Dropdown */


/* Mobile hamburger */


/* Mobile nav panel */


/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
/* Title block sits in the lower third, left-aligned, the way the PDF and deck
   covers are composed — not centred in the middle of the viewport. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 90vh;
  padding-block: var(--space-4xl) var(--space-3xl);
  overflow: hidden;
}


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  /* Transparent border keeps filled and outlined buttons the same box size. */
  border: 1.5px solid transparent;
  transition:
  background var(--duration) var(--ease-out),
  color var(--duration) var(--ease-out),
  border-color var(--duration) var(--ease-out),
  transform var(--duration) var(--ease-out),
  box-shadow var(--duration) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px) scale(1.02);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Primary — gold filled */
.btn--primary {
  background: var(--gold); color: var(--on-gold);
}

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

/* Secondary — gold outline */
.btn--secondary {
  background: transparent;
  color: var(--gold-text);
  border-color: var(--gold);
}

.btn--secondary:hover {
  background: var(--gold-15);
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Ghost — subtle */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--hover-tint);
}

/* Sizes */
.btn--sm {
  font-size: 13px; padding: 8px 16px;
}

.btn--lg {
  font-size: 16px; padding: 16px 32px;
}


/* --------------------------------------------------------------------------
   7. Glassmorphism Utility
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 168, 83, 0.12);
  border-radius: var(--radius-md);
}


/* --------------------------------------------------------------------------
   8. Product Cards
   -------------------------------------------------------------------------- */
.product-cards {
  display: grid;
  gap: var(--space-lg);
}

.product-cards--tiered {
  grid-template-columns: 1fr;
}


/* Card base */
.product-card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  overflow: hidden;
  transition:
  border-color 0.4s var(--ease-out),
  box-shadow 0.4s var(--ease-out),
  transform 0.4s var(--ease-out);
}

.product-card:hover {
  border-color: rgba(212, 168, 83, 0.35);
  box-shadow: 0 0 40px rgba(212, 168, 83, 0.07), inset 0 1px 0 rgba(212, 168, 83, 0.1);
  transform: translateY(-2px);
}

/* Available — full-size, golden glow */


/* Status badges */
.badge {
  display: inline-block;
  /* The card body is a flex column, which blockifies inline-block and stretches
  the pill to the full card width. Pin it to its content. */
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.badge--available {
  background: rgba(212, 168, 83, 0.15); color: var(--gold-text); border: 1px solid rgba(212, 168, 83, 0.3);
}

.badge--early-access {
  background: transparent; color: var(--gold-muted); border: 1px solid var(--gold-muted);
}

.badge--coming-soon {
  background: var(--chip-bg); color: var(--text-muted); border: 1px solid var(--chip-border);
}

/* Compact card for coming-soon items */


/* --------------------------------------------------------------------------
   9. Pricing
   -------------------------------------------------------------------------- */
/* Flex rather than grid: with 5, 4 and 5 tiers against a 3-column grid every
   section ended on a ragged row, and the lone Enterprise card sat beside two
   empty cells. Wrapping and centring makes the final row deliberate at any
   tier count. */
.pricing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  align-items: stretch;
}

.pricing--cols > * {
  flex: 1 1 300px;
  max-width: 360px;
}

.pricing-card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  transition:
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.pricing-card--featured {
  border-color: var(--gold-25);
  box-shadow: 0 0 40px rgba(212, 168, 83, 0.08);
}

.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.pricing-card:hover {
  border-color: var(--gold-25);
}

.pricing-card__tier {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  margin-bottom: var(--space-md);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.pricing-card__amount {
  font-size: clamp(36px, 3vw + 16px, 48px);
  font-weight: 700;
  line-height: 1;
}

.pricing-card__period {
  color: var(--text-muted);
  font-size: 15px;
}

.pricing-card__subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: var(--space-xl);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* An em-dash reads as "excluded" in a pricing table; every included feature
   looked struck out. Check glyph instead. */
.pricing-card__feature::before {
  content: '';
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background-color: var(--gold);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* Feature comparison table */


/* --------------------------------------------------------------------------
   10. Three Pillars
   -------------------------------------------------------------------------- */
/* Left-aligned to match the rest of the editorial system. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}

.pillar {
  text-align: center;
  padding: var(--space-xl);
}

.pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-md);
  background: rgba(212, 168, 83, 0.08);
  border: 1px solid rgba(212, 168, 83, 0.15);
  color: var(--gold-text);
  font-size: 28px;
  transition: background var(--duration) var(--ease-out);
}

.pillar:hover .pillar__icon {
  background: var(--gold-25);
}

.pillar__icon img,
.pillar__icon svg {
  width: 32px;
  height: 32px;
}

.pillar__heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.pillar__description {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   11. Feature Grid (Product pages)
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.feature-card {
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

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


.feature-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.feature-card__text {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

/* Alternating feature rows */


/* --------------------------------------------------------------------------
   12. Personas Section
   -------------------------------------------------------------------------- */
.personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.persona-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: border-color var(--duration) var(--ease-out);
}

.persona-card:hover {
  border-color: var(--gold-15);
}

.persona-card__role {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  margin-bottom: var(--space-md);
}


.persona-card__pain {
  position: relative;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
  border-left: 2px solid var(--error);
}

.persona-card__pain-label,
.persona-card__solution-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.persona-card__pain-label {
  color: var(--error);
}

.persona-card__solution-label {
  color: var(--success);
}

.persona-card__solution {
  position: relative;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  padding-left: var(--space-md);
  border-left: 2px solid var(--success);
}


/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */

/* ── Blog Header (compact, replaces full hero) ── */
.blog-header {
  padding-top: calc(var(--nav-height) + var(--space-3xl));
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--border);
}

.blog-header__inner {
  margin-bottom: var(--space-xl);
}

.blog-header__title {
  font-size: clamp(36px, 4vw + 12px, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.blog-header__desc {
  color: var(--text-secondary);
  font-size: clamp(16px, 1vw + 12px, 20px);
  line-height: 1.5;
  max-width: 540px;
}

/* ── Category Filter Pills ── */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.blog-filter {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

.blog-filter:hover {
  border-color: var(--gold-40);
  color: var(--text);
}

.blog-filter.is-active {
  background: var(--gold-15);
  border-color: var(--gold);
  color: var(--gold-text);
}

/* ── Section heading ── */
.blog-section-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

/* ── Featured Post Card ── */
.blog-featured-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.blog-featured-card:hover {
  border-color: var(--gold-25);
  box-shadow: 0 0 60px rgba(212, 168, 83, 0.06);
}

.blog-featured-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3xl) var(--space-2xl);
  gap: var(--space-md);
}

.blog-featured-card__body .rule-gold { margin-bottom: 0; }

.blog-featured-card__title {
  font-size: clamp(26px, 2.4vw + 12px, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.blog-featured-card__title a {
  color: var(--text);
  transition: color var(--duration) var(--ease-out);
}

.blog-featured-card__title a:hover {
  color: var(--gold-text);
}

.blog-featured-card__excerpt {
  color: var(--text-secondary);
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Series Block ── */
.blog-series-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.blog-series-block__header {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.blog-series-block__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-15);
  border: 1px solid var(--gold-25);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.blog-series-block__title {
  font-size: clamp(20px, 1.5vw + 10px, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.blog-series-block__count {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: var(--space-xs);
}

.blog-series-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-series-block__item {
  border-bottom: 1px solid var(--border);
}

.blog-series-block__item:last-child {
  border-bottom: none;
}

.blog-series-block__item a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.blog-series-block__item a:hover {
  background: var(--gold-15);
  color: var(--text);
}

.blog-series-block__part {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-text);
  min-width: 48px;
  flex-shrink: 0;
}

.blog-series-block__item-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}

.blog-series-block__reading-time {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Series pill (inline in meta) ── */
.blog-series-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-15);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* ── Blog list ── */
.blog-list {
  display: grid;
  gap: var(--space-xl);
}

.blog-post-preview {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.blog-post-preview__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1.9;
}

.blog-post-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-preview__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.blog-post-preview__category {
  color: var(--gold-text);
  font-weight: 500;
}

.blog-post-preview__title {
  font-size: clamp(18px, 1.2vw + 10px, 22px);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.blog-post-preview__title a {
  color: var(--text);
  transition: color var(--duration) var(--ease-out);
}

.blog-post-preview__title a:hover {
  color: var(--gold-text);
}

.blog-post-preview__excerpt {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Single blog post */
.blog-post {
  max-width: 760px;
  margin-inline: auto;
}

.blog-post__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.blog-post__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  font-size: 14px;
  color: var(--text-muted);
  margin-top: var(--space-lg);
}

/* The category and the byline in this row are links now; everything around
   them is plain text, so they need an affordance. Colour is left alone —
   the category is already gold and a second gold item would compete — so the
   signal is the underline: faint at rest on the byline, solid on interaction. */
.blog-post__meta a {
  text-decoration: none;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.blog-post__meta a[rel="author"] {
  text-decoration: underline;
  text-decoration-color: var(--border);
}
.blog-post__meta a:hover,
.blog-post__meta a:focus-visible {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Blog prose content */
.blog-post__content h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.blog-post__content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.blog-post__content p {
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  line-height: 1.75;
}

.blog-post__content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-post__content ul,
.blog-post__content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  color: var(--text-secondary);
}

.blog-post__content ul {
  list-style: disc;
}

.blog-post__content ol {
  list-style: decimal;
}

.blog-post__content li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.blog-post__content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: var(--space-lg);
  margin-block: var(--space-xl);
  font-style: italic;
  color: var(--text-secondary);
}

.blog-post__content pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

.blog-post__content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
}

.blog-post__content pre code {
  background: none;
  padding: 0;
}

.blog-post__content img {
  border-radius: var(--radius-md);
  margin-block: var(--space-xl);
}

.blog-post__content hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin-block: var(--space-2xl);
}

/* Legal / long-form prose (privacy, terms) */
.prose h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.prose h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.prose p {
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  line-height: 1.75;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  color: var(--text-secondary);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.prose li::marker {
  color: var(--gold-muted);
}

.prose strong {
  color: var(--text);
}

.prose hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin-block: var(--space-2xl);
}

/* Blog post subtitle (description below title) */
.blog-post__subtitle {
  color: var(--text-secondary);
  font-size: 1.15em;
  line-height: 1.6;
  margin-top: var(--space-lg);
  max-width: 600px;
  margin-inline: auto;
}

/* Blog series badge */
.blog-series-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  border: 1px solid var(--gold-25);
  background: var(--gold-15);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}

/* Blog hero image */
.blog-post__hero {
  margin-bottom: var(--space-2xl);
}

.blog-post__hero img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.blog-post__hero figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

/* Table of contents */
.blog-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.blog-toc summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.blog-toc nav > ul,
.blog-toc #TableOfContents > ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.blog-toc li {
  margin-bottom: var(--space-xs);
}

.blog-toc a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 15px;
  transition: color var(--duration) var(--ease-out);
}

.blog-toc a:hover {
  color: var(--gold-text);
}

.blog-toc ul ul {
  padding-left: var(--space-lg);
  margin-top: var(--space-xs);
}

/* Series navigation */
.blog-series-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-top: var(--space-3xl);
}

.blog-series-nav h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-text);
  margin-bottom: var(--space-md);
}

.blog-series-nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.blog-series-nav li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.blog-series-nav li:last-child {
  border-bottom: none;
}

.blog-series-nav li.is-current span {
  color: var(--text);
  font-weight: 600;
}

.blog-series-nav li.is-current::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: var(--space-sm);
  vertical-align: middle;
}

.blog-series-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}

.blog-series-nav a:hover {
  color: var(--gold-text);
}

/* Mermaid diagram containers */
.blog-post__content .mermaid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-block: var(--space-xl);
  text-align: center;
  overflow-x: auto;
}

/* Comparison tables */
.blog-post__content table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-xl);
  font-size: 15px;
}

.blog-post__content thead {
  border-bottom: 2px solid var(--gold-25);
}

.blog-post__content th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-post__content td {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.blog-post__content tbody tr:hover {
  background: var(--gold-15);
}

/* Figure captions inside content */
.blog-post__content figure {
  margin-block: var(--space-xl);
}

.blog-post__content figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}


/* --------------------------------------------------------------------------
   16. Utility Classes
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

.mx-auto { margin-inline: auto; }
.mb-sm   {
  margin-bottom: var(--space-sm);
}
.mb-md   {
  margin-bottom: var(--space-md);
}
.mb-lg   {
  margin-bottom: var(--space-lg);
}
.mb-xl   {
  margin-bottom: var(--space-xl);
}
.mb-2xl  {
  margin-bottom: var(--space-2xl);
}
.mb-3xl  {
  margin-bottom: var(--space-3xl);
}


.max-w-prose  { max-width: 760px; }


/* --------------------------------------------------------------------------
   17. Responsive — Tablet (max 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars {
    gap: var(--space-lg);
  }


  }


/* --------------------------------------------------------------------------
   18. Responsive — Mobile (max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }


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

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

  .pillar {
    text-align: left;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-md);
    padding: var(--space-lg) 0;
  }

  .pillar__icon {
    margin: 0;
    grid-row: 1 / 3;
  }


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

  .pricing--cols > * {
    flex: 1 1 100%;
    max-width: none;
  }

  .blog-header {
    padding-top: calc(var(--nav-height) + var(--space-2xl));
    padding-bottom: var(--space-lg);
  }

  .blog-filters {
    gap: 6px;
  }

  .blog-filter {
    font-size: 13px;
    padding: 5px 12px;
  }

  .blog-featured-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

    .blog-featured-card__body {
    padding: var(--space-lg);
  }

  .blog-series-block__header {
    padding: var(--space-lg);
  }

  .blog-series-block__item a {
    padding: var(--space-md) var(--space-lg);
    flex-wrap: wrap;
  }

  .blog-series-block__reading-time {
    display: none;
  }

  .blog-post-preview {
    grid-template-columns: 1fr;
  }

  .blog-post-preview__image {
    max-height: 200px;
  }


  .hero {
    min-height: 80vh;
    padding-block: var(--space-3xl);
  }


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

  .product-cards--tiered {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   19. Accessibility — Reduced Motion
   -------------------------------------------------------------------------- */
@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;
  }

  
  .hero-eyebrow,
  .hero-heading,
  .hero-description,
  .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   HTML-to-CSS Class Alias Layer
   The HTML templates use single-dash naming (nav-bar, hero-content)
   while the CSS uses BEM double-underscore (nav__inner, hero__content).
   This layer bridges the gap.
   ========================================================================== */

/* --- Navigation aliases --- */
.nav-bar        { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-height); background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav-inner      { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-lg); }
.nav-logo       { display: flex; align-items: center; gap: var(--space-sm); font-weight: 700; font-size: 20px; color: var(--text); white-space: nowrap; text-decoration: none; }
.nav-logo:hover { color: var(--text); }
.nav-logo-img   { width: auto; height: 32px; flex-shrink: 0; }
.nav-logo-text  { color: var(--text); }
.nav-links      { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.nav-item       { position: relative; list-style: none; }
.nav-item--cta  { margin-left: var(--space-sm); }
.nav-link       { position: relative; display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 15px; font-weight: 500; padding: var(--space-sm) 0; background: none; border: none; cursor: pointer; font-family: inherit; transition: color var(--duration) var(--ease-out); }
.nav-link:hover { color: var(--text); }
.nav-chevron    { transition: transform var(--duration) var(--ease-out); }
/* The chevron had a transition but nothing ever rotated it. Drive it off the
   same aria-expanded the script already maintains, desktop and mobile alike. */
[aria-expanded="true"] > .nav-chevron { transform: rotate(180deg); }

/* baseof.html toggles .nav-scrolled on every scroll; no rule existed for it. */
.nav-bar.nav-scrolled {
  background: var(--nav-bg-solid);
  border-bottom-color: var(--gold-15);
  box-shadow: var(--shadow-sm);
}

/* Desktop dropdowns */
/* Two columns inside a 280px panel left ~125px each, so every group label wrapped
   to two lines and every description ran three, producing a ~530px tower with
   ragged row gaps. Widened so labels sit on one line, with real elevation. */
.dropdown-panel {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: min(560px, calc(100vw - var(--space-xl)));
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transition:
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out),
    visibility var(--duration);
  z-index: var(--z-dropdown);
}
.dropdown-panel:not([hidden]) { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-panel--narrow { min-width: 200px; }

/* Rows align across both columns instead of each column stacking independently. */
.dropdown-grid        { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: var(--space-xs) var(--space-md); align-items: start; }
.dropdown-group       { padding: var(--space-xs) 0; }
.dropdown-group-label { display: block; white-space: nowrap; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); padding: var(--space-xs) var(--space-sm); }
.dropdown-link        { display: block; padding: var(--space-sm); color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 14px; text-decoration: none; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }
.dropdown-link:hover  { background: rgba(212,168,83,0.08); color: var(--text); }
.dropdown-link strong { display: block; color: var(--text); font-weight: 700; font-size: 14px; }
.dropdown-link span   { display: block; font-size: 12px; line-height: 1.45; color: var(--text-muted); margin-top: 2px; }

/* Hamburger */
.nav-hamburger  { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 28px; cursor: pointer; background: none; border: none; padding: 0; }
.hamburger-line { display: block; width: 100%; height: 2px; background: var(--text); border-radius: var(--radius-full); transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out); }

/* Open/closed were visually identical: the animation targeted
   .nav__hamburger.active, which the markup never had. aria-expanded is the
   state the script actually maintains, so drive it from that. */
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu         { display: none; position: fixed; inset: var(--nav-height) 0 0 0; padding: var(--space-2xl) var(--space-lg); z-index: var(--z-overlay); overflow-y: auto; }
.mobile-menu:not([hidden]) { display: flex; flex-direction: column; }
.mobile-menu-list    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.mobile-menu-toggle  { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; background: none; border: none; color: var(--text); font-family: inherit; font-size: 18px; font-weight: 700; padding: var(--space-sm) 0; cursor: pointer; }
.mobile-menu-link    { color: var(--text); font-size: 18px; font-weight: 700; padding: var(--space-sm) 0; min-height: 44px; display: flex; align-items: center; }
/* Base must be display:none, or this author rule outranks the UA's
   [hidden] { display: none } and the accordion renders permanently open. */
.mobile-submenu      { list-style: none; padding: 0 0 0 var(--space-md); margin: var(--space-sm) 0 0; display: none; flex-direction: column; gap: var(--space-xs); }
.mobile-submenu:not([hidden]) { display: flex; }
.mobile-submenu a    { color: var(--text-secondary); font-size: 15px; padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.mobile-submenu a:hover { color: var(--text); }
.mobile-group-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: var(--space-sm) 0 var(--space-xs); }
.mobile-menu-cta     { margin-top: var(--space-md); }

/* --- Hero aliases --- */
.hero-canvas      { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }

/* Vignette between canvas and copy. Keeps the headline legible over whatever
   the mesh happens to draw, and dissolves the field into the page below. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--scrim-soft) 0%, transparent 30%, var(--bg) 100%),
    radial-gradient(ellipse 70% 60% at 34% 62%, var(--scrim) 0%, transparent 70%);
}

.hero-content     { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg); }
.hero-block       { max-width: 760px; }
.hero-eyebrow     { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-text); margin-bottom: var(--space-md); animation: fadeUp 0.8s var(--ease-out) 0.15s both; }
.hero-heading     { font-size: clamp(40px, 4.6vw + 16px, 76px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.04; margin-bottom: var(--space-lg); overflow-wrap: break-word; text-wrap: balance; animation: fadeUp 0.8s var(--ease-out) 0.25s both; }
.hero-description { font-size: clamp(17px, 0.7vw + 14px, 20px); color: var(--text-secondary); line-height: 1.55; margin-bottom: var(--space-2xl); max-width: 54ch; animation: fadeUp 0.8s var(--ease-out) 0.4s both; }
.hero-actions     { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-2xl); animation: fadeUp 0.8s var(--ease-out) 0.55s both; }


/* --------------------------------------------------------------------------
   Editorial primitives
   Lifted from the AOCyber master-plan PDF so print, decks and web share one
   visual language: a short gold rule above titles, uppercase micro-labels
   over values, gold part markers, and serif pull-quotes.
   -------------------------------------------------------------------------- */

/* The signature short rule that sits above every title in the PDF. */
.rule-gold {
  width: 140px;
  height: 3px;
  background: var(--gold);
  margin-bottom: var(--space-lg);
  animation: fadeUp 0.8s var(--ease-out) 0.05s both;
}

.rule-gold--sm { width: 96px; height: 2px; margin-bottom: var(--space-md); }

/* Cover metadata strip: hairline, then micro-labels above their values. */
.meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-lg);
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
  max-width: 760px;
  margin: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.7s both;
}

.meta-row__item  { min-width: 0; }
.meta-row__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 4px; }
.meta-row__value { font-size: 14px; color: var(--text); margin: 0; }

/* Section opener: gold rule, gold part marker, then the title. Left-aligned,
   replacing the centred eyebrow/heading pair used across the site. */
.section-head            { max-width: 760px; margin-bottom: var(--space-3xl); }
.section-head--center    { margin-inline: auto; text-align: center; }
.section-head--center .rule-gold { margin-inline: auto; }
.section-head__label     { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-text); margin-bottom: var(--space-sm); }
.section-head__title     { margin-bottom: var(--space-md); }
.section-head__standfirst { color: var(--text-secondary); font-size: clamp(16px, 0.6vw + 14px, 19px); line-height: 1.6; max-width: 60ch; }
.section-head--center .section-head__standfirst { margin-inline: auto; }

/* Petersburg, the serif declared in the tokens since day one and never used. */
.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.4vw + 14px, 26px);
  line-height: 1.45;
  font-style: italic;
  color: var(--text);
  border-left: 3px solid var(--gold);
  padding-left: var(--space-lg);
  margin-block: var(--space-2xl);
  max-width: 48ch;
}

/* Investor block: statement on the left, the principle set in Petersburg on
   the right. Replaces a centred glass card. */
.investor-teaser__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-4xl);
  align-items: center;
}

@media (max-width: 900px) {
  .investor-teaser__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

.pull-quote__attribution {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* The stacking rule targeted .hero__actions, which the markup never had, so on
   phones the two CTAs merely wrapped at their natural widths (147px / 193px)
   and read as a ragged stack. Stack them deliberately, at equal width. */
@media (max-width: 768px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
}

/* --- Button aliases --- */
.btn--gold        { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover  { background: var(--gold-hover); transform: translateY(-1px); }
.btn--outline     { background: transparent; color: var(--gold-text); border: 1.5px solid var(--gold); }
.btn--outline:hover { background: rgba(212,168,83,0.1); transform: translateY(-1px); }

/* --- Responsive: show hamburger, hide desktop nav on mobile --- */
@media (max-width: 768px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }
}


/* ==========================================================================
   Comprehensive Fix Layer — Utilities, Footer, Cards, Sections, Animations
   ========================================================================== */

/* --- Utility classes used by templates --- */

/* Spacing helpers */

/* Grid */

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

/* --- Glassmorphism --- */

/* Nav overlays need opaque backgrounds so content doesn't bleed through */
.dropdown-panel.glass {
  background: var(--surface-flat);
}
.mobile-menu.glass {
  background: var(--bg-flat);
}

/* --- Scroll reveal animations --- */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Product cards --- */
.product-card-inner  { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; }
.product-card-name   { font-size: 24px; font-weight: 700; margin: var(--space-sm) 0 0; letter-spacing: -0.01em; }
.product-card-tagline { font-size: 13px; color: var(--gold-muted); font-weight: 500; margin: 0; letter-spacing: 0.01em; }
.product-card-desc   { font-size: 15px; color: var(--text-secondary); line-height: 1.65; margin: var(--space-xs) 0 0; flex: 1; }
.product-card-cta    { margin-top: var(--space-lg); align-self: flex-start; }

/* Whole-card click. The markup carried a data-href that nothing read, so only
   the small CTA was clickable. Stretching the real anchor keeps the correct
   link semantics, keyboard focus, and middle-click — no JS shim. */
.product-card-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Arrow glyph inside CTAs had no styles at all, so no hover response. */
.btn-arrow { transition: transform var(--duration) var(--ease-out); }
.btn:hover .btn-arrow,
.product-card:hover .btn-arrow { transform: translateX(3px); }

/* Eden (early access) should have a max-width when alone */
.mb-2xl > .product-card { max-width: 720px; }

/* Coming-soon cards are more muted */
[data-animate] .product-card .badge--coming-soon ~ .product-card-name { color: var(--text-secondary); }
[data-animate] .product-card .badge--coming-soon ~ .product-card-desc { color: var(--text-muted); }

/* Status badges */

/* --- Pillars (Three Pillars section) --- */

@media (max-width: 768px) {
  .pillars { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* --- Footer (complete rewrite for correct class names) --- */
.site-footer {
  position: relative;
  background: var(--surface);
  padding-block: var(--space-3xl) var(--space-xl);
  margin-top: var(--space-4xl);
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-muted), var(--gold), var(--gold-muted), transparent);
  opacity: 0.5;
}
.footer-inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.footer-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  max-width: 320px;
}
.footer-address {
  font-style: normal;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.footer-address a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}
.footer-address a:hover { color: var(--gold-text); }
.footer-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: var(--space-lg);
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-list a {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}
.footer-list a:hover { color: var(--gold-text); }
.footer-bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}
.footer-bottom p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* --- Typography & heading refinements --- */
h1 { font-size: clamp(32px, 4vw + 14px, 56px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--space-lg); }
h2 { font-size: clamp(24px, 2.5vw + 12px, 36px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 var(--space-md); }
h3 { font-size: clamp(18px, 1.5vw + 10px, 22px); font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-sm); }
p  { margin: 0; }

/* --- Section label pattern (used on homepage) --- */
.section .uppercase.text-gold { margin-bottom: var(--space-sm); }

/* --- Investor teaser glass card override --- */
.section .glass[style] {
  text-align: center;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(212,168,83,0.04) 100%);
}

/* --- Button primary alias (used in investor teaser) --- */

/* --- Link base styles --- */
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* --- Body base --- */

/* Selection */

/* --- Screenshot carousel --- */
.screenshot-carousel { display: flex; flex-direction: column; gap: var(--space-3xl); }
.screenshot-item { max-width: 900px; margin-inline: auto; width: 100%; }
.screenshot-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-text); margin-bottom: var(--space-sm); }
.screenshot-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(212,168,83,0.08); }
.screenshot-frame img { display: block; width: 100%; height: auto; }
.screenshot-caption { margin-top: var(--space-md); color: var(--text-secondary); font-size: 15px; line-height: 1.6; max-width: 640px; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .hero-heading, .hero-description, .hero-actions { animation: none; opacity: 1; }
}

/* --- Lead capture forms --- */
.lead-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 560px; margin-inline: auto; text-align: left; }
.lead-form__row { display: flex; flex-direction: column; gap: var(--space-sm); }
.lead-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 560px) { .lead-form__row--split { grid-template-columns: 1fr; } }
.lead-form label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.lead-form input, .lead-form textarea, .lead-form select {
  width: 100%; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 15px;
  transition: border-color var(--duration) var(--ease-out);
}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: none; border-color: var(--gold); }
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form ::placeholder { color: var(--text-muted); }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form button[type="submit"] { margin-top: var(--space-sm); width: 100%; }
.lead-form[aria-busy="true"] button[type="submit"] { opacity: 0.6; pointer-events: none; }
.form-status { margin-top: var(--space-md); font-size: 15px; min-height: 1.2em; }
.form-status--ok  { color: var(--success, #4ade80); }
.form-status--err { color: var(--error, #f87171); }

/* --- Skip link: reveal on keyboard focus (the markup uses Tailwind-style
   focus:* classes that aren't compiled here, so make it visible explicitly) --- */
.sr-only:focus {
  position: fixed; top: var(--space-md); left: var(--space-md);
  width: auto; height: auto; margin: 0; padding: var(--space-sm) var(--space-md);
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
  background: var(--gold); color: var(--bg); border-radius: var(--radius-sm);
  font-weight: 700; z-index: 200;
}

/* --- DevFlow open-source install block --- */
.df-install {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  overflow-x: auto;
  text-align: left;
}

.df-install__line {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre;
}

.df-install__line::before {
  content: "$ ";
  color: var(--gold-text);
  user-select: none;
}

.df-opensource__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.df-opensource__license {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Theme toggle

   The control renders all three states and CSS reveals exactly one, keyed off
   the <html> data-theme attribute that the bootstrap script in head.html sets
   before first paint. Nothing here depends on JS having run, so the button is
   never momentarily wrong — and with JS disabled it still shows the true state
   (it just cannot be clicked to change it).
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--gold);
  background: var(--gold-15);
}

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

.theme-toggle__icon { display: none; flex-shrink: 0; }
.theme-toggle__label { display: none; }

/* State selection. No attribute at all = System. */
:root:not([data-theme]) .theme-toggle__icon--system,
:root:not([data-theme]) .theme-toggle__label--system,
:root[data-theme="light"] .theme-toggle__icon--light,
:root[data-theme="light"] .theme-toggle__label--light,
:root[data-theme="dark"]  .theme-toggle__icon--dark,
:root[data-theme="dark"]  .theme-toggle__label--dark {
  display: block;
}

/* Desktop: icon only. The label stays in the accessibility tree so the button
   still announces which theme is active, rather than just "button". */
.theme-toggle--desktop { padding: 7px; }
.theme-toggle--desktop .theme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:root:not([data-theme]) .theme-toggle--desktop .theme-toggle__label--system,
:root[data-theme="light"] .theme-toggle--desktop .theme-toggle__label--light,
:root[data-theme="dark"]  .theme-toggle--desktop .theme-toggle__label--dark {
  display: block;
}

/* Mobile: full-width row inside the menu, label visible. */
.theme-toggle--mobile {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  font-size: 15px;
}

.nav-item--theme { display: flex; align-items: center; }
.mobile-menu-theme { margin-top: var(--space-md); }

/* Reduced motion: the palette swap should be instant, not a slow cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

/* --- Inlined SVG figures -------------------------------------------------
   Blog diagrams are inlined rather than <img>-referenced so their
   var(--token) colours resolve against the page and follow the theme. An
   inline <svg> has no intrinsic sizing the way an <img> does, so it needs to
   be told to behave like a block image.
   ------------------------------------------------------------------------ */
.svg-figure { display: block; }
.svg-figure > svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}