/* ================================================================
   AUDEEPORT — Website Design System
   Modeled after neon.com patterns
   Dark, geometric, precise typography
   ================================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── VARIABLES ── */
:root {
  /* Backgrounds */
  --bg-page: #0A0A0B;
  --bg-surface: #111215;
  --bg-elevated: #16181C;
  --bg-card: #1A1C20;
  --bg-hover: #1E2025;
  --bg-warm: #14191B;

  /* Accent — "Glass" teal (matches the app's default Glass theme #8EC9C2) */
  --accent: #8EC9C2;
  --accent-dim: #6FA8A1;
  --accent-dark: #2E4A47;
  --on-accent: #0F1A18;

  /* Text */
  --text-primary: #F0F0F0;
  --text-secondary: #C9CBCF;
  --text-muted: #94979E;
  --text-dim: #61646B;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --outline: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Layout */
  --max-w: 1280px;
  --max-w-wide: 1600px;
  --max-w-narrow: 720px;
  --gutter: 32px;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-page);
}

a { color: var(--accent); text-decoration: none; transition: opacity 0.15s; }
a:hover { opacity: 0.85; }
img { max-width: 100%; display: block; }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-elevated);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--text-secondary);
}

/* ── CONTAINER ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: var(--max-w-wide); }
.container--narrow { max-width: var(--max-w-narrow); }


/* ══════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
}

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 48px;
}

.nav__logo:hover { opacity: 0.8; }

.nav__logo svg { height: 22px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}

.nav__link {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s;
  letter-spacing: -0.01em;
}

.nav__link:hover, .nav__link--active { color: var(--text-primary); opacity: 1; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  background: var(--text-primary);
  color: var(--bg-page);
  font-size: 14px;
  font-weight: 500;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s;
}

.nav__cta:hover { background: #C9CBCF; opacity: 1; }

/* ── Nav auth state (signed-in dropdown) ── */

.nav__signed-out,
.nav__signed-in {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__signed-in {
  position: relative;
}

.nav__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px 0 4px;
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: 9999px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.nav__user:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

.nav__user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.nav__user-name {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__user-chevron {
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.nav__user[aria-expanded="true"] .nav__user-chevron {
  transform: rotate(180deg);
}

.nav__user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 200;
}

.nav__user-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__user-menu-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--outline);
  margin-bottom: 6px;
}

.nav__user-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__user-menu-email {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__user-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.nav__user-menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.nav__user-menu-item--danger {
  color: #fca5a5;
}

.nav__user-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
}

.nav__user-menu-sep {
  height: 1px;
  background: var(--outline);
  margin: 6px 0;
}

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

.nav__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-muted);
}

.nav__mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 24px var(--gutter);
  z-index: 99;
  flex-direction: column;
  gap: 16px;
}

.nav__mobile-menu.is-open { display: flex; }
.nav__mobile-menu a { font-size: 16px; color: var(--text-primary); }


/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  background: var(--text-primary);
  color: var(--bg-page);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.btn-primary:hover { background: #C9CBCF; color: var(--bg-page); }
.btn-primary:active { transform: scale(0.98); }

/* Gold variant for CTAs */
.btn-primary--accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary--accent:hover { background: var(--accent-dim); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--text-dim);
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  letter-spacing: -0.02em;
}

.btn-outline:hover { border-color: var(--text-primary); background: rgba(255, 255, 255, 0.03); color: var(--text-primary); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s;
}

.btn-ghost:hover { color: var(--text-primary); }

.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }


/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */

.hero {
  position: relative;
  /* Was 180 px top — pushed the hero way below the nav. 80 px keeps
     clearance for the fixed navbar (~56 px tall + a tiny breathing
     gap) without the cavernous gap we had before. */
  padding: 80px 0 100px;
  overflow: hidden;
  min-height: 90vh;
}

.hero__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, var(--bg-page) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, var(--bg-page) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* Visual column gets slight priority now that the hero shows the
     cassette-skin screenshot (portrait 1350×1618) rather than the
     old wide landscape photo. Text still reads fine at ~48% of the
     row — the image needs the extra width to read at all. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}

.hero__content {
  min-width: 0;
}

.hero__visual {
  display: flex;
  flex-direction: column-reverse;
  gap: 14px;
  min-width: 0;
}

