/* Pro showcase page - feature deep-dives, paired with the membership comparison. */

.pro-body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #141414;
  color: #d8d8d8;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
}

.pro-main {
  padding: 3.5rem 1.25rem 5rem;
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.pro-hero {
  position: relative;
  max-width: 760px;
  margin: 0 auto 5rem;
  text-align: center;
  padding: 1rem 0;
}

.pro-hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 130%;
  background: radial-gradient(ellipse, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.pro-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.pro-hero-inner .capabilities-label {
  color: #c8a96e;
  margin-bottom: 0.1rem;
}

/* Pro badge in hero — mirrors the dev-log Supporter badge in scale & animation,
   uses the magenta Pro brand palette (same as .tier-badge.tier-pro in catalog.css). */
@keyframes pro-hero-badge-shine {
  0%, 15% { transform: translateX(-160%) skewX(-12deg); }
  65%, 100% { transform: translateX(320%) skewX(-12deg); }
}

@keyframes pro-hero-badge-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5) inset,
      0 2px 8px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(205, 75, 185, 0.22),
      0 0 80px rgba(180, 30, 175, 0.1),
      0 0 2px rgba(255, 180, 245, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5) inset,
      0 2px 8px rgba(0, 0, 0, 0.5),
      0 0 55px rgba(210, 90, 195, 0.38),
      0 0 110px rgba(180, 30, 175, 0.18),
      0 0 2px rgba(255, 200, 245, 0.62);
  }
}

.pro-hero-badge {
  position: relative;
  display: inline-block;
  padding: 0.7rem 1.8rem;
  border-radius: 8px;
  background:
    linear-gradient(165deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg,
      #3c1640 0%,
      #62205a 28%,
      #4a1746 55%,
      #310d30 100%);
  border: 1px solid rgba(210, 90, 195, 0.5);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(205, 75, 185, 0.22),
    0 0 80px rgba(180, 30, 175, 0.1),
    0 0 2px rgba(255, 180, 245, 0.4);
  overflow: hidden;
  vertical-align: middle;
  margin-bottom: 0.3rem;
}

.pro-hero-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.13) 50%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-12deg);
  pointer-events: none;
}

.pro-hero-badge::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  z-index: 0;
  background: linear-gradient(to top, rgba(225, 145, 210, 0.14), transparent);
  border-radius: 0 0 7px 7px;
  pointer-events: none;
}

.pro-hero-badge-label {
  position: relative;
  z-index: 1;
  display: block;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2cae8;
  text-shadow:
    0 0 20px rgba(210, 90, 195, 0.6),
    0 1px 0 rgba(20, 4, 18, 0.85);
  line-height: 1;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .pro-hero-badge {
    animation: pro-hero-badge-glow 3.5s ease-in-out infinite;
  }
  .pro-hero-badge::before {
    animation: pro-hero-badge-shine 5.5s ease-in-out 1.5s infinite;
  }
}

@media (max-width: 640px) {
  .pro-hero-badge {
    padding: 0.6rem 1.4rem;
  }
  .pro-hero-badge-label {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }
}

.pro-hero-title {
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0;
  color: #ebebeb;
  text-wrap: balance;
}

.pro-hero-title .hero-accent {
  color: #c8a96e;
}

.pro-hero-lead {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #9a9a9a;
  max-width: 580px;
  margin: 0;
}

.pro-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(200, 169, 110, 0.32);
  background: rgba(200, 169, 110, 0.06);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #d6c8b0;
  letter-spacing: 0.01em;
}

.pro-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8a96e;
  box-shadow: 0 0 8px rgba(200, 169, 110, 0.7);
  animation: pro-pulse 2.4s ease-in-out infinite;
}

