:root {
  --midnight: #081426;
  --indigo: #172554;
  --surface: #111b32;
  --surface-raised: #182643;
  --surface-hover: #213357;
  --border: #2b3c61;
  --border-light: #3d5382;
  --aqua: #2dd4bf;
  --aqua-hover: #14b8a6;
  --aqua-glow: rgba(45, 212, 191, 0.15);
  --sky: #38bdf8;
  --violet: #a78bfa;
  --coral: #fb7185;
  --success: #34d399;
  --warning: #fbbf24;
  --text: #f8fafc;
  --text-muted: #9fb0cf;
  --text-dim: #64748b;
  --measure: 68ch;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(45, 212, 191, 0.25);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--midnight);
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility: Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--aqua);
  color: var(--midnight);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* Focus visibility for all interactive elements */
:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Typography Defaults */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 700;
  line-height: 1.25;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--aqua);
  text-decoration: none;
  transition: color 0.15s ease;
}

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

/* Header & Navigation */
.bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(8, 20, 38, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (min-width: 640px) {
  .bar {
    padding: 14px 24px;
    gap: 16px 24px;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  min-height: 38px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .brand {
    gap: 10px;
    font-size: 19px;
    min-height: 44px;
  }
}

.brand-icon {
  width: 26px;
  height: 26px;
  display: block;
}

@media (min-width: 640px) {
  .brand-icon {
    width: 28px;
    height: 28px;
  }
}

.bar nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.bar nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 4px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.bar nav a:hover,
.bar nav a[aria-current="page"] {
  color: var(--text);
}

@media (max-width: 580px) {
  .bar nav .nav-link-demo,
  .bar nav .nav-link-page {
    display: none;
  }
}

.nav-cta {
  padding: 7px 16px;
  min-height: 36px;
  font-size: 13px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .nav-cta {
    padding: 8px 18px;
    min-height: 38px;
    font-size: 14px;
  }
}

/* Buttons & CTAs */
.cta, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cta-primary {
  background: var(--aqua);
  color: var(--midnight) !important;
  box-shadow: 0 4px 14px rgba(45, 212, 191, 0.3);
}

.cta-primary:hover {
  background: var(--aqua-hover);
  color: var(--midnight) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45, 212, 191, 0.45);
}

.btn-secondary {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-light);
  color: var(--text);
}

.cta-large {
  padding: 12px 24px;
  font-size: 15px;
  min-height: 44px;
}

@media (min-width: 640px) {
  .cta-large {
    padding: 14px 28px;
    font-size: 16px;
    min-height: 48px;
  }
}

.cta-block {
  width: 100%;
}

/* Main Container */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}

@media (min-width: 640px) {
  main {
    padding: 40px 20px 80px;
  }
}

main.prose {
  max-width: var(--measure);
  padding: 32px 16px 80px;
}

@media (min-width: 640px) {
  main.prose {
    padding: 48px 20px 80px;
  }
}

main.prose h1 {
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 12px;
}

main.prose h2 {
  margin: 40px 0 14px;
  font-size: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

main.prose h3 {
  margin: 28px 0 10px;
  font-size: 17px;
}

main.prose p.lead {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 8px 0 32px;
  max-width: 840px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .hero {
    padding: 24px 0 64px;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--aqua);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .hero-badge {
    gap: 8px;
    padding: 6px 16px;
    font-size: 13px;
    margin-bottom: 24px;
  }
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 8px var(--aqua);
}

@media (min-width: 640px) {
  .badge-dot {
    width: 8px;
    height: 8px;
  }
}

.hero-title {
  font-size: clamp(25px, 5.8vw, 54px);
  letter-spacing: -0.025em;
  line-height: 1.16;
  margin: 0 0 14px;
  color: var(--text);
}

@media (min-width: 640px) {
  .hero-title {
    margin: 0 0 20px;
  }
}

.hero-lead {
  font-size: clamp(14.5px, 2.2vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 24px;
}

@media (min-width: 640px) {
  .hero-lead {
    margin: 0 auto 36px;
  }
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  max-width: 360px;
  margin: 0 auto 28px;
}

@media (min-width: 480px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: none;
    gap: 12px;
    margin: 0 auto 40px;
  }
}

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  font-size: 12.5px;
}