.hero__visual-label {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease-out 0.25s, transform 0.45s ease-out 0.25s;
  pointer-events: none;
}

.hero__visual-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid rgba(232, 165, 53, 0.22);
  outline-offset: -1px;
  transform: perspective(1400px) rotateY(-24deg) translateY(-10px);
  transform-origin: center center;
  box-shadow:
    0 60px 90px -20px rgba(0, 0, 0, 0.85),
    0 30px 50px -12px rgba(0, 0, 0, 0.6),
    0 12px 20px -6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 165, 53, 0.08);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  /* Size to the image (portrait cassette-deck shot at 1350×1618
     aspect). Capping max-width at 450 px + `width: fit-content`
     makes the frame wrap tightly around the image instead of
     stretching to fill the grid column and leaving empty space on
     the sides. `align-self: center` keeps it centered in the
     column. */
  width: fit-content;
  max-width: 450px;
  align-self: center;
}

.hero__visual-frame:hover {
  transform: perspective(1400px) rotateY(0deg) translateY(-10px);
}

.hero__visual-frame:hover ~ .hero__visual-label {
  opacity: 1;
  transform: translateY(0);
}

.hero__visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  /* Frame now sizes to the image via max-width: 450 px (see
     .hero__visual-frame above) — letting the image drive the frame
     avoids whitespace inside the card. No max-height needed. */
  filter: sepia(0.22) saturate(1.12) hue-rotate(-14deg) brightness(0.88) contrast(1.08);
}

.hero__visual-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px 30px rgba(12, 10, 8, 0.55);
  pointer-events: none;
  border-radius: inherit;
}


.hero__screenshot {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  outline: 1px solid var(--outline);
  outline-offset: -1px;
  border-radius: 8px;
  overflow: hidden;
}

.hero__screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: 24px;
  max-width: 720px;
}

.hero__sub {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 40px;
  max-width: 520px;
}

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

.hero__platform-note {
  font-size: 13px;
  color: var(--text-dim);
}



/* ══════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════ */

.stats-strip {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Five-column grid distributes the stats evenly across the row.
   The previous flex layout left them clustered on the left edge
   because items had no flex-grow. Grid with equal 1fr tracks
   guarantees they take the full container width. */
.stats-strip__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.stats-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  /* Right divider on every item except the last so the columns
     read like a stat sheet rather than four floating numbers. */
  border-right: 1px solid var(--outline);
}

.stats-strip__item:last-child {
  border-right: none;
}

.stats-strip__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stats-strip__label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

@media (max-width: 720px) {
  .stats-strip__row { grid-template-columns: repeat(2, 1fr); }
  .stats-strip__item:nth-child(2n) { border-right: none; }
}


/* ══════════════════════════════════════
   SECTION COMMON
   ══════════════════════════════════════ */

.section {
  padding: 120px 0;
}

.section--sm { padding: 80px 0; }
.section--surface { background: var(--bg-surface); }
.section--warm { background: var(--bg-warm); }

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.section__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section__desc {
  font-size: 17px;
  color: var(--text-muted);
  /* Bumped from 520 to 760 so multi-sentence section intros breathe
     properly. The pricing page overrides this back to 560px and
     centers it via .pricing__inner .section__desc. */
  max-width: 760px;
  line-height: 1.65;
  margin-bottom: 56px;
}


/* ══════════════════════════════════════
   MEGA FEATURES (tabbed sidebar)
   ══════════════════════════════════════ */

.mega-features {
  padding: 120px 0;
}

.mega-features__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
}

.mega-features__tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 88px;
  align-self: start;
}