@keyframes pro-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.pro-hero-cta {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hero CTAs live in the same magenta palette as the PRO badge above them,
   but at a lower intensity than the closing CTA — this is the whisper, the
   close is the shout. Gold stays reserved for analytical accents. */
.pro-hero-cta .pro-cta--filled {
  background: linear-gradient(145deg, #3c1640 0%, #4e1a48 50%, #2a0b28 100%);
  color: #e8c4dc;
  border: 1px solid rgba(160, 70, 145, 0.45);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.pro-hero-cta .pro-cta--filled:hover {
  background: linear-gradient(145deg, #4a1c50 0%, #5e2056 50%, #380f36 100%);
  border-color: rgba(180, 80, 160, 0.55);
  color: #f2d8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.pro-hero-cta .pro-cta--ghost:hover {
  border-color: rgba(210, 90, 195, 0.6);
  color: #f2cae8;
}

.pro-hero-trust {
  font-size: 0.78rem;
  color: #6f6f6f;
  margin: 0.9rem 0 0;
  letter-spacing: 0.01em;
}

/* ── Built for (identity strip) ───────────────────────────────────────────── */

.pro-built-for {
  max-width: 880px;
  margin: 0 auto 4.5rem;
  padding: 2.2rem 1.8rem;
  background: linear-gradient(180deg, rgba(200, 169, 110, 0.04) 0%, transparent 100%);
  border: 1px solid rgba(200, 169, 110, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.pro-built-for .capabilities-label {
  color: #c8a96e;
}

.pro-built-for-title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ebebeb;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}

.pro-built-for-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 2rem;
  max-width: 720px;
  width: 100%;
}

.pro-built-for-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  text-align: left;
}

.pro-built-for-glyph {
  flex-shrink: 0;
  color: #c8a96e;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

.pro-built-for-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #c8c8c8;
}

.pro-built-for-text em {
  color: #c8a96e;
  font-style: normal;
  font-weight: 600;
}

/* ── CTA buttons (shared) ─────────────────────────────────────────────────── */

.pro-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.pro-cta--filled {
  background: #c8a96e;
  color: #141414;
}
.pro-cta--filled:hover {
  background: #d4b87e;
  transform: translateY(-1px);
}

.pro-cta--ghost {
  background: transparent;
  color: #d8d8d8;
  border-color: #2a2a2a;
}
.pro-cta--ghost:hover {
  border-color: #c8a96e;
  color: #ebebeb;
}

.pro-cta--lg {
  padding: 0.9rem 1.8rem;
  font-size: 0.92rem;
}

/* ── Section intros ───────────────────────────────────────────────────────── */

.pro-features-intro,
.pro-roadmap-intro,
.pro-pricing-cta {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.pro-features-intro .capabilities-label,
.pro-roadmap-intro .capabilities-label {
  color: #c8a96e;
}

.pro-section-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ebebeb;
  margin: 0;
}

.pro-section-sub {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #8a8a8a;
  max-width: 540px;
  margin: 0;
}

/* ── Feature rows (alternating) ───────────────────────────────────────────── */

.pro-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0;
  border-top: 1px solid #1d1d1d;
}

.pro-feature:first-of-type {
  border-top: none;
}

.pro-feature--reverse .pro-feature-copy {
  order: 2;
}
.pro-feature--reverse .pro-feature-visual {
  order: 1;
}

/* Indicators feature: copy beside the demo, but the visual side gets extra width
   so the builder + arrow + pill can sit horizontally rather than stacked. */
.pro-feature--indicators {
  grid-template-columns: 0.8fr 1.2fr;
}

/* Stacked variant: copy on top (centered, constrained width), visual full-row below.
   Used on the headliner feature to give the demo more breathing room. */
.pro-feature--stacked {
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.pro-feature--stacked .pro-feature-copy {
  max-width: 760px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

.pro-feature--stacked .pro-feature-eyebrow {
  justify-content: center;
}

.pro-feature--stacked .pro-feature-points {
  max-width: 640px;
  text-align: left;
  align-self: center;
}

.pro-feature--stacked .pro-feature-footnote {
  max-width: 640px;
}

.pro-feature--stacked .pro-feature-visual {
  width: 100%;
  min-width: 0;
}

.pro-feature--stacked .pro-demo--compare {
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
}

/* Builder → arrow → pill side by side, filling the feature's (wider) visual
   column. The builder shrinks to fit the column; the pill stays content-sized.
   Stacks vertically on mobile. */
.pro-demo-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}
.pro-demo-grid > .pro-demo--builder {
  flex: 0 1 22rem;
}
.pro-demo-grid > .pro-demo--indicators {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.pro-demo-grid-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.pro-demo-grid-connector-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background:
    linear-gradient(180deg, rgba(210, 90, 195, 0.10) 0%, rgba(210, 90, 195, 0.04) 100%),
    #1a1014;
  border: 1px solid rgba(210, 90, 195, 0.35);
  border-radius: 50%;
  color: #d4a8c4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

.pro-demo-grid-connector-icon {
  display: block;
  color: rgba(217, 156, 192, 0.9);
  flex-shrink: 0;
}

/* Builder + pill stack vertically on mobile, arrow rotates to point down. */
@media (max-width: 720px) {
  .pro-demo-grid {
    flex-direction: column;
    gap: 0.9rem;
  }
  .pro-demo-grid > .pro-demo--builder {
    flex: 0 0 auto;
    width: 100%;
    max-width: 30rem;
  }
  .pro-demo-grid-connector-icon {
    transform: rotate(90deg);
  }
}

.pro-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pro-feature-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pro-feature-num {
  color: #c8a96e;
  font-variant-numeric: tabular-nums;
}

.pro-feature-tag {
  color: #6a6a6a;
  padding: 0.15rem 0.55rem;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.pro-feature-new-badge {
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(210, 90, 195, 0.5);
  border-radius: 999px;
  background: rgba(210, 90, 195, 0.12);
  color: #f2cae8;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(210, 90, 195, 0.35);
}

.pro-feature-title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ebebeb;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.pro-feature-lead {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #b4b4b4;
  margin: 0;
}

.pro-feature-lead em {
  color: #c8a96e;
  font-style: normal;
  font-weight: 600;
}

.pro-feature-points {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pro-feature-points li {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-left: 1rem;
  position: relative;
}

.pro-feature-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  background: #c8a96e;
  border-radius: 50%;
}

.pro-feature-point-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #e0e0e0;
}

.pro-feature-point-sub {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #888;
}

.pro-feature-footnote {
  font-size: 0.78rem;
  color: #6a6a6a;
  margin: 0.4rem 0 0;
  letter-spacing: 0.01em;
}

/* ── Mini-demo (Dynamic sort) ─────────────────────────────────────────────── */

.pro-feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pro-demo {
  width: 100%;
  max-width: 480px;
  position: relative;
}

/* When the shared .psup-preview is used inside the pro page demo wrapper, let it
   fill the wider container instead of its default 22rem cap (used in modals). */
.pro-demo .psup-preview {
  max-width: 100%;
}

/* ── Animated dynamic-sort demo (pro page only) ───────────────────────────
   The .psup-preview component is shared with the live sort-upgrade modal, so
   every rule here is scoped to .psup-preview--anim, which only this instance
   carries. One 12s loop cycles three sort keys — Soft attack → Piercing →
   Punch / IC (a custom indicator) — each with a different ranking. Bubble
   values/colours cross-fade and the rows re-order to match. Rows are
   fixed-height (translate maths stay exact) with a solid background so the
   sliding rows occlude cleanly. Ranks per state (0=top):
     Soft attack  Marines 0  Infantry 1  Anti-Tank 2
     Piercing     Anti-Tank 0  Infantry 1  Marines 2
     Punch / IC   Infantry 0  Marines 1  Anti-Tank 2   */
.psup-preview--anim .psup-row {
  height: 46px;
  box-sizing: border-box;
  position: relative;
  background: #191917;
  will-change: transform, opacity;
}
/* Infantry is painted on top so the other rows slide cleanly behind it. */
.psup-preview--anim .psup-row--infantry { z-index: 2; animation: psupRowInfantry 12s ease-in-out infinite; }
.psup-preview--anim .psup-row--marines { animation: psupRowMarines 12s ease-in-out infinite; }
.psup-preview--anim .psup-row--at { animation: psupRowAt 12s ease-in-out infinite; }

/* Three states stacked in one cell, cross-fading (sort label + each bubble) */
.psup-preview--anim .psup-sort-stack,
.psup-preview--anim .psup-bubble-stack {
  display: inline-grid;
  flex-shrink: 0;
}
.psup-preview--anim .psup-bubble-stack { justify-items: end; }
.psup-preview--anim .psup-swap { grid-area: 1 / 1; white-space: nowrap; }
.psup-preview--anim .psup-swap--a { animation: psupSwapA 12s ease-in-out infinite; }
.psup-preview--anim .psup-swap--b { animation: psupSwapB 12s ease-in-out infinite; }
.psup-preview--anim .psup-swap--c { animation: psupSwapC 12s ease-in-out infinite; }
/* Tint the custom-indicator sort key magenta to tie it to the indicators feature */
.psup-preview--anim .psup-sort-stack .psup-swap--c { color: #e0a8d8; }

/* Hold windows: A 0-28%, B 34-61%, C 67-94%; 6% crossfades between */
@keyframes psupSwapA { 0%, 28% { opacity: 1; } 34%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes psupSwapB { 0%, 28% { opacity: 0; } 34%, 61% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes psupSwapC { 0%, 61% { opacity: 0; } 67%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* Marines: pos 0 → 2 → 1. Dimmed only while bottom (Piercing). */
@keyframes psupRowMarines {
  0%, 28% { transform: translateY(0); opacity: 1; }
  34%, 61% { transform: translateY(200%); opacity: 0.5; }
  67%, 94% { transform: translateY(100%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
/* Infantry: pos 1 → 1 → 0. Never bottom, always full. */
@keyframes psupRowInfantry {
  0%, 61% { transform: translateY(0); }
  67%, 94% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}
/* Anti-Tank: pos 2 → 0 → 2. Dimmed while bottom (Soft attack & Punch / IC). */
@keyframes psupRowAt {
  0%, 28% { transform: translateY(0); opacity: 0.5; }
  34%, 61% { transform: translateY(-200%); opacity: 1; }
  67%, 94% { transform: translateY(0); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .psup-preview--anim .psup-row--marines,
  .psup-preview--anim .psup-row--infantry,
  .psup-preview--anim .psup-row--at,
  .psup-preview--anim .psup-swap--a,
  .psup-preview--anim .psup-swap--b,
  .psup-preview--anim .psup-swap--c { animation: none; transform: none; }
  .psup-preview--anim .psup-row--at { opacity: 0.5; }
  .psup-preview--anim .psup-swap--a { opacity: 1; }
  .psup-preview--anim .psup-swap--b,
  .psup-preview--anim .psup-swap--c { opacity: 0; }
}

.pro-demo::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.08) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.pro-demo-frame {
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.pro-demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid #232323;
  background: #181818;
}

.pro-demo-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #cfcfcf;
  letter-spacing: 0.01em;
}

.pro-demo-close {
  color: #555;
  font-size: 1rem;
  line-height: 1;
}

.pro-demo-toolbar {
  padding: 0.7rem 0.95rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid #1f1f1f;
}

.pro-demo-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(200, 169, 110, 0.35);
  background: rgba(200, 169, 110, 0.08);
  border-radius: 6px;
  color: #d6c8b0;
  font-size: 0.74rem;
}

.pro-demo-sort-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #fff2cb;
  background: linear-gradient(145deg, #3a2812 0%, #7a5a1f 100%);
  border: 1px solid rgba(225, 185, 70, 0.5);
  text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
  padding: 0.18rem 0.35rem;
  border-radius: 3px;
}

.pro-demo-sort-glyph {
  color: #888;
}

.pro-demo-sort-label {
  font-weight: 600;
  color: #f2cae8;
}

.pro-demo-sort-dir {
  color: #e6b3cf;
  font-size: 0.85rem;
  margin-left: 0.15rem;
}

.pro-demo-context {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: #888;
}

.pro-demo-context-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5a8a5a;
  box-shadow: 0 0 6px rgba(90, 138, 90, 0.5);
}

.pro-demo-context-text {
  letter-spacing: 0.01em;
}

.pro-demo-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  background: #1c1c1c;
  border: 1px solid #262626;
  border-radius: 6px;
  transition: border-color 200ms ease;
}

.pro-demo-card--top {
  border-color: rgba(200, 169, 110, 0.55);
  background: linear-gradient(180deg, #1f1c16 0%, #1a1814 100%);
}

.pro-demo-card--dim {
  opacity: 0.7;
}

.pro-demo-card--locked {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.pro-demo-card-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #2a2a26;
  border: 1px solid #2e2e2a;
}

.pro-demo-card--locked .pro-demo-card-icon {
  background: #1f1f1d;
  border-color: #262624;
}

.pro-demo-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.pro-demo-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e2e2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-demo-card-sub {
  font-size: 0.68rem;
  color: #777;
  letter-spacing: 0.01em;
}

.pro-demo-card-bubble {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 3px;
  color: #f2cae8;
  background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
  border: 1px solid rgba(210, 90, 195, 0.55);
  text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pro-demo-card-bubble--negative {
  background: linear-gradient(145deg, #2a1119 0%, #3d1726 100%);
  border-color: rgba(180, 90, 120, 0.4);
  color: #c89aaa;
}

.pro-demo-card-bubble--low,
.pro-demo-card-bubble--missing {
  background: rgba(210, 90, 195, 0.1);
  border-color: rgba(210, 90, 195, 0.28);
  color: #d8a8cc;
  text-shadow: none;
  box-shadow: none;
}

/* ── Library demo (feature 05) ───────────────────────────────────────────── */

.pro-demo--library::after {
  background: radial-gradient(ellipse at center, rgba(210, 90, 195, 0.10) 0%, transparent 60%);
}

.pro-demo-lib-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.85rem;
}

.pro-demo-lib-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.pro-demo-lib-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 0.65rem 0.7rem;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  text-align: center;
}

.pro-demo-lib-tier--free {
  border-color: rgba(212, 144, 10, 0.28);
  background: linear-gradient(180deg, rgba(40, 32, 20, 0.55) 0%, #161616 100%);
}

.pro-demo-lib-tier--pro {
  border-color: rgba(210, 90, 195, 0.38);
  background: linear-gradient(180deg, rgba(72, 16, 74, 0.55) 0%, #161616 100%);
  box-shadow: inset 0 0 0 1px rgba(210, 90, 195, 0.06);
}

.pro-demo-lib-tier-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.pro-demo-lib-tier--pro .pro-demo-lib-tier-label {
  color: #d8a8cc;
}

.pro-demo-lib-cap {
  display: flex;
  align-items: baseline;
  gap: 0.12rem;
  line-height: 1;
}

.pro-demo-lib-cap-val {
  font-size: 1.55rem;
  font-weight: 700;
  color: #f3c97a;
  font-variant-numeric: tabular-nums;
}

.pro-demo-lib-cap-sep,
.pro-demo-lib-cap-max {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(243, 201, 122, 0.55);
  font-variant-numeric: tabular-nums;
}

.pro-demo-lib-cap--unlimited {
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.pro-demo-lib-cap-infinity {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #f2cae8;
  font-variant-numeric: tabular-nums;
}

.pro-demo-lib-cap-unlimited {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(216, 168, 204, 0.75);
}

.pro-demo-lib-meter {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 144, 10, 0.22);
  overflow: hidden;
}

.pro-demo-lib-meter-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(212, 144, 10, 0.55) 0%, #d4900a 100%);
}

.pro-demo-lib-tier-note {
  font-size: 0.64rem;
  color: #7a7a7a;
  line-height: 1.25;
}

.pro-demo-lib-tier-note--warn {
  color: #d4a04a;
}

.pro-demo-lib-types {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem;
  border-radius: 6px;
  border: 1px solid #232323;
  background: #141414;
}

.pro-demo-lib-types-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f6f6f;
}

.pro-demo-lib-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pro-demo-lib-type-chip {
  font-size: 0.68rem;
  color: #a8a8a8;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
}

.pro-demo-lib-type-chip strong {
  font-weight: 700;
  color: #d8d8d8;
  font-variant-numeric: tabular-nums;
}

/* The Pro cap counts upward (driven by JS) and pops to ∞ on each resolve. */
@keyframes proLibInfinityPop {
  0%   { transform: scale(0.55); opacity: 0.15; text-shadow: 0 0 0 rgba(210, 90, 195, 0); }
  55%  { transform: scale(1.18); opacity: 1;    text-shadow: 0 0 20px rgba(210, 90, 195, 0.6); }
  100% { transform: scale(1);    opacity: 1;    text-shadow: 0 0 10px rgba(210, 90, 195, 0.32); }
}

.pro-demo-lib-cap-infinity--pop {
  animation: proLibInfinityPop 0.6s ease-out;
}

/* Free cap slams into its limit at 20: a short shake as it locks. */
@keyframes proLibBlockShake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-2px); }
  44% { transform: translateX(2px); }
  66% { transform: translateX(-1.5px); }
  88% { transform: translateX(1.5px); }
}
.pro-demo-lib-cap--blocked {
  animation: proLibBlockShake 0.42s ease;
}

/* "Limit reached" fades in on block; the split crossfades on each loop reset. */
.pro-demo--library--anim .pro-demo-lib-tier-note--warn {
  transition: opacity 0.25s ease;
}
.pro-demo--library--anim .pro-demo-lib-split {
  transition: opacity 0.24s ease;
}
.pro-demo--library--anim .pro-demo-lib-split.is-resetting {
  opacity: 0;
}

/* ── Efficiency View demo (feature 03) ───────────────────────────────────── */

/* Subtle gold glow to match the in-app Efficiency View bar. */
.pro-demo--efficiency::after {
  background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.08) 0%, transparent 60%);
}

/* Adjusted-stats bar — mirrors the real .stats-adjusted-bar at the top of the
   stats card. Gold gradient background, flush-left text tabs, gold underline +
   inline "· per X" hint on the active tab only. */
.pro-demo-sab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin-top: 0.5rem;
  background:
    linear-gradient(180deg, rgba(80, 66, 42, 0.22) 0%, rgba(80, 66, 42, 0.10) 100%),
    #1a1a1a;
  border-top: 1px solid rgba(139, 122, 90, 0.45);
  border-bottom: 1px solid rgba(200, 169, 110, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(200, 169, 110, 0.08),
    inset 0 -1px 0 rgba(200, 169, 110, 0.10);
  flex-wrap: wrap;
}

.pro-demo-sab-tabs {
  display: flex;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
}

.pro-demo-sab-tab {
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #888;
  padding: 2px 2px;
  transition: color 120ms ease;
}

.pro-demo-sab-tab:hover {
  color: #e0d3b8;
}

.pro-demo-sab-tab:focus-visible {
  outline: 1px solid rgba(200, 169, 110, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

.pro-demo-sab-tab-label {
  line-height: 1.1;
}

.pro-demo-sab-tab-hint {
  display: none;
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #6f6f6f;
  line-height: 1;
}

.pro-demo-sab-tab-hint::before {
  content: '·';
  margin-right: 5px;
  color: rgba(139, 122, 90, 0.55);
}

/* The active tab's hint shows full text on desktop, a shorter variant on mobile
   so the tab row stays a single line instead of wrapping. */
.sab-hint-short { display: none; }
@media (max-width: 560px) {
  .pro-demo-sab-tabs { gap: 8px; }
  .sab-hint-full { display: none; }
  .sab-hint-short { display: inline; }
}

.pro-demo-sab-tab--active {
  color: #c8a96e;
}

.pro-demo-sab-tab--active::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -3px;
  height: 2px;
  background: #c8a96e;
  box-shadow: 0 0 6px rgba(200, 169, 110, 0.5);
  border-radius: 1px;
}

.pro-demo-sab-tab--active .pro-demo-sab-tab-hint {
  display: inline;
}

/* Stat list — extensive rows show /IC; intensive rows dim. Mirrors the
   real stats panel's stat-row--adjusted / --unadjusted treatment. */
.pro-demo-stat-list {
  list-style: none;
  padding: 0.45rem 0.85rem 0.85rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pro-demo-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.32rem 0.5rem;
  border-radius: 3px;
  font-size: 0.78rem;
}

.pro-demo-stat-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015);
}

.pro-demo-stat-label {
  color: #c8c8c8;
}

.pro-demo-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: #ebebeb;
  font-size: 0.76rem;
}

.pro-demo-stat-unit {
  margin-left: 2px;
  color: #8b6f3f;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.pro-demo-stat-row--unadjusted {
  opacity: 0.45;
}

.pro-demo-stat-row--unadjusted .pro-demo-stat-value {
  color: #888;
}

/* Auto-play efficiency demo — tabs use the same --active styling as click;
   pointer-events off so the loop drives apply() instead of user input. */
.pro-demo-sab--anim .pro-demo-sab-tab {
  cursor: default;
  pointer-events: none;
  transition: color 0.4s ease;
}

/* Underline + hint fade instead of popping when --active toggles */
.pro-demo-sab--anim .pro-demo-sab-tab::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -3px;
  height: 2px;
  background: #c8a96e;
  box-shadow: 0 0 6px rgba(200, 169, 110, 0.5);
  border-radius: 1px;
  opacity: 0;
  transform: scaleX(0.65);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pro-demo-sab--anim .pro-demo-sab-tab--active::after {
  opacity: 1;
  transform: scaleX(1);
}

.pro-demo-sab--anim .pro-demo-sab-tab-hint {
  display: inline;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
  transition: opacity 0.4s ease, max-width 0.45s ease;
}

.pro-demo-sab--anim .pro-demo-sab-tab--active .pro-demo-sab-tab-hint {
  opacity: 1;
  max-width: 11rem;
}

.pro-demo-sab--anim .pro-demo-stat-row {
  transition: opacity 0.4s ease;
}

.pro-demo-sab--anim .pro-demo-stat-value {
  display: inline-block;
  transition: opacity 0.32s ease, transform 0.32s ease, color 0.32s ease;
}

[data-sab-demo].pro-demo-sab--transitioning .pro-demo-stat-value {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .pro-demo-sab--anim .pro-demo-sab-tab,
  .pro-demo-sab--anim .pro-demo-sab-tab::after,
  .pro-demo-sab--anim .pro-demo-sab-tab-hint,
  .pro-demo-sab--anim .pro-demo-stat-row,
  .pro-demo-sab--anim .pro-demo-stat-value {
    transition: none;
  }
}

/* ── Indicators demo (feature 04) ─────────────────────────────────────────── */

/* Magenta wash behind the floating pill, picking up its Pro accent. */
.pro-demo--indicators::after {
  background: radial-gradient(ellipse at center, rgba(210, 90, 195, 0.12) 0%, transparent 62%);
}

/* ── Indicator pill demo (Demo B) ────────────────────────────────────────
   No card chrome - the custom-metric pill floats on the section background so
   the builder's "Pinned" arrow lands straight on it. Value cross-fades old →
   new and a delta caret rises in on a 6s loop. Reduced-motion honoured below. */

/* Hero: the custom metric pill, the whole story of this panel */
.pro-demo-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem;
}