.hero-discount-note {
  max-width: 620px;
  margin: -16px auto 22px;
  color: var(--aqua);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 640px) {
  .hero-highlights {
    gap: 10px;
    padding: 16px 20px;
    font-size: 14px;
  }
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.highlight-icon {
  color: var(--aqua);
  font-weight: 700;
}

/* Section Common */
.section-features,
.section-pricing,
.section-faq,
.section-bottom-cta {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 44px;
}

.section-title {
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

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

.feature-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aqua);
  margin-bottom: 18px;
}

.feature-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--text);
}

.feature-card p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.feature-checklist li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}

.feature-checklist li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--aqua);
  font-weight: bold;
}

/* Pricing Section */
.pricing-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(45, 212, 191, 0.1);
  color: var(--aqua);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.pricing-container {
  max-width: 580px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--surface-raised);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s ease;
}

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

.pricing-card-header {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.plan-name {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aqua);
  display: block;
  margin-bottom: 8px;
}

.price-display {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  color: var(--text);
  margin: 12px 0;
  line-height: 1.3;
}

.trial-tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(52, 211, 153, 0.12);
  color: var(--success);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.discount-tag {
  display: block;
  max-width: 430px;
  margin: 0 auto 10px;
  color: var(--aqua);
  font-size: 14px;
  font-weight: 700;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 14.5px;
}

.pricing-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-muted);
}

.pricing-feature-row .check {
  color: var(--aqua);
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-feature-row strong {
  color: var(--text);
}

.pricing-cta-wrap {
  text-align: center;
}

.pricing-guarantee {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 12px 0 0;
}

/* FAQ Section */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.faq-item[open] {
  border-color: var(--border-light);
  background: var(--surface-raised);
}

.faq-question {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  user-select: none;
}

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

.faq-question::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--aqua);
  margin-left: 12px;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
  content: "\2212";
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* Bottom CTA Banner */
.section-bottom-cta {
  padding: 48px 0 24px;
}

.bottom-cta-inner {
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.bottom-cta-inner h2 {
  font-size: clamp(22px, 3.5vw, 30px);
  margin: 0 0 12px;
}

.bottom-cta-inner p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}

.bottom-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cta-micro-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* Common Panels and Tables for Legal/Support */
.panel {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  margin: 28px 0;
}

.panel h2 {
  margin-top: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  background: var(--surface);
}

ul, ol {
  padding-left: 24px;
}

li {
  margin: 8px 0;
  color: var(--text-muted);
}

li strong {
  color: var(--text);
}

/* Unresolved site.config.json values */
.todo {
  background: var(--warning);
  color: #1a1204;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
  display: inline-block;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  background: var(--midnight);
  padding: 40px 24px 60px;
  color: var(--text-muted);
  font-size: 13.5px;
}

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

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: center;
  margin-bottom: 20px;
}

.footer-links a {
  color: var(--text-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

footer p {
  margin: 6px auto;
  max-width: 680px;
}

footer .muted {
  color: var(--text-dim);
  font-size: 12.5px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Scroll progress, sticky chapter labels, entrance transitions
   ========================================================================== */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--aqua), var(--sky));
  transform: scaleX(0);
  transform-origin: left center;
}

.chapter {
  position: sticky;
  top: var(--bar-h, 76px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 28px;
  padding: 7px 16px 7px 8px;
  background: rgba(17, 27, 50, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chapter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--aqua);
  color: var(--midnight);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

/* Entrance transitions are opt-in: the script arms an element only once it knows the
   element is off screen, so content is never hidden by a stylesheet that outlives its
   script. Without JavaScript nothing is armed and the page renders fully visible. */
.reveal.is-armed {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-armed.is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Scroll-driven play showcase
   ========================================================================== */

.section-showcase {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}

/* Scroll-telling layout: the diagram sticks while the step cards scroll past it on desktop.
   On mobile (< 900px), pb-sticky is static and the dedicated mobile stepper provides
   touch-friendly step controls directly beneath the field without text flying behind it. */
.pb-stage {
  display: block;
}

.pb-sticky {
  position: static;
}

.pb-side {
  display: none;
}

@media (min-width: 900px) {
  .pb-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr);
    gap: 36px;
    align-items: start;
  }

  /* Fill the viewport below the header and centre the diagram in it, so the pinned
     column never floats in a half-empty screen. */
  .pb-sticky {
    position: sticky;
    top: calc(var(--bar-h, 76px) + 52px);
    z-index: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--bar-h, 76px) - 104px);
  }

  .pb-side {
    display: block;
    padding-top: 0;
    padding-bottom: 20vh;
  }
}