.mega-features__tab {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.mega-features__tab:hover { color: var(--text-muted); opacity: 1; }

.mega-features__tab.is-active {
  color: var(--text-primary);
  border-left-color: var(--accent);
  font-weight: 500;
}

.mega-features__content {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.mega-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* align-items: start so the visual sits at its natural
     aspect-ratio-derived height instead of stretching. The text
     column matches that height via its own aspect-ratio rule
     below, so both columns end up the same size automatically. */
  align-items: start;
  scroll-margin-top: 88px;
}

/* The text column has the same 16:10 aspect ratio as the visual
   column. Since both columns have the same grid track width
   (1fr 1fr), giving them the same aspect ratio guarantees they
   end up the same height.

   justify-content: center vertically centers the description
   block. overflow is intentionally visible (not hidden) so any
   text that doesn't fit spills past the box edge, making it
   obvious during dev that the copy needs trimming. The right
   fix for verbose copy is shorter copy, not invisible copy. */
.mega-feature__text {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mega-feature__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
  /* Better wrap balance on multi-line titles so they break at a
     natural pause rather than stranding a single word on the
     last line. */
  text-wrap: balance;
}

.mega-feature__title strong { font-weight: 700; }

.mega-feature__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.mega-feature__visual {
  outline: 1px solid var(--outline);
  outline-offset: -1px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
  /* Lock all feature visuals to the same 16:10 aspect ratio so the
     grid stays visually balanced regardless of which screenshot
     someone dropped in. Without this, each image's natural height
     dictates the row height and the layout looks misaligned. */
  aspect-ratio: 16 / 10;
}

.mega-feature__visual img {
  display: block;
  width: 100%;
  height: 100%;
  /* `cover` crops to fill the box exactly, `contain` letterboxes.
     Cover gives a tighter visual without dead space — the small
     amount of edge crop on tall screenshots is a fair trade. */
  object-fit: cover;
  object-position: center top;
}

.mega-feature__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.mega-feature__detail {
  padding-left: 14px;
  border-left: 2px solid rgba(232, 165, 53, 0.3);
}

.mega-feature__detail-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mega-feature__detail-desc {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Stacked variant. The "More" section uses this so its title row sits
   on top of the card grid (which spans the full width below) instead
   of being squeezed into a half-width column next to it. Other
   sections keep the default two-column text + visual layout. */
.mega-feature--stacked {
  grid-template-columns: 1fr;
  /* Override the centered flex behavior of the two-column variant
     so the title sits at the top and the card grid stacks below. */
  align-items: start;
}

.mega-feature--stacked .mega-feature__text {
  max-width: 720px;
  margin-bottom: 32px;
  /* The two-column variant flexes the text column to vertically
     center its content AND constrains it to a 16:10 aspect ratio
     to match the visual height. In stacked mode there's no visual
     to match, so undo both. */
  display: block;
  aspect-ratio: auto;
}

/* Feature card grid (for "More" section) */
.mega-feature__card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* When inside a stacked layout, the card grid has the full content
   width to play with. Bump to 4 columns so each card stays a
   reasonable size and the grid doesn't feel crowded. */
.mega-feature--stacked .mega-feature__card-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .mega-feature--stacked .mega-feature__card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Highlighted feature section (gold) ──────────────────────
   Calls out the customize/sync section on the features page so
   it doesn't blend in with the lists above. Subtle accent
   gradient on the section background, gold left border on each
   row, slightly tighter typography on the headings. */
.feature-highlight {
  background:
    linear-gradient(135deg, rgba(232, 165, 53, 0.06), transparent 70%),
    var(--bg-elevated);
  border-top: 1px solid rgba(232, 165, 53, 0.25);
  border-bottom: 1px solid rgba(232, 165, 53, 0.25);
  position: relative;
}

.feature-highlight::before {
  /* Subtle gold glow at the top of the section so the border
     transition reads as intentional rather than abrupt. */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 165, 53, 0.6), transparent);
}

.feature-highlight .section__eyebrow {
  color: var(--accent);
}

.feature-highlight__row {
  /* Gold accent on the left edge of each highlighted row, like a
     pull quote. Adds a hairline of warmth without overwhelming
     the layout. */
  position: relative;
  padding-left: 24px;
  border-left: 2px solid rgba(232, 165, 53, 0.4);
}

@media (max-width: 720px) {
  .feature-highlight__row {
    padding-left: 16px;
  }
}

.mega-feature__card {
  background: var(--bg-elevated);
  padding: 24px;
  transition: background 0.15s;
}

.mega-feature__card:hover { background: var(--bg-hover); }

.mega-feature__card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.mega-feature__card-desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}


/* ══════════════════════════════════════
   DIVIDER STRIP
   ══════════════════════════════════════ */

.divider-strip {
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.divider-strip .container {
  display: flex;
  gap: 48px;
  justify-content: center;
}

.divider-strip span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  white-space: nowrap;
}


