/* PaceMotive Pro presentation layer — intentionally scoped to the public Pro page. */
.pro-page {
  background:
    radial-gradient(circle at 8% 9%, rgb(85 226 182 / 0.2), transparent 30rem),
    radial-gradient(circle at 92% 24%, rgb(84 173 255 / 0.18), transparent 32rem),
    radial-gradient(circle at 67% 78%, rgb(175 145 255 / 0.11), transparent 30rem),
    linear-gradient(145deg, #04110d 0%, #081b16 49%, #15131c 100%);
}

.pro-page .site-header {
  border-bottom-color: rgb(175 145 255 / 0.22);
  box-shadow: 0 12px 44px rgb(0 0 0 / 0.2);
}

.pro-page .pro-main {
  width: min(1240px, calc(100% - 32px));
  padding-top: clamp(24px, 5vw, 64px);
}

.pro-page .pro-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  min-height: min(690px, calc(100vh - 104px));
  overflow: hidden;
  border-color: rgb(84 173 255 / 0.34);
  background:
    radial-gradient(circle at 8% 0%, rgb(85 226 182 / 0.22), transparent 27rem),
    radial-gradient(circle at 97% 7%, rgb(84 173 255 / 0.21), transparent 29rem),
    radial-gradient(circle at 88% 96%, rgb(175 145 255 / 0.2), transparent 23rem),
    linear-gradient(145deg, rgb(10 43 34 / 0.98), rgb(6 22 18 / 0.98) 54%, rgb(12 20 30 / 0.98));
  box-shadow: 0 36px 110px rgb(0 0 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.04);
}

.pro-grid-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgb(85 226 182 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(85 226 182 / 0.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, black, transparent 54%);
}

.pro-page .pro-hero-copy {
  position: relative;
  z-index: 1;
}

.pro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.78rem;
  border: 1px solid rgb(85 226 182 / 0.28);
  border-radius: 999px;
  background: rgb(5 24 19 / 0.7);
}

.pro-live-pulse {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgb(198 243 107 / 0.1), 0 0 20px rgb(198 243 107 / 0.68);
}

.pro-page .pro-hero h1 {
  max-width: 660px;
  margin-top: 1.45rem;
  font-size: clamp(3.7rem, 7vw, 6.8rem);
  line-height: 0.92;
}

.pro-page .pro-hero h1 span {
  background: linear-gradient(92deg, var(--mint) 3%, var(--blue) 48%, var(--violet) 72%, var(--lime));
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.pro-page .pro-lead {
  max-width: 640px;
  margin-top: 1.65rem;
  color: #d5d8c9;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  font-weight: 650;
}

.pro-page .pro-hero .button.primary,
.pro-page .pro-plan-card .button.primary,
.pro-page .pro-cta-card .button.primary {
  border-color: #ff9a72;
  background: linear-gradient(135deg, #ff6138, #ff8b52);
  color: #fffbea;
  box-shadow: 0 16px 35px rgb(255 107 53 / 0.28), 0 0 36px rgb(255 107 53 / 0.12);
}

.pro-page .pro-hero .button.ghost {
  border-color: rgb(84 173 255 / 0.34);
  background: rgb(84 173 255 / 0.07);
}

.pro-proof-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  max-width: 650px;
  margin-top: 2rem;
}

.pro-proof-rail p {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  margin: 0;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 12px;
  background: rgb(2 16 13 / 0.48);
}

.pro-proof-rail span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pro-proof-rail strong {
  overflow: hidden;
  color: var(--mint);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-page .price-note {
  max-width: 650px;
  margin-top: 0.7rem;
  color: #999f92;
}

.pro-page .pro-signal-card {
  align-self: center;
  gap: 0;
  padding: 1rem;
  border-color: rgb(84 173 255 / 0.4);
  border-radius: 28px;
  background: linear-gradient(160deg, rgb(6 27 24 / 0.96), rgb(8 18 29 / 0.98));
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.42), 0 0 55px rgb(84 173 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.05);
}

.pro-page .pro-signal-card::after {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgb(175 145 255 / 0.29), transparent 68%);
}