.pb-figure {
  margin: 0;
  min-width: 0;
}

.pb-fieldwrap {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #f8fafc;
  box-shadow: var(--shadow-md);
  line-height: 0;
}

.pb-field {
  display: block;
  width: 100%;
  height: auto;
}

.pb-turf path,
.pb-turf line {
  fill: none;
}

.pb-wordmark {
  font-family: Arial, sans-serif;
  font-size: 48px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 7px;
  text-anchor: middle;
  fill: #a5b2c8;
}

.pb-num text {
  font-family: Arial, sans-serif;
  font-size: 54px;
  font-weight: 900;
  text-anchor: middle;
  fill: #94a3b8;
}

.pb-num polygon {
  fill: #94a3b8;
}

.pb-pylon rect {
  fill: #f97316;
  stroke: #fff7ed;
  stroke-width: 2;
}

.pb-los {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  fill: #0f766e;
}

/* Walkthrough tabs selector */
.pb-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

/* Narrow screens cannot fit the three tabs on one line, and a pill radius on a frame two
   or three rows tall bows out into a lozenge around them. Stacked instead: the frame stays
   a rectangle, so it still reads as one group holding three buttons. */
.pb-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  gap: 6px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.pb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pb-tab:hover {
  color: var(--text);
  background: var(--surface-raised);
}

.pb-tab.is-active {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.4);
  color: var(--aqua);
}

.pb-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
}

.pb-tab.is-active .pb-tab-num {
  background: var(--aqua);
  color: var(--midnight);
}

/* The whole row fits from here up, so the group goes back to being a single pill. */
@media (min-width: 760px) {
  .pb-tabs {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    border-radius: var(--radius-full);
  }

  .pb-tab {
    border-radius: var(--radius-full);
  }
}

/* Walkthrough layer visibility */
.pb-walkthrough-layer,
.pb-panel {
  display: none;
}

.pb-stage[data-active="options"] .pb-wt-options,
.pb-stage[data-active="options"] .pb-panel[data-walkthrough="options"] {
  display: block;
}

.pb-stage[data-active="doubleqb"] .pb-wt-doubleqb,
.pb-stage[data-active="doubleqb"] .pb-panel[data-walkthrough="doubleqb"] {
  display: block;
}

.pb-stage[data-active="adjustments"] .pb-wt-adjustments,
.pb-stage[data-active="adjustments"] .pb-panel[data-walkthrough="adjustments"] {
  display: block;
}

.pb-stage:not([data-active]) .pb-wt-options,
.pb-stage:not([data-active]) .pb-panel[data-walkthrough="options"] {
  display: block;
}