/* ══════════════════════════════════════
   FORMAT CAROUSEL
   ══════════════════════════════════════ */

.format-carousel {
  padding: 32px 0;
  overflow: hidden;
}

.format-carousel__track {
  display: flex;
  width: max-content;
  animation: formatScroll 50s linear infinite;
}

.format-carousel__list {
  display: flex;
  gap: 80px;
  padding-right: 80px;
}

.format-carousel__list span {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@keyframes formatScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



/* ══════════════════════════════════════
   TRUST / SOCIAL PROOF (light break)
   ══════════════════════════════════════ */

.trust-section {
  padding: 100px 0;
  background: var(--bg-warm);
}

.trust-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.trust-section__stats {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.trust-section__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.trust-section__stat-label {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
}

.trust-section__quote blockquote {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  margin: 0;
  font-style: normal;
}


/* ══════════════════════════════════════
   BOTTOM CTA
   ══════════════════════════════════════ */

.bottom-cta {
  position: relative;
  overflow: hidden;
  padding: 160px 0;
  background: var(--bg-surface);
}

.bottom-cta__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bottom-cta__inner {
  position: relative;
  z-index: 1;
}

.bottom-cta__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  line-height: 1.1;
}

.bottom-cta__desc {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 40px;
  /* No max-width. Earlier version capped at 440px which forced
     longer one-line copy to wrap. Let it run the natural line
     and trust text-wrap: balance to break gracefully if it ever
     does need a second line. */
  line-height: 1.65;
  text-wrap: balance;
}

.bottom-cta__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}


/* ══════════════════════════════════════
   PRICING
   ══════════════════════════════════════ */

.pricing-section {
  position: relative;
  overflow: hidden;
}

.pricing-section__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.pricing__inner {
  position: relative;
  z-index: 1;
}

.pricing__price {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}

.pricing__label {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 48px;
}

.pricing__includes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 48px;
  margin-bottom: 48px;
}

.pricing__item {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}

.pricing__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.pricing__platforms {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.pricing__platform {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 6px;
}

.pricing__platform--active {
  background: rgba(232, 165, 53, 0.08);
  color: var(--accent);
}

/* ─── Pricing — redesigned (tighter, structured) ────────────── */

/* The pricing inner column centers everything block-level. With only
   one product on the page, a left-aligned card looks unbalanced
   because the right half stays empty. Centering keeps the card as
   the focal point without needing fake "compare" filler.
   List items inside the includes grid still get text-align: left
   so they stay readable. */
.pricing__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.pricing__inner .section__heading {
  margin-bottom: 12px;
}

.pricing__inner .section__desc {
  max-width: 560px;
  margin: 0 auto 56px;
}

/* Single pricing card replaces the loose price + label + grid layout. */
.pricing-card {
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 48px 56px;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 165, 53, 0.06), transparent 60%);
  pointer-events: none;
}

.pricing-card__header {
  position: relative;
  margin-bottom: 32px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.pricing-card__currency {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.pricing-card__amount {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}

.pricing-card__suffix {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-left: 12px;
  padding-bottom: 12px;
}

.pricing-card__label {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

.pricing-card__cta {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.pricing-card__platforms {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--outline);
}

.pricing-card__platform {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  background: var(--bg-card);
  color: var(--text-dim);
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pricing-card__platform--active {
  background: rgba(232, 165, 53, 0.1);
  color: var(--accent);
}

/* "What's included" — structured 3-column instead of 14 flat bullets.
   Centered as a block, but the text inside each column stays
   left-aligned so the bullet lists are scannable. */
.pricing-includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin: 0 auto 32px;
  max-width: 960px;
  text-align: left;
}

.pricing-includes-col__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--outline);
}

.pricing-includes-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-includes-col__list li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pricing-footnote {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pricing-card { padding: 36px 32px; }
  .pricing-card__amount { font-size: 64px; }
  .pricing-includes-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Invite gate (private beta) ─────────────────────────────── */

.invite-gate-body {
  margin: 0;
  background: var(--bg-page);
  font-family: var(--font-display);
  color: var(--text-primary);
  min-height: 100vh;
}

.invite-gate {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}

.invite-gate__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.invite-gate__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 48px 44px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
}

.invite-gate__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.invite-gate__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
  text-align: center;
}