.pro-console-topline {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0.15rem 1rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pro-console-topline > div {
  display: flex;
  gap: 0.38rem;
}

.pro-console-topline .signal-dot {
  position: static;
  display: block;
}

.pro-console-topline > span {
  justify-self: end;
  padding: 0.28rem 0.45rem;
  border: 1px solid rgb(198 243 107 / 0.24);
  border-radius: 999px;
  color: var(--lime);
  background: rgb(198 243 107 / 0.08);
}

.pro-session-card {
  position: relative;
  z-index: 1;
  padding: 1.35rem;
  border: 1px solid rgb(85 226 182 / 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgb(85 226 182 / 0.18), transparent 13rem),
    linear-gradient(145deg, rgb(12 48 39 / 0.86), rgb(7 28 24 / 0.9));
}

.pro-signal-card .pro-session-card p {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.pro-signal-card .pro-session-card .pro-session-label {
  color: var(--mint);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pro-session-card h2 {
  margin: 0.38rem 0 0.15rem;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1;
}

.pro-session-progress {
  height: 0.42rem;
  margin-top: 1.15rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
}

.pro-session-progress span {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--blue), var(--lime));
  box-shadow: 0 0 18px rgb(84 173 255 / 0.4);
}

.pro-memory-flow {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.pro-memory-flow li {
  --row-accent: var(--mint);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--row-accent) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--row-accent) 6%, rgb(4 18 15 / 0.86));
}

.pro-memory-flow li:nth-child(2) { --row-accent: var(--blue); }
.pro-memory-flow li:nth-child(3) { --row-accent: var(--violet); }

.pro-memory-flow > li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 9px;
  color: #06130f;
  background: var(--row-accent);
  font-size: 0.72rem;
  font-weight: 950;
}

.pro-memory-flow div { display: grid; }
.pro-memory-flow strong { margin: 0; color: var(--ink); }
.pro-memory-flow small { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.pro-memory-flow b { color: var(--row-accent); font-size: 0.68rem; text-transform: uppercase; }

.pro-signal-card .pro-console-footer {
  position: relative;
  z-index: 1;
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.25rem 0.1rem;
  border: 0;
  background: none;
  color: var(--lime);
  font-size: 0.78rem;
  text-align: center;
}

.pro-page .pro-feature-section {
  border-color: rgb(175 145 255 / 0.27);
  background:
    radial-gradient(circle at 100% 0, rgb(175 145 255 / 0.13), transparent 26rem),
    linear-gradient(145deg, rgb(11 38 31 / 0.97), rgb(12 22 31 / 0.97));
}

.pro-section-lead {
  max-width: 720px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 650;
}

.pro-page .pro-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pro-page .pro-live-feature {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--feature-accent) 19%, transparent), transparent 15rem),
    linear-gradient(155deg, color-mix(in srgb, var(--feature-accent) 6%, #071a16), #081713);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 18px 42px rgb(0 0 0 / 0.18);
}

.pro-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pro-feature-top > span { color: var(--feature-accent); font-weight: 950; }
.pro-feature-top b {
  padding: 0.3rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--feature-accent) 30%, transparent);
  border-radius: 999px;
  color: var(--feature-accent);
  background: color-mix(in srgb, var(--feature-accent) 8%, transparent);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pro-page .pro-live-feature h3 { margin-top: 2rem; font-size: 1.55rem; line-height: 1.08; }

.pro-mini-visual {
  position: absolute;
  inset: auto 1.35rem 1.25rem;
  display: flex;
  align-items: end;
  gap: 0.45rem;
  height: 4.1rem;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--feature-accent) 18%, transparent);
  border-radius: 12px;
  background: rgb(2 15 12 / 0.54);
}