/* Routes. Colour is set on the group; the line and its arrowhead inherit it. */
.pb-route {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-line,
.pb-head {
  fill: none;
  stroke: inherit;
  stroke-width: inherit;
  stroke-linecap: inherit;
  stroke-linejoin: inherit;
}

.pb-r-option .pb-line { stroke-dasharray: 5 9; }
.pb-r-continuation .pb-line { stroke-dasharray: 13 8 3 8; }

/* Default: colour by player, exactly like the editor's default route colour mode. */
.pb-o-x { stroke: #f97316; }
.pb-o-y { stroke: #a855f7; }
.pb-o-c { stroke: #64748b; }
.pb-o-z { stroke: #0ea5e9; }
.pb-o-q { stroke: #ef4444; }

.pb-stage.by-kind .pb-r-primary { stroke: #0f766e; }
.pb-stage.by-kind .pb-r-option { stroke: #e11d48; }
.pb-stage.by-kind .pb-r-continuation { stroke: #7c3aed; }

/* The reveal wipe lives inside <mask>, so it is styled from the stage, not the route. */
.pb-wipe {
  fill: none;
  stroke: #fff;
  stroke-width: 40;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--pb-d, 0ms);
}

.pb-stage.show-step-1 .pb-w-step-1,
.pb-stage.show-step-2 .pb-w-step-1,
.pb-stage.show-step-2 .pb-w-step-2,
.pb-stage.show-step-3 .pb-w-step-1,
.pb-stage.show-step-3 .pb-w-step-2,
.pb-stage.show-step-3 .pb-w-step-3,
.pb-stage.show-live .pb-w-step-1,
.pb-stage.show-live .pb-w-step-2,
.pb-stage.show-live .pb-w-step-3 {
  stroke-dashoffset: 0;
}

.pb-anchor circle {
  fill: #fff;
  stroke: #e11d48;
  stroke-width: 5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pb-stage.show-step-3 .pb-anchor circle,
.pb-stage.show-live .pb-anchor circle {
  opacity: 1;
  transform: scale(1);
}

.pb-players circle,
.pb-players rect {
  fill: currentColor;
  stroke: #ffffff;
  stroke-width: 3;
}

.pb-player {
  color: #64748b;
}

.pb-o-x.pb-player { color: #f97316; }
.pb-o-y.pb-player { color: #a855f7; }
.pb-o-c.pb-player { color: #64748b; }
.pb-o-z.pb-player { color: #0ea5e9; }
.pb-o-q.pb-player { color: #ef4444; }

.pb-players text {
  font-family: ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-anchor: middle;
  fill: #ffffff;
  stroke: none;
}

.pb-flight,
.pb-pitch-flight,
.pb-bomb-flight {
  fill: none;
  stroke: #0f172a;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.45;
}

.pb-catchring {
  fill: none;
  stroke: #34d399;
  stroke-width: 5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.pb-stage.is-caught .pb-catchring {
  animation: pb-catch 0.9s ease-out;
}

@keyframes pb-catch {
  0% { opacity: 0.9; transform: scale(0.35); }
  70% { opacity: 0.55; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.35); }
}

.pb-ball {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pb-stage.is-playing .pb-ball,
.pb-stage.is-caught .pb-ball {
  opacity: 1;
}

/* Legend */
.pb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pb-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pb-keys-player {
  display: none;
}

.pb-stage:not(.by-kind) .pb-keys-player {
  display: flex;
}

.pb-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text-muted);
}

.pb-key svg {
  width: 34px;
  height: 8px;
  flex: none;
}

.pb-key svg path {
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 3;
  stroke-linecap: round;
}

.pb-stage.by-kind .pb-key-primary svg path { stroke: #2dd4bf; }
.pb-stage.by-kind .pb-key-option svg path { stroke: #fb7185; }
.pb-stage.by-kind .pb-key-continuation svg path { stroke: #a78bfa; }

.pb-key-option svg path { stroke-dasharray: 2 5; }
.pb-key-continuation svg path { stroke-dasharray: 7 4 1 4; }

.pb-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
  color: var(--text-dim);
}

.pb-dot.pb-o-x { color: #f97316; }
.pb-dot.pb-o-y { color: #a855f7; }
.pb-dot.pb-o-c { color: #94a3b8; }
.pb-dot.pb-o-z { color: #0ea5e9; }
.pb-dot.pb-o-q { color: #ef4444; }

/* Defenders layer */
.pb-def-layer {
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pb-defender circle {
  fill: #fff1f2;
  stroke: #e11d48;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.pb-defender text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  fill: #9f1239;
  text-anchor: middle;
  dominant-baseline: central;
}

.pb-def-zone {
  fill: rgba(225, 29, 72, 0.04);
  stroke: rgba(225, 29, 72, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.pb-def-c1 {
  opacity: 1;
}

.pb-def-c2 {
  opacity: 0;
}

.pb-stage.show-step-2 .pb-def-c1,
.pb-stage.show-step-3 .pb-def-c1,
.pb-stage.show-live .pb-def-c1 {
  opacity: 0;
}

.pb-stage.show-step-2 .pb-def-c2,
.pb-stage.show-step-3 .pb-def-c2,
.pb-stage.show-live .pb-def-c2 {
  opacity: 1;
}

/* Showcase side panel */
.pb-side {
  min-width: 0;
}

.pb-play-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.pb-play-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.32);
  color: var(--aqua);
  font-size: 12px;
  font-weight: 800;
}

.pb-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 45vh;
}

/* Each card owns an equal slice of scroll distance and has uniform vertical spacing. */
.pb-steps li {
  display: flex;
  align-items: center;
  min-height: 22vh;
  margin: 0;
}

.pb-steps li:first-child {
  min-height: 22vh;
  align-items: center;
}

.pb-steps li:last-child {
  min-height: 22vh;
  align-items: center;
  padding-top: 0;
}

.pb-step {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pb-step:hover {
  background: var(--surface);
  border-color: var(--border);
}

.pb-step[aria-current="step"] {
  background: var(--surface-raised);
  border-color: var(--border-light);
  color: var(--text);
}

.pb-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pb-step[aria-current="step"] .pb-step-n {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--midnight);
}

.pb-step-b {
  min-width: 0;
}

.pb-step-b strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.pb-step-x {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Cards that are not the current step recede rather than disappear, so the whole
   sequence stays readable and the section still makes sense without JavaScript. */
.pb-step:not([aria-current="step"]) {
  opacity: 0.5;
}

.pb-step:not([aria-current="step"]):hover {
  opacity: 0.85;
}

.pb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.pb-btn {
  gap: 9px;
  padding: 10px 20px;
}

.pb-btn-icon {
  font-size: 11px;
  color: var(--aqua);
}

.pb-stage.is-playing .pb-btn {
  opacity: 0.62;
}

/* The walkthrough only moves if someone presses "Animate Call" or "Next Step", so those two
   read as the widget's primary control rather than one more muted secondary button. The ring
   pulse invites the first press and stops once the widget has been used; the global
   prefers-reduced-motion rule above disables it outright. */
.pb-btn-lead {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.55);
  color: var(--aqua);
  font-weight: 700;
}

.pb-btn-lead:hover {
  background: rgba(45, 212, 191, 0.2);
  border-color: var(--aqua);
  color: var(--aqua);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 212, 191, 0.28);
}

.pb-btn-lead .pb-btn-icon {
  color: var(--aqua);
}

.pb-stage:not(.is-engaged) .pb-btn-lead {
  animation: pb-nudge 2.6s ease-out infinite;
}

/* Paused while the play animates, so the pulse never competes with the diagram. */
.pb-stage.is-playing .pb-btn-lead {
  animation: none;
}

@keyframes pb-nudge {
  0%, 70%, 100% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.45);
  }
  35% {
    box-shadow: 0 0 0 8px rgba(45, 212, 191, 0);
  }
}

.pb-toggle {
  padding: 9px 16px;
  min-height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px dashed var(--border-light);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pb-toggle:hover {
  color: var(--text);
  border-color: var(--aqua);
}

.pb-toggle[aria-pressed="true"] {
  background: rgba(45, 212, 191, 0.1);
  border-style: solid;
  border-color: rgba(45, 212, 191, 0.45);
  color: var(--aqua);
}

/* Mobile Stepper Controller */
.pb-mobile-stepper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

@media (min-width: 900px) {
  .pb-mobile-stepper {
    display: none;
  }
}

.pb-stepper-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pb-dot-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pb-dot-step.is-active {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--midnight);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
}

.pb-stepper-card {
  text-align: center;
  min-height: 52px;
  padding: 4px 6px;
}

.pb-stepper-card-title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.pb-stepper-card-desc {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.pb-stepper-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.pb-nav-btn {
  flex: 1;
  padding: 8px 14px;
  min-height: 38px;
  font-size: 13.5px;
}

.pb-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pb-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ==========================================================================
   Interactive wristband sizer
   ========================================================================== */

.section-wristband {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}

.wb-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

@media (min-width: 880px) {
  .wb-grid {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 34px;
  }
}

.wb-set {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.wb-set legend {
  padding: 0;
  margin-bottom: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.wb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wb-chip {
  position: relative;
  display: inline-flex;
}

.wb-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.wb-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wb-chip:hover span {
  border-color: var(--border-light);
  color: var(--text);
}

.wb-chip input:checked + span {
  background: rgba(45, 212, 191, 0.12);
  border-color: var(--aqua);
  color: var(--aqua);
}

.wb-chip input:focus-visible + span {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.wb-readout {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
}

.wb-readout > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.wb-readout > div:last-child {
  border-bottom: 0;
}

.wb-readout dt {
  color: var(--text-muted);
}

.wb-readout dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.wb-warn {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.34);
  color: var(--warning);
  font-size: 13px;
  line-height: 1.5;
}

.wb-warn[hidden] {
  display: none;
}

/* Preview */
.wb-preview {
  min-width: 0;
}

.wb-stagearea {
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  padding: 26px 22px;
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* The band is a true fraction of the 5-inch ruler below it, so 3 inches looks like 3. */
.wb-band {
  position: relative;
  width: calc(var(--wb-w, 4) / 5 * 100%);
  aspect-ratio: var(--wb-w, 4) / var(--wb-h, 2.5);
  padding: 4px;
  background: #ffffff;
  border: 1px dashed #0f172a;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wb-band::before,
.wb-band::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--text-dim);
  border-style: solid;
}

.wb-band::before {
  top: -7px;
  left: -7px;
  border-width: 1px 0 0 1px;
}

.wb-band::after {
  bottom: -7px;
  right: -7px;
  border-width: 0 1px 1px 0;
}

.wb-cells {
  display: grid;
  grid-template-columns: repeat(var(--wb-cols, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wb-rows, 2), minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  height: 100%;
}

.wb-cell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #94a3b8;
}

.wb-cell header {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 1px 3px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: var(--wb-fs, 8px);
  font-weight: 700;
  line-height: 1.3;
}

.wb-cell header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-cell header b {
  flex: none;
  color: #0f766e;
}

.wb-mini {
  min-height: 0;
  padding: 1px;
  background: #ffffff;
}

.wb-mini svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wb-cell:nth-child(even) .wb-mini svg {
  transform: scaleX(-1);
}

/* Ruler */
.wb-ruler {
  padding: 0 22px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.wb-ticks {
  height: 11px;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  background-image: repeating-linear-gradient(to right, var(--border-light) 0 1px, transparent 1px 10%);
}

.wb-ruler-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.wb-caption {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ==========================================================================
   FAQ accordion refinements
   ========================================================================== */

/* The heading lives inside <summary> so screen readers can jump between questions,
   while the native <details> keeps the disclosure semantics and keyboard behaviour. */
.faq-question h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
}

.faq-item[open] .faq-answer {
  animation: faq-open 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* The diagram becomes one static, complete figure. The step cards still highlight
     as you pass them, but nothing draws itself and nothing animates. */
  .pb-steps li {
    min-height: 0;
    margin-bottom: 10px;
  }

  .pb-steps li:first-child {
    min-height: 0;
  }

  .pb-wipe {
    stroke-dashoffset: 0 !important;
  }

  .pb-anchor circle {
    opacity: 1;
    transform: none;
  }

  .reveal.is-armed {
    opacity: 1;
    transform: none;
  }

  .wb-band {
    transition: none;
  }
}

/* ==========================================================================
   Waitlist / Early Access Modal
   ========================================================================== */

.wl-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 23, 0.84);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.wl-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.wl-dialog {
  width: 100%;
  max-width: 520px;
  background: #0a1427;
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 240, 255, 0.15);
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wl-backdrop.is-open .wl-dialog {
  transform: scale(1) translateY(0);
}

.wl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #020817;
}

.wl-header-main {
  flex: 1;
}

.wl-eyebrow {
  display: inline-block;
  color: #00F0FF;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.wl-title {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.wl-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wl-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.wl-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wl-lead {
  margin: 0;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.55;
}

.wl-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 12px;
}

.wl-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e2e8f0;
  font-size: 13px;
}

.wl-check {
  color: #00F0FF;
  font-weight: 900;
  font-size: 14px;
}

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

.wl-label {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wl-input-row {
  display: flex;
  gap: 8px;
}

.wl-input {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  background: #020817;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wl-input:focus {
  border-color: #00F0FF;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18);
}

.wl-btn {
  white-space: nowrap;
  padding: 0 20px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
}

.wl-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wl-status {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.wl-status-error {
  color: #f87171;
}

.wl-success {
  text-align: center;
  padding: 12px 0 6px;
}

.wl-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: #10b981;
  color: #020817;
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.wl-success-title {
  color: #f8fafc;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 8px;
}

.wl-success-desc {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}

.wl-success-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wl-demo-btn {
  padding: 10px 18px;
  font-size: 13px;
}

.wl-done-btn {
  padding: 10px 18px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

@media (max-width: 520px) {
  .wl-input-row {
    flex-direction: column;
  }
  .wl-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Support Page & Prose Panels
   ========================================================================== */

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
}

.contact-card {
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface) 100%);
  border: 1px solid var(--border-light);
}

.contact-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.contact-card-header h2 {
  margin: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.contact-email {
  font-size: 16px;
  margin: 6px 0 0;
}

.contact-email a {
  font-weight: 700;
}

.fallback-card {
  text-align: center;
  padding: 36px 24px;
  margin-top: 48px;
  border-color: var(--border-light);
}

.fallback-card h2 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

.fallback-actions {
  margin-top: 20px;
}

.faq-sections {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.faq-category-title {
  font-size: 17px;
  color: var(--aqua);
  margin: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.faq-more {
  text-align: center;
  margin-top: 24px;
  font-size: 15px;
  color: var(--text-muted);
}

.faq-more a {
  font-weight: 600;
}

.other-links-section {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}