.pro-demo-hero-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.4rem;
  height: 3.4rem;
  padding: 0 1.3rem;
  border-radius: 999px;
  background: linear-gradient(165deg, rgba(40, 28, 38, 0.98) 0%, rgba(20, 15, 19, 0.99) 100%);
  border: 1px solid rgba(210, 90, 195, 0.55);
  animation: proHeroPulse 9s ease-in-out infinite;
}

.pro-demo-hero-stack {
  display: inline-grid;
  justify-items: center;
}
.pro-demo-hero-val {
  grid-area: 1 / 1;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fbeff8;
  font-variant-numeric: tabular-nums;
}
.pro-demo-hero-val--1 { animation: proVal1 9s ease-in-out infinite; }
.pro-demo-hero-val--2 { animation: proVal2 9s ease-in-out infinite; }
.pro-demo-hero-val--3 { animation: proVal3 9s ease-in-out infinite; }

/* Small "In Focus" home for the floating pill, matching the stat panel section */
.pro-demo-hero-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a8a8a;
}
.pro-demo-hero-strip-pin {
  color: #d98fce;
}
.pro-demo-hero-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d98fce;
}
/* Up and down deltas share one cell so the layout never shifts between beats */
.pro-demo-hero-delta-stack {
  display: inline-grid;
  justify-items: center;
}
.pro-demo-hero-delta {
  grid-area: 1 / 1;
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
.pro-demo-hero-delta--1 {
  color: #5cb87a;
  animation: proDelta1 9s ease-in-out infinite;
}
.pro-demo-hero-delta--2 {
  color: #d96b6b;
  animation: proDelta2 9s ease-in-out infinite;
}
.pro-demo-hero-delta--3 {
  color: #5cb87a;
  animation: proDelta3 9s ease-in-out infinite;
}
.pro-demo-hero-note {
  font-size: 0.6rem;
  font-weight: 600;
  color: #8a8a8a;
  letter-spacing: 0.01em;
}

/* Three-beat loop, like an ongoing build session: 0.088 →(+0.009)→ 0.097
   →(−0.014)→ 0.083 →(+0.005)→ back to 0.088. Each beat holds, then the next
   edit lands. Values, the three carets and the ring all share the 9s timeline
   so the caret on screen always matches the number. */

/* V1 0.088: holds across the loop seam (70%→100%→0%→8%), hidden mid-cycle */
@keyframes proVal1 {
  0%, 8% { opacity: 1; }
  14%, 64% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
/* V2 0.097: the first (up) edit */
@keyframes proVal2 {
  0%, 8% { opacity: 0; }
  14%, 36% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
/* V3 0.083: the second (down) edit */
@keyframes proVal3 {
  0%, 36% { opacity: 0; }
  42%, 64% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
/* Caret 1 ▲ +0.009: tracks V2 exactly (rises 8-14% with the crossfade, holds
   while 0.097 shows, hands off to caret 2 at 36-42% as the value changes again) */
@keyframes proDelta1 {
  0%, 8% { opacity: 0; transform: translateY(3px); }
  14%, 36% { opacity: 1; transform: translateY(0); }
  42%, 100% { opacity: 0; transform: translateY(3px); }
}
/* Caret 2 ▼ −0.014: tracks V3 exactly */
@keyframes proDelta2 {
  0%, 36% { opacity: 0; transform: translateY(-3px); }
  42%, 64% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; transform: translateY(-3px); }
}
/* Caret 3 ▲ +0.005: rises with the return to V1, then clears so the baseline
   rests caret-free before the loop restarts */
@keyframes proDelta3 {
  0%, 64% { opacity: 0; transform: translateY(3px); }
  70%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(3px); }
}
/* Ring takes the edit's colour as the value crossfades, then HOLDS it through
   most of that value's display before easing back to magenta ahead of the next
   edit. Green holds 11-28% and 67-84%, red 39-56%; magenta is the rest state. */
@keyframes proHeroPulse {
  0%, 8%, 34%, 36%, 62%, 64%, 90%, 100% {
    border-color: rgba(210, 90, 195, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 3px 10px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(210, 90, 195, 0.14);
  }
  11%, 28%, 67%, 84% {
    border-color: rgba(92, 184, 122, 0.95);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 3px 10px rgba(0, 0, 0, 0.35),
      0 0 0 2px rgba(92, 184, 122, 0.3),
      0 0 16px rgba(92, 184, 122, 0.4);
  }
  39%, 56% {
    border-color: rgba(217, 107, 107, 0.95);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 3px 10px rgba(0, 0, 0, 0.35),
      0 0 0 2px rgba(217, 107, 107, 0.3),
      0 0 16px rgba(217, 107, 107, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pro-demo-hero-delta--1 { opacity: 1; animation: none; }
  .pro-demo-hero-delta--2,
  .pro-demo-hero-delta--3 { opacity: 0; animation: none; }
  .pro-demo-hero-circle { animation: none; }
  .pro-demo-hero-val--1,
  .pro-demo-hero-val--3 { opacity: 0; animation: none; }
  .pro-demo-hero-val--2 { opacity: 1; animation: none; }
}

/* ── Indicator builder demo — mirrors the live .ind-builder modal ─────────
   Dark surface + magenta accent (Pro brand). Distinct from the parchment
   stats panel demo it sits next to, because the real builder is a floating
   modal, not part of the stats card. */

.pro-demo--builder::after {
  background: radial-gradient(ellipse at center, rgba(210, 90, 195, 0.10) 0%, transparent 60%);
}

.pro-demo-builder-frame {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  color: #d8d8d8;
}

.pro-demo-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #262626;
  background: linear-gradient(180deg, rgba(210, 90, 195, 0.08) 0%, transparent 100%);
}

.pro-demo-builder-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ebebeb;
}

.pro-demo-builder-close {
  color: #888;
  font-size: 1.15rem;
  line-height: 1;
}

.pro-demo-builder-body {
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pro-demo-builder-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pro-demo-builder-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.pro-demo-builder-input {
  padding: 0.45rem 0.55rem;
  background: #131313;
  border: 1px solid #2e2e2e;
  border-radius: 5px;
  color: #ebebeb;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-demo-builder-input--mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: -0.005em;
  border-color: rgba(210, 90, 195, 0.45);
  box-shadow: 0 0 0 2px rgba(210, 90, 195, 0.08);
}

.pro-demo-builder-preview {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  background: #131313;
  border: 1px solid #242424;
  border-radius: 5px;
}

.pro-demo-builder-preview-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
}

.pro-demo-builder-preview-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e6b3cf;
  margin-left: auto;
}

.pro-demo-builder-ops {
  display: flex;
  gap: 0.32rem;
}

.pro-demo-builder-op {
  flex: 1;
  text-align: center;
  background: #1d1d1d;
  border: 1px solid #2e2e2e;
  border-radius: 5px;
  color: #d0d0d0;
  font-size: 0.85rem;
  padding: 0.32rem 0;
}

.pro-demo-builder-stats {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pro-demo-builder-stats-group {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c8a96e;
  margin-top: 0.15rem;
}

.pro-demo-builder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.pro-demo-builder-chip {
  background: #1d1d1d;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  color: #c0c0c0;
  font-size: 0.65rem;
  padding: 0.18rem 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
}

.pro-demo-builder-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid #262626;
}

.pro-demo-builder-cancel,
.pro-demo-builder-save {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.pro-demo-builder-cancel {
  background: transparent;
  border-color: #2e2e2e;
  color: #c0c0c0;
}

.pro-demo-builder-save {
  background: #62205a;
  color: #fff;
}

/* ── Roadmap ──────────────────────────────────────────────────────────────── */

.pro-roadmap {
  margin: 4rem auto 0;
  max-width: 880px;
}

.pro-roadmap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.pro-roadmap-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  background: #181818;
  border: 1px solid #232323;
  border-radius: 8px;
  border-left: 2px solid rgba(200, 169, 110, 0.35);
}

.pro-roadmap-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #e2e2e2;
}

.pro-roadmap-item-sub {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #888;
}

.pro-roadmap-note {
  margin: 1.6rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #b4b4b4;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(180deg, rgba(200, 169, 110, 0.05) 0%, transparent 100%);
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: 10px;
}

/* ── Pricing CTA ──────────────────────────────────────────────────────────── */

.pro-pricing-cta {
  margin-top: 5rem;
  padding: 3rem 1.5rem;
  border-top: 1px solid #1d1d1d;
}

.pro-pricing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.pro-pricing-inner .pro-cta {
  margin-top: 0.6rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .pro-feature {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 0;
  }
  .pro-feature--reverse .pro-feature-copy,
  .pro-feature--reverse .pro-feature-visual {
    order: initial;
  }
  .pro-roadmap-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile: lead with the animated preview. Show it right after the title + lead
   so users meet the visual before the granular bullet points, which move below.
   Flatten .pro-feature-copy (display: contents) so the visual can sit between
   the lead and the points, then interleave with order. The stacked headliner
   already leads with its visual and has no bullets, so it's left untouched. */
@media (max-width: 820px) {
  .pro-feature:not(.pro-feature--stacked) .pro-feature-copy {
    display: contents;
  }
  .pro-feature:not(.pro-feature--stacked) {
    row-gap: 1rem;
  }
  .pro-feature:not(.pro-feature--stacked) .pro-feature-eyebrow  { order: 1; }
  .pro-feature:not(.pro-feature--stacked) .pro-feature-title    { order: 2; }
  .pro-feature:not(.pro-feature--stacked) .pro-feature-lead     { order: 3; }
  .pro-feature:not(.pro-feature--stacked) .pro-feature-visual   { order: 4; margin: 1rem 0; }
  .pro-feature:not(.pro-feature--stacked) .pro-feature-points   { order: 5; }
  .pro-feature:not(.pro-feature--stacked) .pro-feature-footnote { order: 6; }
}

@media (max-width: 640px) {
  .pro-built-for-list {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}

@media (max-width: 520px) {
  .pro-main {
    padding: 2.5rem 1rem 4rem;
  }
  .pro-demo-card-bubble {
    top: -6px;
    right: -6px;
    font-size: 0.66rem;
  }
  .pro-demo-lib-split {
    grid-template-columns: 1fr;
  }
}

/* Compare grid mockup - three build cards for the same template, each
   showing a different (doctrine x research x tank) combination. The chip
   that varies vs the baseline is gold; the winning combo gets a gold-glow
   border and a "Best combo" tag. Up/down deltas use teal/brick.

   Frame gets a soft gold-tinted halo (matches .pro-demo::after but warmer
   and stronger) so the headliner feature reads with more presence on the
   page. Card heads carry the variant identity (tag + dot); the dim chips
   carry the "which dimension changed" story; the winner card gets a true
   gold ring + the floating "Best combo" flag. One story per role. */
/* Stack-aware glow scoped to the headliner. The base .pro-demo::after wash
   is too subtle once this demo lives in the wider stacked feature; this
   scoped overlay brings a focused gold halo that anchors the card row. */
.pro-demo--compare::after {
  inset: -30px;
  background:
    radial-gradient(ellipse at center, rgba(200, 169, 110, 0.16) 0%, rgba(200, 169, 110, 0.04) 35%, transparent 65%);
  filter: blur(2px);
}

.pro-demo--compare .pro-demo-frame {
  padding-bottom: 0.5rem;
  box-shadow:
    0 26px 60px -18px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(200, 169, 110, 0.06),
    0 0 60px -10px rgba(200, 169, 110, 0.12);
}

/* Header: traffic-light dots on the left, grid icon + title in the middle,
   meta line on the right. Gold-tinted icon and active dot tie to the gold
   dimension swap chips on the cards below. */
.pro-demo-header--compare {
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #1c1c1a 0%, #181816 100%);
  border-bottom-color: #262624;
  gap: 0.85rem;
  justify-content: flex-start;
}

.pro-demo-header-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-right: auto;
}

.pro-demo-header-icon {
  flex-shrink: 0;
  display: block;
  color: #c8a96e;
  filter: drop-shadow(0 0 4px rgba(200, 169, 110, 0.25));
}

.pro-demo-header--compare .pro-demo-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e6dcc8;
  letter-spacing: -0.005em;
}

.pro-demo-cmp-cards {
  padding: 0.7rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 160px;
  /* Shared row tracks: card head · dim strip · six stat rows aligned across builds */
  grid-template-rows: auto auto repeat(6, 1.75rem);
  column-gap: 0.7rem;
  row-gap: 0.55rem;
  align-items: stretch;
}

.pro-demo-cmp-card {
  position: relative;
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  border: 1px solid #2a2a2a;
  border-radius: 7px;
  padding: 0.7rem 0.65rem 0.55rem;
  min-width: 0;
  overflow: visible;
}

/* Build columns share the parent row tracks so Soft Attack / Hard Attack / …
   line up horizontally across Baseline · Doctrine swap · Winner. */
.pro-demo-cmp-card:not(.pro-demo-cmp-card--add) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
  gap: 0;
}

