/* ===== White-Label page (whitelabel-aqua.html) ===== */
/* Shares style-aqua.css's design language — these rules only add the
   page-specific components that don't already exist site-wide. */

/* ----- Hero: no video, flat dark-bg, content-sized not 100vh (this page
   has no focal widget/mockup below the CTA, same reasoning as
   .contact-hero in contact-page-aqua.css: "transactional, not a
   showcase" — height auto + min-height 60vh instead of the usual
   100vh video hero). Badge/hero-content overrides duplicated here rather
   than reusing .engine-hero-badge / .hero-compact, since this page does
   not load engines-page-aqua.css (one page-specific stylesheet per page,
   per this codebase's convention). ----- */

.hero-novideo {
  background: var(--dark-bg);
  height: auto;
  min-height: 60vh;
  overflow: visible;
}

.hero-novideo .hero-content {
  position: relative;
  height: auto;
  min-height: 60vh;
}

.hero-novideo .hero-headline-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

.wl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: var(--space-3);
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
}

.wl-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
}

/* ----- Shared section scaffolding ----- */

.wl-section {
  background: var(--light-bg);
}

.wl-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-3) var(--space-6);
}

.wl-section-top {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.wl-section-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.wl-section-heading {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.wl-heading-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.wl-heading-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
}

/* Small "-> next section" arrow link — visual language borrowed from
   .cs-view-link in case-studies-aqua.css (gap-widens-on-hover, no glyph
   swap, restrained). Anchors to the next relevant section id, not a
   button. */

.wl-arrow-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: var(--space-5) auto 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}

.wl-arrow-link:hover {
  gap: 11px;
  color: var(--accent-steel);
}

.wl-arrow-link:hover span:first-child {
  text-decoration: underline;
}

.wl-arrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.wl-cta-btn-wrap {
  text-align: center;
  margin-top: var(--space-5);
}

/* ----- Section 2: How It Works — 3 icon cards ----- */

.wl-how-section {
  background: var(--light-bg);
}

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

/* .wl-icon-card is shared by How It Works (above) and Who It's For
   (below) — a direct clone of engine-text-to-text-aqua.html /
   engine-speech-to-speech-aqua.html's .where-used-card component
   (css/engines-page-aqua.css), same values throughout (plain white card,
   0.5px border, --radius-card, --cream-lightest squircle icon badge,
   left-aligned content, hover lift+shadow) rather than the page's earlier
   pastel-mesh/glass-card treatments. Duplicated here instead of loading
   engines-page-aqua.css on this page, per this codebase's one-stylesheet-
   per-page convention. */

.wl-icon-card {
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.wl-icon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(17, 17, 17, 0.08);
}

.wl-icon-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cream-lightest);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.wl-icon-card-icon svg,
.wl-icon-card-icon i {
  width: 20px;
  height: 20px;
}

.wl-icon-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.wl-icon-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ----- Section 3: What's Configurable — pinned scroll-cycling mechanic,
   architecture identical to index.html's Use Cases section (reuses the
   literal .usecases-* classes from style-aqua.css: 450vh scroll-wrapper,
   sticky inner, 8% white->black crossfade, segmented progress bar). Only
   the right-column mockup panels' own inner content is page-specific —
   the crossfade container itself is the shared .usecases-transcript-stack /
   .usecases-transcript, so no structural CSS is duplicated here. Driven by
   js/wl-configurable-scroll.js (a trimmed copy of usecases-scroll-aqua.js's
   progress mechanic, without the chat-transcript typing sequence). ----- */

.wl-mock-window {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui);
  overflow: hidden;
  background: #ffffff;
}

.wl-mock-chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface-alt);
  border-bottom: 0.5px solid var(--border);
}

.wl-mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}

.wl-mock-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 10px;
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui) var(--radius-ui) 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.wl-mock-favicon {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent-amber);
}

.wl-mock-urlbar {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 5px 12px;
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.wl-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: var(--space-3);
}

.wl-mock-body-center {
  align-items: center;
  text-align: center;
}

.wl-mock-logo-swap {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}

.wl-mock-logo-old {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 0.5px dashed var(--border);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.6;
}

.wl-mock-logo-old-sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.wl-mock-logo-new {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--accent-amber);
  border-radius: var(--radius-ui);
  padding: 8px 14px;
}

.wl-mock-caption {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 4px;
}

.wl-mock-skeleton-row {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
}

.wl-mock-skeleton-w40 { width: 40%; }
.wl-mock-skeleton-w60 { width: 60%; }
.wl-mock-skeleton-w80 { width: 80%; }

.wl-mock-swatch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.wl-mock-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
}

.wl-mock-swatch-active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--accent-steel);
}

.wl-mock-email-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wl-mock-email-label {
  flex-shrink: 0;
  width: 52px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.wl-mock-email-value {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.wl-mock-report-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
}

.wl-mock-report-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.wl-mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  margin: 6px 0;
}

.wl-mock-bars span {
  flex: 1;
  background: var(--accent-steel);
  border-radius: 2px 2px 0 0;
}