.shelf-visual i { flex: 1; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--feature-accent) 18%, #0b211b); border-left: 3px solid var(--feature-accent); }
.device-visual { justify-content: center; align-items: center; }
.device-visual i { width: 4.2rem; height: 2.6rem; border: 2px solid var(--feature-accent); border-radius: 5px; opacity: 0.75; }
.device-visual i:nth-child(2) { width: 1.5rem; height: 3.1rem; border-radius: 6px; }
.device-visual em { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }
.history-visual i { flex: 1; height: 22%; border-radius: 4px 4px 0 0; background: var(--feature-accent); opacity: 0.54; }
.history-visual i:nth-child(2) { height: 46%; }
.history-visual i:nth-child(3) { height: 68%; }
.history-visual i:nth-child(4) { height: 92%; opacity: 0.9; }

.pro-next-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.pro-next-row p {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 12px;
  background: rgb(5 17 14 / 0.48);
}

.pro-next-row span { color: var(--yellow); font-size: 0.68rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.pro-next-row strong { font-size: 0.86rem; }

.pro-page .pro-plan-card { overflow: hidden; }
.pro-page .paid-plan { position: relative; border-color: rgb(84 173 255 / 0.46); background: radial-gradient(circle at 100% 0, rgb(84 173 255 / 0.18), transparent 19rem), rgb(7 27 24 / 0.96); }
.pro-page .paid-plan::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: linear-gradient(90deg, var(--mint), var(--blue), var(--violet), var(--lime)); }
.pro-page .paid-plan .pro-plan-heading strong { color: var(--blue); }

.pro-page .early-access-section {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
}

.pro-page .pro-cta-card { min-height: 100%; background: radial-gradient(circle at 100% 0, rgb(255 107 53 / 0.2), transparent 18rem), linear-gradient(145deg, #10241e, #121a20); }
.pro-page .pro-cta-card h3 { margin-top: 1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.pro-cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

.pro-buy-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1.2rem 0;
  padding: 0;
  list-style: none;
}

.pro-buy-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem;
  border: 1px solid rgb(103 213 181 / 0.2);
  border-radius: 12px;
  background: rgb(5 23 19 / 0.52);
}

.pro-buy-steps li > span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  color: #071710;
  border-radius: 50%;
  background: var(--lime);
  font-weight: 950;
}

.pro-buy-steps li div { display: grid; gap: 0.2rem; }
.pro-buy-steps small { color: var(--muted); line-height: 1.35; }

@media (max-width: 960px) {
  .pro-page .pro-hero { grid-template-columns: 1fr; }
  .pro-page .pro-signal-card { width: min(100%, 650px); }
  .pro-page .pro-feature-grid { grid-template-columns: 1fr; }
  .pro-page .pro-live-feature { min-height: 285px; }
}

@media (max-width: 680px) {
  .pro-page .site-header { padding-inline: 0.7rem; }
  .pro-page .brand-subtitle { display: none; }
  .pro-page .top-nav { max-width: calc(100vw - 8.8rem); gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
  .pro-page .top-nav::-webkit-scrollbar { display: none; }
  .pro-page .site-header .nav-link { padding-inline: 0.62rem; font-size: 0.76rem; }
  .pro-page .pro-main { width: min(100% - 18px, 1240px); }
  .pro-page .pro-hero { padding: 24px 20px; border-radius: 22px; }
  .pro-page .pro-hero h1 { font-size: clamp(3.1rem, 17vw, 4.8rem); }
  .pro-proof-rail, .pro-next-row { grid-template-columns: 1fr; }
  .pro-page .pro-signal-card { padding: 0.7rem; border-radius: 20px; }
  .pro-console-topline { grid-template-columns: 1fr auto; }
  .pro-console-topline > strong { display: none; }
  .pro-memory-flow li { grid-template-columns: auto 1fr; }
  .pro-memory-flow b { grid-column: 2; }
  .pro-page .pro-live-feature { min-height: 320px; }
  .pro-page .pro-plan-grid, .pro-page .early-access-section { grid-template-columns: 1fr; }
  .pro-page .pro-cta-actions .button { width: 100%; }
  .pro-buy-steps { grid-template-columns: 1fr; }
}