.pro-demo-cmp-card-head {
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 5.35rem;
  padding-top: 0.1rem;
  box-sizing: border-box;
}

.pro-demo-cmp-dims {
  grid-row: 2;
  align-self: center;
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  min-height: 2.35rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #232323;
  box-sizing: border-box;
}
.pro-demo-cmp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #2c2c2c;
  z-index: 1;
  border-radius: 7px 7px 0 0;
}

/* Winner: gold-glow border, brighter gradient, floating "Best combo" flag.
   This is the headline takeaway of the comparison grid demo — the row in
   the wider feature visual where the eye should land. */
.pro-demo-cmp-unit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #2e2e2e;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}

.pro-demo-cmp-name {
  color: #e6dcc8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
}

/* Tag pill: status-led indicator at the top of every card head. Neutral
   for the baseline, gold-tinted for variants (same palette as
   .pro-demo-cmp-dim--swap below). The leading dot picks up the same
   accent so the pill reads as a real status chip, not a caption. */
.pro-demo-cmp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #2e2e2e;
  background: #141414;
  color: #9c9c9c;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-demo-cmp-tag-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5a5a5a;
}

/* Variant pill stays neutral — only the dot carries the gold accent. The
   dim swap chips below are where the gold story is told in full. */
.pro-demo-cmp-card--variant .pro-demo-cmp-tag-dot {
  background: #c8a96e;
  box-shadow: 0 0 4px rgba(200, 169, 110, 0.7);
}