.invite-gate__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-align: center;
  line-height: 1.2;
}

.invite-gate__sub {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 32px;
  line-height: 1.6;
}

.invite-gate__sub a {
  color: var(--accent);
  text-decoration: none;
}

.invite-gate__sub a:hover {
  text-decoration: underline;
}

.invite-gate__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invite-gate__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.invite-gate__input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-page);
  border: 1px solid var(--outline);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.15s;
}

.invite-gate__input::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}

.invite-gate__input:focus {
  border-color: var(--accent);
}

.invite-gate__error {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 5px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.5;
}

.invite-gate__error.is-visible { display: block; }

.invite-gate__submit {
  margin-top: 16px;
  height: 46px;
  background: var(--accent);
  color: var(--bg-page);
  border: none;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.invite-gate__submit:hover { background: #f2b649; }
.invite-gate__submit:active { transform: translateY(1px); }
.invite-gate__submit[disabled] { opacity: 0.6; cursor: wait; }

.invite-gate__footnote {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--outline);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 540px) {
  .invite-gate__card { padding: 36px 28px; }
  .invite-gate__title { font-size: 22px; }
}

/* ─── Cookie disclaimer banner ───────────────────────────────── */

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 10px;
  padding: 16px 20px;
  display: none;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.cookie-banner.is-visible { display: flex; }

.cookie-banner__text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.cookie-banner__text strong { color: var(--text-primary); }

.cookie-banner__text a {
  color: var(--accent);
  text-decoration: none;
}

.cookie-banner__text a:hover { text-decoration: underline; }

.cookie-banner__dismiss {
  flex-shrink: 0;
  height: 32px;
  padding: 0 16px;
  background: var(--accent);
  color: var(--bg-page);
  border: none;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.cookie-banner__dismiss:hover { background: #f2b649; }

@media (max-width: 540px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .cookie-banner__dismiss { width: 100%; }
}


/* ══════════════════════════════════════
   FAQ
   ══════════════════════════════════════ */

.faq-list {
  max-width: 960px;
  /* The pricing page centers everything (eyebrow, heading, card,
     includes grid) via .pricing__inner text-align: center plus
     margin: 0 auto on block elements. The FAQ list lives in its
     own section though, so it needs its own auto margin to line
     up under the centered "Frequently asked" heading. */
  margin: 0 auto;
  /* Centered parent text-align doesn't apply to block paragraphs
     inside the details. Reset to left so the questions stay
     readable. */
  text-align: left;
}

.faq-list details {
  background: var(--bg-elevated);
  margin-bottom: 2px;
}

.faq-list summary {
  padding: 18px 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}

.faq-list summary:hover { background: var(--bg-hover); }
.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  font-size: 20px;
  color: var(--text-dim);
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 16px;
}

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

.faq-list details p {
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}


/* ══════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════ */

.page-header {
  padding: 64px 0 40px;
  position: relative;
  overflow: hidden;
}

.page-header__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
}

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

.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  line-height: 1.1;
}

.page-header p {
  font-size: 17px;
  color: var(--text-muted);
  /* Wider intro paragraphs read better against the large H1 above
     them. The previous 520px max-width was a holdover from when the
     intro was a one-liner; now that the copy is 2-3 sentences it
     needs more horizontal room or it stacks awkwardly on its own
     little column. */
  max-width: 760px;
  line-height: 1.65;
}

/* Features page wants the page-header intro and per-section descriptions
   to fill the full container width — the long-form audio engine intro
   and the "Built for serious listeners" lede both read awkwardly when
   capped at 760px against the wide section grids below them. */
body[data-page="features"] .page-header p,
body[data-page="features"] .section__desc {
  max-width: none;
}


/* ══════════════════════════════════════
   DOWNLOAD CARDS
   ══════════════════════════════════════ */

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}

/* ── Download page sections ── */

.download-section {
  padding: 64px 0 56px;
}

/* First section on the page — needs more breathing room from the nav
   since /download has no .page-header above it. */
.download-callout + .download-section,
.download-section:first-of-type {
  padding-top: 96px;
}

.download-callout--top {
  padding-top: 56px;
}

.download-section--bordered {
  border-top: 1px solid var(--outline);
}

.download-section__header {
  margin-bottom: 32px;
  max-width: 720px;
}