/* ----- Section 4: Standard vs. White-Label — stack of full-width
   comparison cards, each revealed individually as it scrolls into view
   (not the site-wide grouped-stagger reveal — see js/wl-compare-reveal.js:
   a dedicated per-card IntersectionObserver, threshold 0.2, unobserve
   after first trigger, so cards visibly appear one after another as the
   stack scrolls past rather than all at once when the section's top edge
   crosses into view). Reuses the shared .reveal-up/.is-visible CSS pair
   (style-aqua.css) for the actual opacity/transform, just driven by a
   different observer than js/scroll-reveal.js's .reveal-group scan —
   these cards are deliberately NOT wrapped in a .reveal-group, so that
   script's own querySelectorAll never touches them. ----- */

.wl-comparison-section {
  background: var(--light-bg);
}

.wl-compare-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 860px;
  margin: 0 auto;
}

/* Grid, not flex-with-space-between: fixed-width Standard/White-Label
   tracks so those columns start at the identical x-position on every
   card regardless of how wide that row's own values render (space-
   between let the columns' shared position drift row-to-row, which was
   the actual bug) — and stays correct if the value text ever gets
   bigger, since the track widths are explicit lengths, not
   content-sized. .wl-compare-card-cols uses `display: contents` so its
   two children become direct grid items in columns 2/3 without an extra
   nesting level. */

.wl-compare-card {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 180px 180px;
  align-items: center;
  gap: var(--space-3);
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: 30px;
}

.wl-compare-card-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  text-align: left;
}

.wl-compare-card-cols {
  display: contents;
}

.wl-compare-card-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.wl-compare-card-col-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wl-compare-card-col-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}

.wl-compare-card-col-value-wl {
  color: var(--accent-steel);
  font-weight: 700;
}

/* ----- Section 5: Infrastructure Boundary — pinned scroll section with
   sequential line-by-line reveal ("movie credits"). Same core scroll-
   progress architecture proven on this page's own Configurable section
   and index.html's Use Cases section (relative wrapper sized in vh,
   position: sticky inner pinned to top:0/100vh, progress tracked via
   getBoundingClientRect(), an 8% color-crossfade point) but implemented
   with its own dedicated classes/JS (js/wl-infra-scroll.js) rather than
   reusing .usecases-* literally, since the content shape here (3 stacked
   reveal lines, no list/visual-column split) doesn't match that
   component — matches this codebase's established convention of
   duplicating a proven mechanic under new names when the content differs,
   rather than forcing a shared class onto a different shape. Checked
   html/body overflow first: neither style-aqua.css nor tokens-aqua.css
   sets overflow-x or overflow-y on html/body (confirmed via grep), so
   there's no unpaired overflow-x:hidden to fix — position: sticky here
   works against the current default (both axes visible) with nothing
   to correct. ----- */

.wl-infra-section {
  background: var(--light-bg);
}

.wl-infra-scroll-wrapper {
  position: relative;
  height: 210vh;
}

.wl-infra-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  color: var(--text-primary);
  overflow: hidden;
}

.wl-infra-lines {
  max-width: 95vw;
  padding: 0 var(--space-3);
  text-align: center;
}

.wl-infra-pin-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.5;
  margin-bottom: var(--space-4);
}

.wl-infra-line {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
  margin: 0 0 var(--space-3);
  white-space: nowrap;
  transition: color 0.4s ease, font-weight 0.4s ease, transform 0.4s ease;
}

.wl-infra-line:last-child {
  margin-bottom: 0;
}

.wl-infra-line.is-settled {
  color: rgba(255, 255, 255, 0.5);
}

.wl-infra-line.is-active {
  color: #ffffff;
  font-weight: 700;
  transform: scale(1.03);
}

@media (max-width: 768px) {
  /* Scroll-scrub pin never fits a narrow viewport (CIPHER-OS MOBILE-FIRST
     RULES). Below 768px this section is replaced by the .mobile-carousel
     built by wl-infra-scroll.js (swipeable cards + dot indicators, fixed
     dark state) — see js/mobile-carousel.js. */
  .wl-infra-scroll-wrapper {
    height: auto;
  }

  .wl-infra-sticky {
    display: none;
  }
}

/* ----- Section 6: Who It's For — 3 cards, shares .wl-icon-card with
   How It Works above (see that section's comment) ----- */

.wl-who-section {
  background: var(--light-bg);
}

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

/* ----- Section 7 (FAQ) and the closing CTA band now reuse index.html's
   .faq-section / .faq-glow / .faq-card / .faq-item* and .cta-band-section /
   .cta-video-wrap / .cta-content classes verbatim, unmodified — both are
   fully defined in the shared style-aqua.css already loaded by every aqua
   page, so no page-specific CSS is needed for either component. Only the
   Q&A content and CTA copy differ. */

/* ----- Mobile (written alongside desktop, not after) ----- */

@media (max-width: 900px) {
  .wl-steps-grid,
  .wl-who-grid {
    grid-template-columns: 1fr;
  }

  /* Below 900px, cards stack top-to-bottom rather than sitting side by
     side in a comparison row, so the fixed-track grid alignment (the
     whole point of which is keeping columns level across ROWS) has
     nothing left to align against — revert to a plain stacked flex
     layout here instead of forcing the desktop grid's fixed 180px
     tracks onto a narrow screen. */

  .wl-compare-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .wl-compare-card-cols {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .wl-container {
    padding: var(--space-6) var(--space-2) var(--space-5);
  }

  .wl-compare-card {
    padding: var(--space-3);
  }

  .wl-compare-card-cols {
    gap: var(--space-3);
  }
}