.pro-demo-cmp-dim-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.pro-demo-cmp-dim-img--swap {
  background: rgba(200, 169, 110, 0.08);
  border-color: rgba(200, 169, 110, 0.55);
  box-shadow:
    0 0 0 1px rgba(200, 169, 110, 0.18),
    0 0 8px rgba(200, 169, 110, 0.25);
}

/* "Add build" placeholder column — communicates "Pro has no compare-grid cap".
   Dashed border + + glyph + the line that does the selling. Sits at the end
   of the row so the eye reads baseline → variants → "you can keep going". */
.pro-demo-cmp-card--add {
  grid-column: 4;
  grid-row: 1 / -1;
  background: #141414;
  border: 1px dashed #2f2f2f;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.55rem;
  cursor: default;
  padding: 1rem 0.65rem;
  display: flex;
  flex-direction: column;
}

.pro-demo-cmp-card--add::before {
  display: none;
}

.pro-demo-cmp-add-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px dashed #5e5e5e;
  border-radius: 999px;
  font-size: 1.3rem;
  line-height: 1;
  color: #a0a0a0;
  font-weight: 300;
}

.pro-demo-cmp-add-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.pro-demo-cmp-add-hint {
  font-size: 0.66rem;
  font-weight: 500;
  color: #5c5c5c;
  letter-spacing: 0.01em;
  max-width: 12ch;
  line-height: 1.4;
}