.download-section__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.download-section__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.download-section__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.download-subheading {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 8px 0 10px;
}

.download-subheading__note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 560px;
}

/* ── Mobile store badges (iOS / Android, placeholder) ──
   Inspired by the official "Download on the App Store" and
   "Get it on Google Play" badges without being pixel-perfect
   copies. Dark pill with small caption + bigger title + logo
   on the left. Shipped in the disabled state until the mobile
   apps land; a corner ribbon reads "Coming soon" to make that
   explicit. */

.store-badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.store-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  min-width: 200px;
  height: 60px;
  background: #0f0f10;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}

.store-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 165, 53, 0.4);
}

.store-badge--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
}

.store-badge--disabled:hover {
  transform: none;
}

.store-badge__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-badge__icon svg {
  width: 100%;
  height: 100%;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.store-badge__caption {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

.store-badge__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 1px;
}

.store-badge__overlay {
  position: absolute;
  top: -9px;
  right: 10px;
  background: var(--accent);
  color: #0f0f10;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
}

/* ── Callout cards (license banner + signed-out nudge) ── */

.download-callout {
  padding: 28px 0 0;
}

.download-license-card {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 20px 24px;
}

.download-license-card__info {
  flex: 1;
  min-width: 240px;
}

.download-license-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}

.download-license-card__key {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

.download-license-card__expiry {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.download-license-card__copy {
  background: transparent;
  border: 1px solid var(--outline);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.download-license-card__copy:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.download-license-card__copy.is-copied {
  border-color: var(--accent);
  color: var(--accent);
}

.download-nudge {
  background: var(--bg-elevated);
  border: 1px solid rgba(232, 165, 53, 0.3);
  border-radius: 12px;
  padding: 20px 24px;
}

.download-nudge__body {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.download-nudge__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── System requirements list ── */

.download-reqs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px 32px;
  max-width: 880px;
}

.download-reqs li {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0 8px 22px;
  position: relative;
  line-height: 1.5;
}

.download-reqs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.download-reqs code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(232, 165, 53, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

.download-reqs strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Getting-started numbered list ── */

.download-steps {
  list-style: none;
  counter-reset: steps;
  padding: 0;
  margin: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.download-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.download-steps__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232, 165, 53, 0.1);
  border: 1px solid rgba(232, 165, 53, 0.25);
  border-radius: 4px;
  padding: 4px 8px;
  letter-spacing: 0.04em;
}

.download-steps code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(232, 165, 53, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

.download-steps strong {
  color: var(--text-primary);
  font-weight: 600;
}

.download-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 720px;
}

.download-note strong {
  color: var(--text-primary);
}

.download-card {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  outline: 1px solid var(--outline);
  outline-offset: -1px;
}

.download-card--active {
  outline-color: rgba(232, 165, 53, 0.25);
}

.download-card__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  margin-bottom: 14px;
  opacity: 0.92;
}

.download-card__icon svg {
  width: 100%;
  height: 100%;
}

.download-card__os {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.download-card__version {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.download-card__status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-card);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.download-card__status--available {
  color: var(--accent);
  background: rgba(232, 165, 53, 0.08);
}

.download-card .btn-primary,
.download-card .btn-outline {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.requirements { max-width: 600px; }

.requirements h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.requirements ul { list-style: none; }

.requirements li {
  font-size: 14px;
  color: var(--text-muted);
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}

.requirements li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.5;
}


/* ══════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════ */

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.checkout-summary {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 32px;
  outline: 1px solid var(--outline);
  outline-offset: -1px;
}

.checkout-summary h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.checkout-line {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-muted);
}

.checkout-line + .checkout-line {
  border-top: 1px solid var(--border);
}

.checkout-line:last-child {
  padding-top: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.checkout-action {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 32px;
  outline: 1px solid var(--outline);
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 200px;
}

.checkout-action p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  max-width: 300px;
}


/* ══════════════════════════════════════
   ACCOUNT
   ══════════════════════════════════════ */

.account-placeholder {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 80px 32px;
  outline: 1px solid var(--outline);
  outline-offset: -1px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.account-placeholder__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232, 165, 53, 0.08);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.account-placeholder h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.account-placeholder p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 400px;
}


/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */

.footer {
  padding: 48px 0;
  background: var(--bg-page);
  border-top: 1px solid var(--border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer__brand-mark {
  /* Footer brand was a text `<span>` styled as the wordmark; now it's
     an `<img>` rendering the v3 lockup SVG, so the font rules below
     are inert but harmless — keeping them in case we ever swap back
     to a text fallback. */
  height: 28px;
  width: auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}

.footer__copy {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

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

.footer__col-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer__col a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer__col a:hover { color: var(--text-primary); opacity: 1; }


/* ══════════════════════════════════════
   DOCS
   ══════════════════════════════════════ */

.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 80px;
}

.docs-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.docs-sidebar__group {
  margin-bottom: 24px;
}

.docs-sidebar__group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  padding-left: 12px;
}

.docs-sidebar__link {
  display: block;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 0;
}

.docs-sidebar__link:hover { color: var(--text-primary); opacity: 1; }

.docs-sidebar__link--active {
  color: var(--text-primary);
  border-left-color: var(--accent);
  font-weight: 500;
}

.docs-content {
  max-width: 720px;
  min-width: 0;
}

.docs-content h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.docs-content h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.docs-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 32px;
  margin-bottom: 12px;
}

.docs-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.docs-content ul, .docs-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.docs-content li {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 6px;
}

.docs-content pre {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 20px 24px;
  overflow-x: auto;
  margin-bottom: 16px;
  outline: 1px solid var(--outline);
  outline-offset: -1px;
}

.docs-content pre code {
  background: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}

.docs-content th {
  text-align: left;
  padding: 10px 16px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
}

.docs-content td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.docs-content .callout {
  background: rgba(232, 165, 53, 0.06);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
}

.docs-content .callout p { margin-bottom: 0; color: var(--text-secondary); }


/* ══════════════════════════════════════
   SCROLL FADE-IN
   ══════════════════════════════════════ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  .mega-features__grid { grid-template-columns: 1fr; }
  .mega-features__tabs {
    flex-direction: row;
    overflow-x: auto;
    position: static;
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 48px;
  }
  .mega-features__tab {
    white-space: nowrap;
    padding: 8px 16px;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .mega-features__tab.is-active { border-left-color: transparent; border-bottom-color: var(--accent); }
  .mega-feature { grid-template-columns: 1fr; }
  .mega-feature__card-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-section__inner { grid-template-columns: 1fr; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; max-height: none; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 640px; margin: 0 auto; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  /* Hide the secondary nav links (Features, Docs, Pricing, Download)
     on mobile — the hamburger-style drawer for those is pending. Keep
     the primary action (Sign in + Test Audeeport) visible so mobile
     visitors aren't staring at a logo with nowhere to go. */
  .nav__links { display: none; }
  .nav__actions { gap: 12px; }
  .nav__cta { height: 34px; padding: 0 14px; font-size: 13px; }
  .nav__link--signin { font-size: 13px; }
  .hero { padding: 60px 0 60px; min-height: auto; }
  .hero__title { font-size: 36px; }
  .section { padding: 80px 0; }
  .stats-strip__row { gap: 32px; }
  .mega-feature__card-grid { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .pricing__includes { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .bottom-cta { padding: 100px 0; }
  .auth__card { padding: 32px 24px; }
}

/* ══════════════════════════════════════
   AUTH (login / signup)
   ══════════════════════════════════════ */

.auth {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  position: relative;
  overflow: hidden;
}

.auth__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232, 165, 53, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(232, 165, 53, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.auth__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 40px 36px 32px;
}

.auth__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.auth__logo svg { display: block; }

.auth__heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 6px;
}

.auth__sub {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 28px;
}

.auth__providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.auth__provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--outline);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  width: 100%;
}