.pro-demo-cmp-stats {
  grid-row: 3 / span 6;
  display: grid;
  grid-template-rows: subgrid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pro-demo-cmp-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 3px;
  background: transparent;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.pro-demo-cmp-stat-label {
  color: #999;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex: 0 0 5.35rem;
  min-width: 0;
  line-height: 1.2;
}

.pro-demo-cmp-stat-val {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-weight: 700;
  color: #d7d7d7;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 1;
  min-width: 4.75rem;
  font-variant-numeric: tabular-nums;
}

/* Inline delta vs baseline — the "what changed" signal at a glance. Sits
   right of the absolute value so the eye reads number first, delta second. */
.pro-demo-cmp-stat-delta {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  color: #6a6a6a;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #262626;
  border-radius: 3px;
  padding: 0.05rem 0.32rem;
  line-height: 1.4;
}

.pro-demo-cmp-stat-delta--zero {
  color: #5c5c5c;
}

/* Row heatmap — same relative-to-row-average logic as the live comparison grid.
   JS applies heatmap-* classes per stat row across all build columns. */
.pro-demo-cmp-stat.heatmap-neutral {
  background: transparent;
  border-color: transparent;
}
.pro-demo-cmp-stat.heatmap-neutral .pro-demo-cmp-stat-label { color: #999; }
.pro-demo-cmp-stat.heatmap-neutral .pro-demo-cmp-stat-val { color: #d7d7d7; }

.pro-demo-cmp-stat.heatmap-good-light {
  background: rgba(84, 132, 117, 0.12);
  border-color: rgba(84, 132, 117, 0.22);
}
.pro-demo-cmp-stat.heatmap-good-light .pro-demo-cmp-stat-label { color: #a8c4b8; }
.pro-demo-cmp-stat.heatmap-good-light .pro-demo-cmp-stat-val { color: #b0cfc0; }

.pro-demo-cmp-stat.heatmap-good {
  background: rgba(84, 132, 117, 0.22);
  border-color: rgba(84, 132, 117, 0.35);
}
.pro-demo-cmp-stat.heatmap-good .pro-demo-cmp-stat-label { color: #b6cfc2; }
.pro-demo-cmp-stat.heatmap-good .pro-demo-cmp-stat-val { color: #bcd9cc; }
.pro-demo-cmp-stat.heatmap-good .pro-demo-cmp-stat-delta {
  color: #8fc7ad;
  background: rgba(84, 132, 117, 0.18);
  border-color: rgba(84, 132, 117, 0.4);
}

.pro-demo-cmp-stat.heatmap-excellent {
  background: rgba(84, 132, 117, 0.32);
  border-color: rgba(84, 132, 117, 0.45);
}
.pro-demo-cmp-stat.heatmap-excellent .pro-demo-cmp-stat-label { color: #c2ddd0; }
.pro-demo-cmp-stat.heatmap-excellent .pro-demo-cmp-stat-val { color: #d4ead9; font-weight: 700; }
.pro-demo-cmp-stat.heatmap-excellent .pro-demo-cmp-stat-delta {
  color: #9fd4b8;
  background: rgba(84, 132, 117, 0.22);
  border-color: rgba(84, 132, 117, 0.45);
}

.pro-demo-cmp-stat.heatmap-poor {
  background: rgba(180, 78, 95, 0.12);
  border-color: rgba(180, 78, 95, 0.22);
}
.pro-demo-cmp-stat.heatmap-poor .pro-demo-cmp-stat-label { color: #c4a8a8; }
.pro-demo-cmp-stat.heatmap-poor .pro-demo-cmp-stat-val { color: #d4b0b0; }

.pro-demo-cmp-stat.heatmap-bad {
  background: rgba(180, 78, 95, 0.22);
  border-color: rgba(180, 78, 95, 0.32);
}
.pro-demo-cmp-stat.heatmap-bad .pro-demo-cmp-stat-label { color: #d2b3b3; }
.pro-demo-cmp-stat.heatmap-bad .pro-demo-cmp-stat-val { color: #dca8a8; }
.pro-demo-cmp-stat.heatmap-bad .pro-demo-cmp-stat-delta {
  color: #d99a96;
  background: rgba(180, 78, 95, 0.18);
  border-color: rgba(180, 78, 95, 0.38);
}

.pro-demo-cmp-stat.heatmap-bad-dark {
  background: rgba(180, 78, 95, 0.32);
  border-color: rgba(180, 78, 95, 0.42);
}
.pro-demo-cmp-stat.heatmap-bad-dark .pro-demo-cmp-stat-label { color: #ddb8b8; }
.pro-demo-cmp-stat.heatmap-bad-dark .pro-demo-cmp-stat-val { color: #ecb4b2; font-weight: 700; }
.pro-demo-cmp-stat.heatmap-bad-dark .pro-demo-cmp-stat-delta {
  color: #e08a86;
  background: rgba(180, 78, 95, 0.22);
  border-color: rgba(180, 78, 95, 0.42);
}

/* Winner card: soften strong greens so the gold ring stays the visual anchor */
.pro-demo-cmp-card--winner .pro-demo-cmp-stat.heatmap-good,
.pro-demo-cmp-card--winner .pro-demo-cmp-stat.heatmap-good-light {
  background: rgba(84, 132, 117, 0.12);
  border-color: rgba(84, 132, 117, 0.22);
}
.pro-demo-cmp-card--winner .pro-demo-cmp-stat.heatmap-excellent {
  background: rgba(84, 132, 117, 0.18);
  border-color: rgba(84, 132, 117, 0.28);
}

/* Legacy aliases — kept if referenced elsewhere */
.pro-demo-cmp-stat--good {
  background: rgba(84, 132, 117, 0.22);
  border-color: rgba(84, 132, 117, 0.35);
}

.pro-demo-cmp-stat--good .pro-demo-cmp-stat-label {
  color: #b6cfc2;
}

.pro-demo-cmp-stat--good .pro-demo-cmp-stat-val {
  color: #bcd9cc;
}

.pro-demo-cmp-stat--good .pro-demo-cmp-stat-delta {
  color: #8fc7ad;
  background: rgba(84, 132, 117, 0.18);
  border-color: rgba(84, 132, 117, 0.4);
}

.pro-demo-cmp-stat--bad {
  background: rgba(180, 78, 95, 0.22);
  border-color: rgba(180, 78, 95, 0.32);
}

.pro-demo-cmp-stat--bad .pro-demo-cmp-stat-label {
  color: #d2b3b3;
}

.pro-demo-cmp-stat--bad .pro-demo-cmp-stat-val {
  color: #dca8a8;
}

.pro-demo-cmp-stat--bad .pro-demo-cmp-stat-delta {
  color: #d99a96;
  background: rgba(180, 78, 95, 0.18);
  border-color: rgba(180, 78, 95, 0.38);
}

/* ── Animated comparison-grid demo (pro page only) ───────────────────────────
   One 18s master loop — columns switch sequentially, not in parallel:
     1. Doctrine column cross-fades baseline → Mobile Warfare (col 2 alone)
     2. Winner column cross-fades Panther → Tiger (col 3, col 2 holds)
     3. Winner column cross-fades → Superior Firepower build (col 3, col 2 holds)
     4. Reset both columns for the next loop
   Dim icons and stat values stack in one grid cell and cross-fade. */
.pro-demo--compare--anim .pro-demo-cmp-dim-stack,
.pro-demo--compare--anim .pro-demo-cmp-stat-val {
  display: inline-grid;
  justify-items: end;
  align-items: baseline;
}
.pro-demo--compare--anim .pro-demo-cmp-dim-stack {
  justify-items: center;
  width: 26px;
  height: 26px;
}
.pro-demo--compare--anim .pro-demo-cmp-dim-stack .pro-demo-cmp-dim-img {
  grid-area: 1 / 1;
}
.pro-demo--compare--anim .cmp-swap,
.pro-demo--compare--anim .cmp-swap-2 {
  grid-area: 1 / 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

/* Shared 18s timeline — hold windows with ~4% crossfades between beats */
@keyframes cmpSeqCol2A {
  0%, 18% { opacity: 1; }
  22%, 83% { opacity: 0; }
  87%, 100% { opacity: 1; }
}
@keyframes cmpSeqCol2B {
  0%, 18% { opacity: 0; }
  22%, 83% { opacity: 1; }
  87%, 100% { opacity: 0; }
}
@keyframes cmpSeqCol3A {
  0%, 47% { opacity: 1; }
  51%, 87% { opacity: 0; }
  91%, 100% { opacity: 1; }
}
@keyframes cmpSeqCol3B {
  0%, 47% { opacity: 0; }
  51%, 67% { opacity: 1; }
  71%, 100% { opacity: 0; }
}
@keyframes cmpSeqCol3C {
  0%, 67% { opacity: 0; }
  71%, 83% { opacity: 1; }
  87%, 100% { opacity: 0; }
}

.pro-demo--compare--anim .cmp-swap-2--a { animation: cmpSeqCol2A 18s ease-in-out infinite; }
.pro-demo--compare--anim .cmp-swap-2--b { animation: cmpSeqCol2B 18s ease-in-out infinite; }
.pro-demo--compare--anim .cmp-swap--a { animation: cmpSeqCol3A 18s ease-in-out infinite; }
.pro-demo--compare--anim .cmp-swap--b { animation: cmpSeqCol3B 18s ease-in-out infinite; }
.pro-demo--compare--anim .cmp-swap--c { animation: cmpSeqCol3C 18s ease-in-out infinite; }

@keyframes cmpSeqDimPulse {
  0%, 18% {
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.18),
      0 0 8px rgba(200, 169, 110, 0.25);
  }
  22%, 83% {
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.45),
      0 0 14px rgba(200, 169, 110, 0.55);
  }
  87%, 100% {
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.18),
      0 0 8px rgba(200, 169, 110, 0.25);
  }
}
.pro-demo--compare--anim .pro-demo-cmp-card--doctrine-swap .cmp-swap-2--b.pro-demo-cmp-dim-img--swap {
  animation: cmpSeqCol2B 18s ease-in-out infinite, cmpSeqDimPulse 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pro-demo--compare--anim .cmp-swap--a,
  .pro-demo--compare--anim .cmp-swap--b,
  .pro-demo--compare--anim .cmp-swap--c,
  .pro-demo--compare--anim .cmp-swap-2--a,
  .pro-demo--compare--anim .cmp-swap-2--b,
  .pro-demo--compare--anim .pro-demo-cmp-card--doctrine-swap .cmp-swap-2--b.pro-demo-cmp-dim-img--swap {
    animation: none;
  }
  .pro-demo--compare--anim .cmp-swap--a,
  .pro-demo--compare--anim .cmp-swap-2--b { opacity: 1; }
  .pro-demo--compare--anim .cmp-swap--b,
  .pro-demo--compare--anim .cmp-swap--c,
  .pro-demo--compare--anim .cmp-swap-2--a { opacity: 0; }
}

@media (max-width: 720px) {
  /* Keep the multi-column layout on mobile; let the user swipe horizontally
     to see additional builds. Mirrors the live comparison grid's behavior.
     min-width: 0 keeps the grid's fixed-track min-content from forcing the
     ancestor chain wider than the viewport. */
  .pro-demo-cmp-cards {
    grid-template-columns: 240px 240px 240px 150px;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 169, 110, 0.35) transparent;
  }
  .pro-demo-cmp-cards::-webkit-scrollbar {
    height: 6px;
  }
  .pro-demo-cmp-cards::-webkit-scrollbar-track {
    background: rgba(200, 169, 110, 0.08);
    border-radius: 3px;
  }
  .pro-demo-cmp-cards::-webkit-scrollbar-thumb {
    background: rgba(200, 169, 110, 0.35);
    border-radius: 3px;
  }
  .pro-demo-cmp-name {
    font-size: 0.74rem;
  }
  .pro-demo-cmp-dim-img {
    width: 28px;
    height: 28px;
  }
}

/* ── Community badge demo ─────────────────────────────────────────────────── */

.pro-demo--badge::after {
  background: radial-gradient(ellipse at center, rgba(210, 90, 195, 0.08) 0%, transparent 60%);
}

.pro-demo-badge-body {
  display: flex;
  flex-direction: column;
  background: #131313;
}

.pro-demo-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.7rem 0.55rem;
}

.pro-demo-cat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  background: #1a1a1a;
  border: 1px solid #272727;
  border-radius: 6px;
}

.pro-demo-cat-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #333;
}

.pro-demo-cat-avatar--pro {
  border: 1px solid rgba(210, 90, 195, 0.55);
  background: linear-gradient(160deg, #310d30 0%, #1c0a1a 100%);
  box-shadow:
    0 0 0 1px rgba(40, 8, 22, 0.78) inset,
    0 0 18px rgba(205, 75, 185, 0.22),
    0 0 1px rgba(255, 180, 245, 0.35);
}

/* Subtle pulsing glow so the Pro avatar stands out among the plain ones. */
@keyframes proBadgeGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(40, 8, 22, 0.78) inset,
      0 0 14px rgba(205, 75, 185, 0.18),
      0 0 1px rgba(255, 180, 245, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(40, 8, 22, 0.78) inset,
      0 0 26px rgba(205, 75, 185, 0.42),
      0 0 2px rgba(255, 180, 245, 0.5);
  }
}
.pro-demo--badge--anim .pro-demo-cat-avatar--pro {
  animation: proBadgeGlowPulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pro-demo--badge--anim .pro-demo-cat-avatar--pro {
    animation: none;
  }
}

.pro-demo-cat-avatar--profile {
  width: 36px;
  height: 36px;
}

.pro-demo-cat-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  flex: 1;
  min-width: 0;
}

.pro-demo-cat-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pro-demo-cat-author {
  font-size: 0.7rem;
  font-weight: 600;
  color: #a0a0a0;
}

.pro-demo-profile-strip {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem 0.75rem;
  border-top: 1px solid #1e1e1e;
  background: linear-gradient(180deg, rgba(58, 10, 54, 0.12) 0%, #141414 100%);
}

.pro-demo-profile-strip-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f6f6f;
}

.pro-demo-profile-strip-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.pro-demo-profile-avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.pro-demo-profile-badge {
  position: relative;
  overflow: hidden;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f2cae8;
  background: linear-gradient(145deg, #3c1640 0%, #62205a 28%, #4a1746 55%, #310d30 100%);
  border: 1px solid rgba(210, 90, 195, 0.5);
  border-radius: 3px;
  padding: 0.07rem 0.3rem;
  text-shadow: 0 0 8px rgba(210, 90, 195, 0.45);
}

/* Periodic shine sweep across the PRO badge — mirrors .pro-hero-badge::before. */
@keyframes proProfileBadgeShine {
  0%, 32% { transform: translateX(-190%) skewX(-14deg); }
  72%, 100% { transform: translateX(320%) skewX(-14deg); }
}
.pro-demo--badge--anim .pro-demo-profile-badge::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
  transform: translateX(-190%) skewX(-14deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pro-demo--badge--anim .pro-demo-profile-badge::before {
    animation: proProfileBadgeShine 5s ease-in-out 1.2s infinite;
  }
}

.pro-demo-profile-username {
  font-size: 0.82rem;
  font-weight: 700;
  color: #d8d8d8;
}

.pro-demo-cat-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e2e2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-demo-cat-stats {
  display: flex;
  gap: 0.55rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 600;
  color: #888;
}

/* ── Saves note (compact, post-features) ─────────────────────────────────── */

.pro-saves-note {
  max-width: 880px;
  margin: 0 auto 4rem;
  padding: 0.85rem 1.4rem;
  background: linear-gradient(180deg, rgba(200, 169, 110, 0.05) 0%, rgba(200, 169, 110, 0.01) 100%);
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #b8b8b8;
  text-align: center;
}

.pro-saves-note-text strong {
  color: #ebebeb;
  font-weight: 600;
}

@media (max-width: 560px) {
  .pro-saves-note {
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
  }
}

/* ── Price anchor strip ───────────────────────────────────────────────────── */

.pro-anchor-strip {
  max-width: 880px;
  margin: -2.5rem auto 4rem;
  padding: 0.95rem 1.6rem;
  background: linear-gradient(180deg, rgba(200, 169, 110, 0.06) 0%, rgba(200, 169, 110, 0.02) 100%);
  border: 1px solid rgba(200, 169, 110, 0.22);
  border-radius: 10px;
}

.pro-anchor-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: #c8c8c8;
  text-align: center;
}

.pro-anchor-price {
  color: #d8d8d8;
}

.pro-anchor-price strong {
  color: #ebebeb;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.pro-anchor-save {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  background: rgba(200, 169, 110, 0.14);
  border-radius: 4px;
  color: #c8a96e;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pro-anchor-sep {
  color: #5a5a5a;
  font-size: 0.85rem;
}

.pro-anchor-free {
  color: #8a8a8a;
}

/* ── Closing CTA ───────────────────────────────────────────────────────────
   This is the brand moment. Gold accents lead the analytical narrative
   above; the close shifts to the magenta Pro palette (mirrors .pro-hero-badge
   and the catalog avatar glow) so clicking literally feels like claiming the
   badge. Annual is the magenta-filled, recommended option; Monthly is the
   ghost. The "save 50%" pill keeps one gold note for tonal continuity. */

.pro-close {
  position: relative;
  max-width: 760px;
  margin: 4rem auto;
  padding: 3rem 2rem;
  background:
    radial-gradient(ellipse at top, rgba(122, 29, 112, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #161416 0%, #141214 100%);
  border: 1px solid rgba(140, 70, 120, 0.18);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.pro-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(210, 90, 195, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.pro-close-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.pro-close .capabilities-label {
  color: #d8a8cc;
}

.pro-close-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f2eae8;
  margin: 0;
  text-wrap: balance;
}

.pro-close-sub {
  font-size: 0.95rem;
  color: #a8a0a4;
  margin: 0 0 0.5rem;
  max-width: 480px;
  line-height: 1.55;
}

.pro-close-cta-row {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.4rem;
}

.pro-close .pro-cta--lg {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.95rem 1.6rem;
  min-width: 200px;
}

/* Monthly — ghost magenta. Sits as the secondary option. */
.pro-close .pro-cta--filled {
  background: transparent;
  color: #f2cae8;
  border: 1px solid rgba(210, 90, 195, 0.42);
  border-radius: 4px;
  box-shadow: none;
}

.pro-close .pro-cta--filled:hover {
  background: rgba(210, 90, 195, 0.10);
  border-color: rgba(210, 90, 195, 0.72);
  color: #ffe1f3;
  transform: translateY(-1px);
}

.pro-cta-line {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pro-cta-price {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* Annual — filled magenta gradient, the visually recommended option. Mirrors
   the PRO badge palette so the CTA reads as "become Pro." Glow is kept
   minimal so the button doesn't feel synthetic. */
.pro-close .pro-cta--annual {
  position: relative;
  background: linear-gradient(145deg, #3c1640 0%, #52195c 50%, #2a0b28 100%);
  color: #e8c4dc;
  border: 1px solid rgba(160, 70, 145, 0.5);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.pro-close .pro-cta--annual:hover {
  background: linear-gradient(145deg, #4a1c50 0%, #66236e 50%, #380f36 100%);
  border-color: rgba(180, 80, 160, 0.6);
  color: #f2d8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Save 50% pill — gold on dark, the one tonal callback to the rest of the
   page. Reads as a positive accent against the magenta button. */
.pro-cta-save {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.42rem;
  background: rgba(200, 169, 110, 0.18);
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e6c98a;
  border: 1px solid rgba(200, 169, 110, 0.45);
}

.pro-close-trust {
  font-size: 0.78rem;
  color: #7a6d75;
  margin: 0.9rem 0 0;
  letter-spacing: 0.01em;
}

.pro-close-error {
  min-height: 1.2em;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: #d68a8a;
}

.pro-close-error:empty {
  display: none;
}

@media (max-width: 560px) {
  .pro-close {
    padding: 2.2rem 1.2rem;
  }
  .pro-close-cta-row {
    flex-direction: column;
    width: 100%;
  }
  .pro-close .pro-cta--lg {
    width: 100%;
  }
  .pro-anchor-strip {
    margin: -1.5rem auto 3rem;
    padding: 0.85rem 1rem;
  }
  .pro-anchor-strip-inner {
    font-size: 0.85rem;
  }
}

/* ── /pro/welcome ─────────────────────────────────────────────────────────── */

.prowelcome-body {
  background: #141414;
  color: #d8d8d8;
  position: relative;
}

/* Magenta dot-grid texture — mirrors the landing-page hero treatment so the
   page reads as "Hoidesigner with the Pro skin on" instead of an alien grey. */
.prowelcome-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(210, 90, 195, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.4s ease;
}

/* Soft magenta ambient at the top — same role as the landing hero's gold
   glow, just retuned to the Pro palette. */
.prowelcome-body::after {
  content: '';
  position: fixed;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 55%;
  background: radial-gradient(ellipse, rgba(210, 90, 195, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.4s ease;
}

/* When the lights drop on Pro confirmation, the ambient glow fades down and
   the grid dims a touch so the badge bloom owns the centre. */
.prowelcome-body:has(.prowelcome-vignette.is-on)::after {
  opacity: 0;
}
.prowelcome-body:has(.prowelcome-vignette.is-on)::before {
  opacity: 0.5;
}

/* Slow vignette darkens the edges when Pro activates - "lights dim, focus
   pulls to centre". Inert until JS adds .is-on. */
.prowelcome-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at center,
      transparent 26%,
      rgba(0, 0, 0, 0.62) 72%,
      rgba(0, 0, 0, 0.92) 100%
    );
  transition: opacity 1.6s ease-out;
}

.prowelcome-vignette.is-on {
  opacity: 1;
}

.prowelcome-main {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.prowelcome-inner {
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  animation: prowelcome-fadein 0.55s ease 0.05s forwards;
  transition: opacity 320ms ease, transform 320ms ease;
}

/* Fade-out beat between activating and ready, so the swap doesn't snap.
   Only the activating content lives in these elements at this moment - the
   ready content takes over via the .is-ready animations below. */
.prowelcome-inner.is-transitioning .prowelcome-status,
.prowelcome-inner.is-transitioning .prowelcome-title,
.prowelcome-inner.is-transitioning .prowelcome-sub {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.prowelcome-badge-wrap {
  position: relative;
  padding-bottom: 0.4rem;
  animation: prowelcome-badge-enter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

/* Magenta bloom behind the badge. Hidden until the inner gets .has-bloom. */
.prowelcome-bloom {
  position: absolute;
  inset: -120% -180%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(210, 90, 195, 0.32) 0%,
    rgba(180, 30, 175, 0.18) 22%,
    rgba(140, 20, 130, 0.05) 48%,
    transparent 72%
  );
  filter: blur(8px);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1.6s ease, transform 2.4s ease;
  z-index: -1;
}

.prowelcome-inner.has-bloom .prowelcome-bloom {
  opacity: 1;
  transform: scale(1);
  animation: prowelcome-bloom-breath 4.2s ease-in-out 1.6s infinite;
}

@keyframes prowelcome-bloom-breath {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

.prowelcome-badge {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 2px 14px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(205, 75, 185, 0.32),
    0 0 110px rgba(180, 30, 175, 0.18),
    0 0 2px rgba(255, 180, 245, 0.5);
  transition: box-shadow 1.6s ease;
}

.has-bloom .prowelcome-badge {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 2px 16px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(210, 90, 195, 0.5),
    0 0 160px rgba(180, 30, 175, 0.28),
    0 0 2px rgba(255, 200, 245, 0.7);
}

@keyframes prowelcome-badge-enter {
  0%   { opacity: 0; transform: scale(0.82) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.prowelcome-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(210, 90, 195, 0.28);
  background: rgba(210, 90, 195, 0.06);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #f2cae8;
  letter-spacing: 0.01em;
  /* opacity/transform are owned by the .is-transitioning and .is-ready
     rules below - don't add transitions for them here or they'll fight
     the animation's `both` fill-mode. */
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.prowelcome-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d680c4;
  box-shadow: 0 0 8px rgba(210, 90, 195, 0.7);
  animation: prowelcome-pulse 1.4s ease-in-out infinite;
}

.prowelcome-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #f2cae8;
}

.prowelcome-status--ok {
  background: rgba(210, 90, 195, 0.08);
  border-color: rgba(210, 90, 195, 0.45);
  color: #f2cae8;
}

.prowelcome-status--waiting {
  background: rgba(180, 130, 170, 0.06);
  border-color: rgba(180, 130, 170, 0.32);
  color: #c8a8c0;
}

@keyframes prowelcome-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

.prowelcome-copy {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 460px;
  width: 100%;
}

.prowelcome-title {
  font-size: clamp(2rem, 5.5vw, 2.85rem);
  font-weight: 700;
  color: #ebebeb;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  /* Reserve two lines of headline so the long "Activating your Pro access"
     and short "You're Pro." both occupy the same vertical space - prevents a
     reflow jiggle when the text swaps. */
  min-height: calc(2 * 1.1 * clamp(2rem, 5.5vw, 2.85rem));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.6s ease;
}

.is-activating .prowelcome-title {
  color: #c9c9c9;
}

.prowelcome-sub {
  font-size: 0.92rem;
  color: #8e8e8e;
  line-height: 1.65;
  margin: 0;
  text-wrap: balance;
  /* Same idea on the sub copy - reserve three lines so the two states don't
     reflow the column. */
  min-height: calc(3 * 1.65 * 0.92rem);
  transition: color 0.6s ease;
}

.prowelcome-actions-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  /* Reserve the row so the actions appearing don't push the footnote down. */
  min-height: 2.7rem;
}

.prowelcome-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}

.prowelcome-plan-line {
  font-size: 0.75rem;
  color: #6f6f6f;
  margin: 0.4rem 0 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prowelcome-footnote {
  font-size: 0.78rem;
  color: #5a5a5a;
  margin: 0.4rem 0 0;
  line-height: 1.55;
  max-width: 420px;
}

/* Reveal once the ready state lands. The status, title and sub all share the
   same timing so they read as one resolved beat instead of a waterfall; only
   the actions and footnote (which weren't present before) come in after. */
.is-ready .prowelcome-status,
.is-ready .prowelcome-title,
.is-ready .prowelcome-sub {
  animation: prowelcome-rise 0.55s ease 0.05s both;
}
.is-ready .prowelcome-actions-wrap {
  animation: prowelcome-rise 0.55s ease 0.35s both;
}
.is-ready .prowelcome-footnote {
  animation: prowelcome-rise 0.55s ease 0.55s both;
}

@keyframes prowelcome-fadein {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes prowelcome-rise {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .prowelcome-inner,
  .prowelcome-inner * {
    animation: none !important;
    transition: none !important;
  }
  .prowelcome-vignette {
    transition: none !important;
  }
}

@media (max-width: 560px) {
  .prowelcome-main {
    padding: 2rem 1rem;
  }
  .prowelcome-inner {
    gap: 1.3rem;
  }
  .prowelcome-actions {
    flex-direction: column;
    width: 100%;
  }
  .prowelcome-actions .pro-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ── Hero CTA with price ─────────────────────────────────────────────────── */

.pro-cta--stacked {
  flex-direction: column;
  gap: 0.15rem;
}

.pro-cta-from {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* ── Supporter column: hidden on /pro, shown on /supporter ───────────────── */

.pro-body .mem-grid {
  grid-template-columns: 1.5fr 1fr 1fr;
}

/* 3rd col-head = Supporter header */
.pro-body .mem-grid > .mem-col-head:nth-child(3) {
  display: none;
}

/* 3rd cell inside each row = Supporter data cell */
.pro-body .mem-grid .mem-row .mem-cell:nth-child(3) {
  display: none;
}

@media (max-width: 700px) {
  .pro-body .mem-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

/* ── Supporter nudge link below plans grid ───────────────────────────────── */

.pro-supporter-nudge {
  text-align: center;
  font-size: 0.78rem;
  color: #555;
  margin: 1.5rem 0 0;
  letter-spacing: 0.01em;
}

.pro-supporter-nudge-link {
  color: #888;
  text-decoration: none;
  border-bottom: 1px solid #3a3a3a;
  transition: color 120ms ease, border-color 120ms ease;
}

.pro-supporter-nudge-link:hover {
  color: #c8a96e;
  border-color: #c8a96e;
}

/* ── Plan grid: annual save callout on Pro header ────────────────────────── */

.mem-tier-save-line {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e6b3cf;
  margin-top: 6px;
}

/* ── Doctrine Scan Path demo (feature 04) ────────────────────────────────── */

/* Scan Path strip — rendered in its active (stat selected) state */
.pro-demo-scanpath {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(210, 90, 195, 0.065);
  border-bottom: 1px solid rgba(210, 90, 195, 0.28);
}

.pro-demo-scanpath-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pro-demo-scanpath-pro {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 2px;
  color: #f2cae8;
  background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
  border: 1px solid rgba(210, 90, 195, 0.5);
  text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
  flex-shrink: 0;
}

.pro-demo-scanpath-icon {
  color: #d080c0;
  flex-shrink: 0;
}

.pro-demo-scanpath-name {
  font-size: 12px;
  font-weight: 600;
  color: #d0d0d0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pro-demo-scanpath-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pro-demo-scanpath-design {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #e6b3cf;
  font-weight: 600;
  padding: 2px 8px 2px 5px;
  border: 1px solid #333;
  border-radius: 3px;
  white-space: nowrap;
}

.pro-demo-scanpath-design-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.pro-demo-scanpath-on {
  font-size: 11px;
  color: #4a4a4a;
}

.pro-demo-scanpath-stat {
  font-size: 11px;
  color: #f2cae8;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid rgba(210, 90, 195, 0.5);
  border-radius: 3px;
  white-space: nowrap;
}

/* ── Full-width doctrine tree (4 branches × options, best per branch) ──────
   Each option is annotated with its standalone boost; the best per branch is
   highlighted. A scan line sweeps left -> right and reveals each branch's best
   glow as it passes. The radar sweep lives in the section background. */
.pro-feature--stacked .pro-demo--doctree {
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
}
.pro-demo-doctree-grid {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
}
.pro-demo-doctree-branch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pro-demo-doctree-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #242424;
}
.pro-demo-doctree-head-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
}
.pro-demo-doctree-head-name {
  font-size: 0.62rem;
  font-weight: 600;
  color: #c4c4bc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pro-demo-doctree-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid #222;
  background: #161616;
  font-size: 0.58rem;
  color: #8a8a8a;
  white-space: nowrap;
}
.pro-demo-doctree-opt b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: #555;
  flex-shrink: 0;
}
.pro-demo-doctree-opt--best {
  color: #d6d6d6;
  border-color: rgba(210, 90, 195, 0.5);
  background: rgba(210, 90, 195, 0.08);
  box-shadow: 0 0 12px rgba(210, 90, 195, 0.16), inset 0 0 0 1px rgba(210, 90, 195, 0.08);
}
.pro-demo-doctree-opt--best b {
  color: #f2cae8;
  background: linear-gradient(145deg, #3c1640 0%, #62205a 100%);
  border: 1px solid rgba(210, 90, 195, 0.55);
  border-radius: 3px;
  padding: 1px 5px;
  text-shadow: 0 1px 0 rgba(20, 4, 12, 0.85);
}

/* Focus-stat cycle: each branch's option list cross-fades between the three
   selections (Soft Attack -> Breakthrough -> Punch / IC), reusing the 12s
   psupSwap timing so every branch and the stat label switch together. */
.pro-demo-doctree-opt-stack { display: grid; }
.pro-demo-doctree-opt-list {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pro-demo-scanpath-stat-stack { display: inline-grid; }
.pro-demo-scanpath-stat-stack > .df-swap { grid-area: 1 / 1; white-space: nowrap; }
.df-swap--a { animation: psupSwapA 12s ease-in-out infinite; }
.df-swap--b { animation: psupSwapB 12s ease-in-out infinite; }
.df-swap--c { animation: psupSwapC 12s ease-in-out infinite; }

/* Grand-doctrine row: the recommended grand doctrine for the focus stat lights up
   (glow fades in during that stat's window, on the same 12s cycle). */
.pro-demo-doctree-grand { padding: 10px 12px 4px; }
.pro-demo-doctree-grand-label {
  display: block;
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #6a6a6a;
  margin-bottom: 6px;
}
.pro-demo-doctree-grand-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pro-demo-doctree-grand-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid #222;
  background: #161616;
  min-width: 0;
}
.pro-demo-doctree-grand-card > * { position: relative; z-index: 1; }
.pro-demo-doctree-grand-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.8;
  flex-shrink: 0;
}
.pro-demo-doctree-grand-name {
  font-size: 0.62rem;
  font-weight: 600;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pro-demo-doctree-grand-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  border: 1px solid rgba(210, 90, 195, 0.55);
  background: rgba(210, 90, 195, 0.08);
  box-shadow: 0 0 14px rgba(210, 90, 195, 0.2), inset 0 0 0 1px rgba(210, 90, 195, 0.08);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.pro-demo-doctree-grand--a::before { animation: psupSwapA 12s ease-in-out infinite; }
.pro-demo-doctree-grand--b::before { animation: psupSwapB 12s ease-in-out infinite; }
.pro-demo-doctree-grand--c::before { animation: psupSwapC 12s ease-in-out infinite; }

/* Mobile: stack the tracks (and grand-doctrine row) instead of cramming four
   columns, the way the designer stacks on small screens. Desktop stays 4-up. */
@media (max-width: 860px) {
  .pro-demo-doctree-grid { grid-template-columns: 1fr 1fr; }
  .pro-demo-doctree-grand-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pro-demo-doctree-grid { grid-template-columns: 1fr; }
  /* Free up header space: the whole page already establishes this is Pro, so the
     inline PRO badge on the strip is redundant here on narrow screens. */
  .pro-demo-scanpath-pro { display: none; }
}

/* Radar backdrop for the whole section: concentric rings + a rotating sweep,
   masked so the disc fades into the section background instead of sitting on the
   demo. Content (copy + demo) rides above it. */
.pro-feature--recpath {
  position: relative;
  overflow: hidden;
}
.pro-feature--recpath > .pro-feature-copy,
.pro-feature--recpath > .pro-feature-visual {
  position: relative;
  z-index: 1;
}
.recpath-radar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 72%);
          mask-image: radial-gradient(circle, #000 48%, transparent 72%);
}
.recpath-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(210, 90, 195, 0.07) 0 1px, transparent 1px 70px),
    radial-gradient(circle at 50% 50%, rgba(210, 90, 195, 0.05), transparent 70%);
}
.recpath-radar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(210, 90, 195, 0.16) 0deg, rgba(210, 90, 195, 0.03) 26deg, transparent 64deg, transparent 360deg);
  animation: recpathSweep 7s linear infinite;
}
@keyframes recpathSweep { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .recpath-radar::after { animation: none; }
  .df-swap--a { opacity: 1; animation: none; }
  .df-swap--b,
  .df-swap--c { opacity: 0; animation: none; }
  .pro-demo-doctree-grand--a::before { opacity: 1; animation: none; }
  .pro-demo-doctree-grand--b::before,
  .pro-demo-doctree-grand--c::before { opacity: 0; animation: none; }
}