.auth__provider:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.auth__provider svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.auth__divider::before,
.auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--outline);
}

.auth__divider span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth__field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.auth__label-hint {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
}

.auth__label-hint:hover { opacity: 0.8; }

.auth__input {
  height: 44px;
  padding: 0 14px;
  background: var(--bg-page);
  border: 1px solid var(--outline);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.auth__input::placeholder { color: var(--text-dim); }

.auth__input:focus {
  border-color: var(--accent);
  background: rgba(232, 165, 53, 0.02);
}

.auth__input-wrap {
  position: relative;
}

.auth__input-wrap .auth__input {
  padding-right: 42px;
}

.auth__input-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.auth__input-toggle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.auth__input-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.auth__input-toggle .icon--off { display: none; }
.auth__input-toggle.is-visible .icon--on { display: none; }
.auth__input-toggle.is-visible .icon--off { display: block; }

.auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 8px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s;
}

.auth__submit:hover { background: var(--accent-dim); }
.auth__submit:active { transform: scale(0.99); }

.auth__alt {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.auth__alt button,
.auth__alt a {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.auth__alt button:hover,
.auth__alt a:hover { opacity: 0.8; }

.auth__footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--outline);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.auth__footer a {
  color: var(--accent);
  font-weight: 500;
}

.auth__error {
  display: none;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

.auth__error.is-visible {
  display: block;
}

.auth__notice {
  display: none;
  padding: 10px 12px;
  background: rgba(232, 165, 53, 0.08);
  border: 1px solid rgba(232, 165, 53, 0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

.auth__notice.is-visible {
  display: block;
}

.auth__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ══════════════════════════════════════
   ACCOUNT DASHBOARD (logged-in)
   ══════════════════════════════════════ */

.dashboard {
  min-height: calc(100vh - 64px);
  padding: 56px 24px;
  position: relative;
  overflow: hidden;
}

.dashboard__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232, 165, 53, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.dashboard__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.dashboard__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.dashboard__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.dashboard__greeting {
  flex: 1;
  min-width: 0;
}

.dashboard__hello {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
}

.dashboard__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__email {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.dashboard__signout {
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: 8px;
  padding: 8px 16px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.dashboard__signout:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.dashboard__card {
  background: var(--bg-elevated);
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.dashboard__card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}

.dashboard__card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.dashboard__card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.dashboard__card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard__license-key {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--outline);
  border-radius: 6px;
  padding: 10px 14px;
  letter-spacing: 0.04em;
}

.dashboard__key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 12px 0 16px;
}

.dashboard__key-row .dashboard__license-key {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
}

.dashboard__key-copy {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: 6px;
  padding: 0 14px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard__key-copy:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.dashboard__key-copy.is-copied {
  border-color: var(--accent);
  color: var(--accent);
}

.dashboard__key-copy svg {
  width: 12px;
  height: 12px;
}

.dashboard__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 8px;
  vertical-align: middle;
}

.dashboard__badge--beta {
  background: rgba(232, 165, 53, 0.12);
  color: var(--accent);
  border: 1px solid rgba(232, 165, 53, 0.3);
}

.dashboard__badge--active {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.dashboard__badge--expired {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.dashboard__meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}

.dashboard__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard__meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dashboard__meta-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Device list (account dashboard) ─────────────────────────────── */

.dashboard__device-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
}

.dashboard__device {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--outline);
  border-radius: 8px;
}

.dashboard__device-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 165, 53, 0.1);
  border-radius: 6px;
  color: var(--accent);
}

.dashboard__device-icon svg {
  width: 16px;
  height: 16px;
}

.dashboard__device-info {
  flex: 1;
  min-width: 0;
}

.dashboard__device-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__device-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.dashboard__device-remove {
  flex-shrink: 0;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--outline);
  border-radius: 5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}

.dashboard__device-remove:hover:not([disabled]) {
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.dashboard__device-remove[disabled] {
  opacity: 0.5;
  cursor: wait;
}


/* ══════════════════════════════════════
   FEATURES PAGE — alternating rows + value strip (Neon-inspired)
   ══════════════════════════════════════ */
.mega-feature--reverse .mega-feature__visual {
  order: -1;
}
.mega-feature + .mega-feature {
  margin-top: 80px;
}

.value-strip {
  padding: 0 0 64px;
}
.value-strip__cards {
  grid-template-columns: repeat(4, 1fr);
}
.value-strip__cards .mega-feature__card-title {
  color: var(--accent);
}
@media (max-width: 1080px) {
  .value-strip__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .value-strip__cards { grid-template-columns: 1fr; }
}

/* Bulleted feature list (unused on /features now, kept for any other surface) */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  max-width: 920px;
}
.feature-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.feature-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}
.feature-list li code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-elevated);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.features-subheading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2.5rem 0 0.5rem;
  letter-spacing: -0.01em;
}