@font-face {
  font-family: "Instrument Sans";
  src: url("/app/assets/fonts/instrument-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/app/assets/fonts/instrument-sans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/app/assets/fonts/instrument-sans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/app/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/app/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #0a1020;
  --ink-2: #111a34;
  --ink-soft: #5f6677;
  --blue: #315dff;
  --blue-deep: #2147db;
  --periwinkle: #9fb2ff;
  --violet: #8c72ff;
  --lime: #caff69;
  --mint: #55d39b;
  --mint-ink: #278b68;
  --coral: #ff806b;
  --paper: #f6f7fb;
  --white: #ffffff;
  --line: rgba(16, 25, 49, 0.12);
  --radius-lg: 36px;
  --radius-md: 22px;
  --font-sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --type-display-weight: 700;
  --type-heading-weight: 500;
  --type-feature-weight: 700;
  --type-body-weight: 400;
  --type-ui-weight: 500;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--type-body-weight);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.18em;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.045em;
}

.brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 0 5px 14px rgba(25, 40, 84, 0.18);
  transform: rotate(-4deg);
}

.brand-mark i {
  position: absolute;
  left: 7px;
  width: 14px;
  height: 6px;
  border-radius: 2px;
  background: white;
  transform: skewX(-24deg);
}

.brand-mark i:first-child { top: 7px; }
.brand-mark i:last-child { top: 15px; width: 10px; background: var(--lime); }

.brand-logo { display: block; height: auto; object-fit: contain; }
.brand-logo-header { width: 118px; }
.brand-logo-comparison { width: 104px; }
.brand-logo-footer { width: 124px; }

.hero-title-line {
  display: block;
  color: var(--ink);
  white-space: nowrap;
}

.hero-brand-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin-top: .045em;
  font-size: .94em;
  white-space: nowrap;
}

.hero-brand-wordmark {
  width: auto;
  height: .78em;
  display: block;
  object-fit: contain;
  align-self: center;
  transform: translateY(.035em);
}

.hero-brand-name {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--type-display-weight);
}

.hero-brand-name img {
  width: .58em;
  height: .58em;
  margin: 0 .015em;
  align-self: center;
  display: block;
  object-fit: contain;
  transform: translateY(.055em);
}

.app-glyph {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 13px;
  background: linear-gradient(145deg, #77a6ff, #3157eb);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 20px rgba(20, 29, 61, 0.16);
}

.app-glyph i {
  position: absolute;
  width: 22px;
  height: 22px;
  left: 9px;
  top: 10px;
  border: 3px solid white;
  border-radius: 50% 50% 45% 55%;
  opacity: 0.9;
}

.app-glyph b {
  position: absolute;
  width: 11px;
  height: 11px;
  right: 8px;
  bottom: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  transform: rotate(18deg);
}

.glyph-violet { background: linear-gradient(145deg, #af9fff, #7354ed); }
.glyph-coral { background: linear-gradient(145deg, #ffb186, #ff6572); }
.glyph-lime { background: linear-gradient(145deg, #dcff88, #72cf67); }
.glyph-lime i { border-color: #31451e; }
.glyph-lime b { background: #31451e; }
.glyph-blue { background: linear-gradient(145deg, #82b8ff, #3157eb); }

.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 50%;
  width: min(1440px, calc(100% - 64px));
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transform: translateX(-50%);
}

.brand-link { justify-self: start; }

.site-header nav {
  display: flex;
  align-items: center;
  gap: 38px;
  color: #596071;
  font-size: 14px;
  font-weight: 690;
}

.site-header nav a,
.sign-in { transition: color 180ms ease, transform 180ms ease, border-color 180ms ease; }
.site-header nav a:hover,
.sign-in:hover { color: var(--blue); }

.sign-in {
  justify-self: end;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  font-weight: 760;
  backdrop-filter: blur(16px);
}

.sign-in span { font-size: 11px; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 132px 24px 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(238, 241, 255, 0) 70%, #eef1ff 100%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.98) 0 18%, rgba(248, 249, 253, 0.42) 58%),
    linear-gradient(180deg, #fcfcfe 0%, #f4f6ff 68%, #eef1ff 100%);
}

.hero-mesh {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
  background-image: radial-gradient(rgba(18, 30, 61, 0.22) 0.65px, transparent 0.65px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}

.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

.ambient-left {
  width: 590px;
  height: 590px;
  left: -350px;
  top: 20%;
  background: radial-gradient(circle, rgba(145, 166, 255, 0.38), rgba(145, 166, 255, 0));
}

.ambient-right {
  width: 520px;
  height: 520px;
  right: -290px;
  top: 13%;
  background: radial-gradient(circle, rgba(202, 255, 105, 0.32), rgba(202, 255, 105, 0));
}

.hero-copy {
  position: relative;
  z-index: 5;
  width: min(940px, 100%);
  text-align: center;
  transform: translateY(-1.5vh);
}

.hero-proof {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(20, 31, 59, 0.1);
  border-radius: 999px;
  color: #646b7c;
  background: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 790;
  letter-spacing: 0.035em;
  backdrop-filter: blur(14px);
}

.hero-proof span,
.status-dot,
.live-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #55d39b;
  box-shadow: 0 0 0 4px rgba(85, 211, 155, 0.13);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(60px, 7vw, 104px);
  line-height: 0.95;
  font-weight: var(--type-display-weight);
  letter-spacing: -0.058em;
}

.hero h1 em {
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: 0.94em;
  font-weight: var(--type-display-weight);
  letter-spacing: -0.052em;
}

.hero-assistant-title .hero-title-line:last-child {
  margin-top: 0.08em;
  font-size: 0.72em;
  letter-spacing: -0.045em;
}

.hero-subtitle {
  width: min(680px, 100%);
  margin: 26px auto 29px;
  color: #5e6576;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.022em;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.primary-cta {
  padding: 16px 17px 16px 22px;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  border-radius: 14px;
  color: white;
  background: var(--blue);
  box-shadow: 0 18px 42px rgba(49, 93, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  font-size: 15px;
  font-weight: 820;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.primary-cta > span,
.primary-cta > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 14px;
}

.primary-cta:hover {
  color: white;
  background: var(--blue-deep);
  box-shadow: 0 22px 52px rgba(49, 93, 255, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: translateY(-3px);
}

.hero-actions p {
  margin: 14px 0 0;
  color: #7c8392;
  font-size: 11px;
  font-weight: 690;
}

.hero-actions p i {
  width: 3px;
  height: 3px;
  margin: 0 7px 2px;
  display: inline-block;
  border-radius: 50%;
  background: #aeb4bf;
}

.hero .primary-cta {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(42, 61, 122, 0.16), inset 0 0 0 1px rgba(49, 93, 255, 0.1);
}

.hero .primary-cta > span {
  color: #ffffff;
  background: var(--blue);
}

.hero .primary-cta:hover {
  color: var(--ink);
  background: #f8f9ff;
  box-shadow: 0 22px 52px rgba(42, 61, 122, 0.22), inset 0 0 0 1px rgba(49, 93, 255, 0.14);
}

.edge-phone {
  position: absolute;
  z-index: 2;
  width: 216px;
  height: 442px;
  padding: 62px 22px 24px;
  overflow: hidden;
  border: 8px solid #101729;
  border-radius: 48px;
  color: var(--ink);
  background: white;
  box-shadow: 0 38px 80px rgba(28, 42, 78, 0.17), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.edge-phone-left {
  left: max(-74px, calc(50% - 760px));
  top: 30%;
  background: linear-gradient(160deg, #fff 0%, #f4f0ff 100%);
  transform: rotate(-8deg);
}

.edge-phone-right {
  right: max(-68px, calc(50% - 760px));
  top: 23%;
  background: linear-gradient(160deg, #f7fff0 0%, #fff 100%);
  transform: rotate(8deg);
}

.phone-island {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 74px;
  height: 21px;
  border-radius: 99px;
  background: #101729;
  transform: translateX(-50%);
}

.phone-label { color: #858b9b; font-size: 8px; font-weight: 850; letter-spacing: 0.16em; }

.phone-app-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.phone-app-row .app-glyph { width: 52px; height: 52px; }
.phone-app-row strong,
.phone-app-row small { display: block; }
.phone-app-row strong { font-size: 15px; letter-spacing: -0.03em; }
.phone-app-row small { margin-top: 4px; color: #8b91a0; font-size: 8px; }

.mini-chart {
  height: 112px;
  margin-top: 26px;
  padding: 18px 12px 12px;
  display: flex;
  align-items: end;
  gap: 7px;
  border: 1px solid rgba(15, 26, 51, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.mini-chart i { flex: 1; border-radius: 6px 6px 3px 3px; background: #cbd5ff; }
.mini-chart i:nth-child(1) { height: 24%; }
.mini-chart i:nth-child(2) { height: 42%; }
.mini-chart i:nth-child(3) { height: 38%; }
.mini-chart i:nth-child(4) { height: 70%; background: var(--violet); }
.mini-chart i:nth-child(5) { height: 90%; background: var(--coral); }

.phone-stat { margin-top: 15px; display: flex; align-items: center; color: #888f9d; font-size: 8px; }
.phone-stat strong { margin-left: auto; color: #5f45d9; font-size: 14px; }

.mini-question {
  margin-top: 23px;
  padding: 16px;
  border-radius: 16px 16px 5px 16px;
  color: white;
  background: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 670;
}

.mini-answer {
  margin: 12px 0 19px;
  padding: 15px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px 9px;
  border: 1px solid rgba(15, 26, 51, 0.08);
  border-radius: 5px 16px 16px 16px;
  background: white;
}

.mini-answer span { grid-row: 1 / 4; color: var(--blue); }
.mini-answer i { height: 5px; border-radius: 9px; background: #dfe4ee; }
.mini-answer i:nth-of-type(2) { width: 75%; }
.mini-answer i:nth-of-type(3) { width: 48%; }
.mini-token-row { display: flex; flex-wrap: wrap; gap: 5px; }
.mini-token-row b { padding: 6px 7px; border-radius: 7px; background: var(--lime); font-size: 7px; letter-spacing: 0.07em; }
.mini-token-row b:nth-child(2) { background: #ddd7ff; }
.mini-token-row b:nth-child(3) { background: #ffd8d1; }

.scroll-cue {
  position: absolute;
  z-index: 5;
  bottom: 25px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #747b8b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue i { width: 1px; height: 25px; background: linear-gradient(var(--blue), transparent); }

.proof-section {
  position: relative;
  padding: 138px 0 126px;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 8% 10%, rgba(96, 125, 255, 0.26), transparent 31%),
    radial-gradient(circle at 92% 70%, rgba(202, 255, 105, 0.1), transparent 26%),
    var(--ink);
}

.proof-section::before,
.cta-grid {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.proof-heading {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  align-items: end;
  gap: 60px;
}

.proof-heading .eyebrow { color: var(--periwinkle); }
.proof-heading h2 { margin: 0; max-width: 790px; font-size: clamp(54px, 6.3vw, 92px); line-height: 0.94; letter-spacing: -0.07em; }
.proof-heading > p { max-width: 470px; margin: 0 0 7px; color: #adb5c7; font-size: 17px; line-height: 1.65; }

.app-ticker {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 8px 0 30px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.ticker-track {
  width: max-content;
  display: flex;
  gap: 12px;
  animation: ticker-scroll 48s linear infinite;
}

@keyframes ticker-scroll { to { transform: translateX(-50%); } }
.app-ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-app {
  width: 205px;
  padding: 10px 13px 10px 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
}

.ticker-app img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px; object-fit: cover; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22); }
.ticker-app strong,
.ticker-app small { display: block; }
.ticker-app strong { max-width: 125px; overflow: hidden; color: #f7f8fb; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ticker-app small { margin-top: 4px; color: #868fa4; font-size: 8px; }

.proof-cards {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 64px));
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.proof-card {
  position: relative;
  min-height: 320px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.proof-card::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(140, 114, 255, 0.2);
  filter: blur(8px);
}

.proof-coral::after { background: rgba(255, 128, 107, 0.18); }
.proof-lime::after { background: rgba(202, 255, 105, 0.13); }
.proof-card-top { display: flex; align-items: center; color: #919bb1; font-size: 9px; font-weight: 850; letter-spacing: 0.15em; }
.proof-card-top b { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: white; background: rgba(140, 114, 255, 0.45); font-size: 16px; }
.proof-coral .proof-card-top b { background: rgba(255, 128, 107, 0.46); }
.proof-lime .proof-card-top b { color: #27341d; background: var(--lime); }
.proof-card h3 { max-width: 340px; margin: 48px 0 0; font-size: clamp(25px, 2.5vw, 37px); line-height: 1.06; letter-spacing: -0.05em; }
.proof-metric { margin-top: 27px; display: flex; align-items: end; gap: 10px; }
.proof-metric strong { color: var(--periwinkle); font-size: 34px; letter-spacing: -0.055em; }
.proof-coral .proof-metric strong { color: #ff9a88; }
.proof-lime .proof-metric strong { color: var(--lime); }
.proof-metric span { margin-bottom: 5px; color: #858fa3; font-size: 9px; }
.proof-card > p { position: absolute; z-index: 2; left: 27px; bottom: 23px; margin: 0; padding: 8px 10px; border-radius: 99px; color: #b7bfd0; background: rgba(255, 255, 255, 0.07); font-size: 8px; font-weight: 760; }
.proof-disclaimer { position: relative; z-index: 2; width: min(1240px, calc(100% - 64px)); margin: 17px auto 0; color: #6f788d; font-size: 9px; text-align: right; }

.capabilities-section {
  position: relative;
  height: 300svh;
  padding: 0;
  background:
    linear-gradient(180deg, #f5f6fb 0%, rgba(245, 246, 251, 0) 14%),
    radial-gradient(circle at 4% 24%, rgba(111, 142, 255, 0.14), transparent 28%),
    radial-gradient(circle at 96% 82%, rgba(202, 255, 105, 0.14), transparent 26%),
    #f5f6fb;
}

.section-heading { width: min(1020px, 100%); margin: 0 auto; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(55px, 7vw, 100px); line-height: 0.93; letter-spacing: -0.075em; }
.section-heading > p:last-child { margin: 25px auto 0; color: #697080; font-size: 17px; }

.capability-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 22px clamp(22px, 3.5vw, 58px) 25px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.capability-stage-header {
  width: min(1260px, 100%);
  min-height: 88px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.capability-stage-header .eyebrow { margin-bottom: 8px; }
.capability-stage-header h2 { margin: 0; font-size: clamp(29px, 2.8vw, 42px); line-height: 1; font-weight: 630; letter-spacing: -0.052em; }
.capability-progress { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.capability-progress > span { color: #646d80; font-size: 10px; font-weight: 810; letter-spacing: 0.15em; }
.capability-progress > div { display: flex; align-items: center; gap: 7px; }
.capability-progress button { width: 32px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.capability-progress button i { width: 100%; height: 3px; display: block; border-radius: 999px; background: #ccd1dd; transition: height 220ms ease, background 220ms ease, transform 220ms ease; }
.capability-progress button:hover i { background: #9ba7c2; }
.capability-progress button.active i { height: 5px; background: var(--blue); transform: scaleX(1.05); }

.capability-deck {
  position: relative;
  width: min(1260px, 100%);
  min-height: 0;
  flex: 1;
  margin: 0 auto;
  isolation: isolate;
}

.capability-slide {
  position: absolute;
  inset: 0;
  padding: clamp(32px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(430px, 1.18fr);
  align-items: center;
  gap: clamp(38px, 5.2vw, 78px);
  overflow: hidden;
  border: 1px solid rgba(16, 25, 49, 0.1);
  border-radius: 36px;
  box-shadow: 0 28px 75px rgba(28, 39, 73, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 6%, 0) scale(0.98);
  backface-visibility: hidden;
  will-change: transform, opacity;
  contain: paint;
  transition: opacity 320ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms step-end;
}

.capability-slide::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -220px;
  top: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%);
}

.capability-slide.is-active { z-index: 3; opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1), step-start; }
.capability-slide.is-before { transform: translate3d(0, -6%, 0) scale(0.98); }
.capability-slide.is-after { transform: translate3d(0, 6%, 0) scale(0.98); }

.capability-watchdog {
  background:
    radial-gradient(circle at 90% 13%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(145deg, #d8e0ff, #a9baff 61%, #91a7ff);
}

.capability-competitor {
  color: white;
  background:
    radial-gradient(circle at 78% 10%, rgba(110, 138, 255, 0.34), transparent 32%),
    linear-gradient(150deg, #121a36, #080e1d 68%);
}

.capability-competitor::after { background: rgba(70, 99, 225, 0.22); }
.capability-pulse {
  background:
    radial-gradient(circle at 10% 100%, rgba(202, 255, 105, 0.38), transparent 34%),
    linear-gradient(145deg, #ffffff, #f3f7ed);
}

.capability-copy,
.capability-demo { position: relative; z-index: 2; min-width: 0; }
.capability-number { position: absolute; left: 0; top: -92px; color: rgba(27, 37, 66, 0.11); font-size: 84px; font-weight: 780; letter-spacing: -0.08em; }
.capability-competitor .capability-number { color: rgba(255, 255, 255, 0.1); }
.capability-copy h3 { max-width: 520px; margin: 0; font-size: clamp(40px, 4.3vw, 64px); line-height: 0.96; font-weight: 680; letter-spacing: -0.06em; }
.capability-copy > p:not(.bento-kicker) { max-width: 540px; margin: 22px 0 0; color: #5d6578; font-size: 15px; line-height: 1.65; }
.capability-competitor .capability-copy > p:not(.bento-kicker) { color: #9ea7bb; }
.capability-competitor .bento-kicker { color: #929cb3; }
.capability-competitor .watchlist-button { margin: 27px 0 0; }
.capability-slide .watchdog-ui,
.capability-slide .competitor-ui { margin-top: 0; }
.capability-pulse .leaderboard-ui { background: rgba(249, 250, 252, 0.94); }

.capability-scroll-hint { position: absolute; z-index: 8; left: 50%; bottom: 31px; display: flex; align-items: center; gap: 10px; color: rgba(33, 43, 67, 0.5); font-size: 8px; font-weight: 820; letter-spacing: 0.14em; text-transform: uppercase; transform: translateX(-50%); pointer-events: none; }
.capability-scroll-hint i { width: 20px; height: 28px; display: block; border: 1px solid rgba(33, 43, 67, 0.24); border-radius: 999px; }
.capability-scroll-hint i::after { content: ""; width: 3px; height: 6px; margin: 5px auto 0; display: block; border-radius: 999px; background: var(--blue); animation: scrollDot 1.7s ease-in-out infinite; }
@keyframes scrollDot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(9px); } }

.bento-copy { position: relative; z-index: 3; }
.bento-kicker { margin: 0 0 18px; display: flex; align-items: center; gap: 9px; color: #586177; font-size: 9px; font-weight: 850; letter-spacing: 0.16em; }
.status-dot.coral { background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 128, 107, 0.12); }
.status-dot.lime { background: #8ecf3f; box-shadow: 0 0 0 4px rgba(142, 207, 63, 0.13); }

.watchdog-ui { position: relative; z-index: 2; margin-top: 54px; }
.watchdog-ui form {
  position: relative;
  z-index: 2;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 56px rgba(48, 65, 128, 0.2);
  backdrop-filter: blur(20px);
}

.watchdog-ui label { display: block; color: #808797; font-size: 8px; font-weight: 850; letter-spacing: 0.14em; }
.watchdog-ui textarea { width: 100%; height: 88px; margin-top: 12px; padding: 0; resize: none; outline: none; border: 0; color: #171e30; background: transparent; font-size: 15px; line-height: 1.5; font-weight: 650; }
.composer-bottom { padding-top: 13px; display: flex; align-items: center; border-top: 1px solid #e2e5ee; }
.composer-bottom > span { display: flex; align-items: center; gap: 7px; color: #858c9b; font-size: 8px; font-weight: 700; }
.composer-bottom > span i { width: 7px; height: 7px; border-radius: 50%; background: #57d69e; }
.composer-bottom button { margin-left: auto; padding: 10px 13px; border: 0; border-radius: 10px; color: white; background: var(--blue); cursor: pointer; font-size: 9px; font-weight: 790; transition: transform 180ms ease, background 180ms ease; }
.composer-bottom button:hover { background: var(--blue-deep); transform: translateY(-1px); }

.email-preview {
  width: 86%;
  margin: -2px auto 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 0 0 21px 21px;
  background: rgba(249, 250, 255, 0.92);
  box-shadow: 0 24px 42px rgba(48, 65, 128, 0.18);
  transform: translateY(10px) scale(0.97);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.email-preview.is-armed { box-shadow: 0 27px 55px rgba(48, 65, 128, 0.28), 0 0 0 5px rgba(202, 255, 105, 0.24); transform: translateY(2px) scale(1); }
.email-head { display: flex; align-items: center; gap: 10px; }
.mail-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--blue); }
.email-head p { margin: 0; }
.email-head strong,
.email-head small { display: block; }
.email-head strong { font-size: 11px; }
.email-head small { margin-top: 3px; color: #969cab; font-size: 7px; }
.email-head > b { margin-left: auto; color: #a0a6b1; font-size: 9px; letter-spacing: 0.15em; }
.email-preview h4 { margin: 22px 0 0; font-size: 17px; letter-spacing: -0.03em; }
.growth-line { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.growth-line strong { color: var(--blue); font-size: 27px; letter-spacing: -0.05em; }
.growth-line span { color: #767e8e; font-size: 8px; }
.growth-line i { height: 4px; flex: 1; border-radius: 99px; background: linear-gradient(90deg, var(--blue) 0 58%, #e0e5f1 58%); }
.email-preview > p { margin: 13px 0 0; color: #777e8e; font-size: 9px; line-height: 1.55; }

.bento-title-row { display: flex; flex-direction: column; align-items: flex-start; }
.watchlist-button { margin: 0 0 23px; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 99px; color: #9da6b9; background: rgba(255, 255, 255, 0.055); cursor: pointer; font-size: 8px; font-weight: 760; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.watchlist-button.active { color: #29331c; border-color: rgba(202, 255, 105, 0.4); background: var(--lime); }
.competitor-ui { position: relative; z-index: 2; margin-top: 40px; }
.chat-question { width: 92%; margin-left: auto; padding: 15px 17px; border-radius: 17px 17px 5px 17px; color: #eff2f8; background: #253154; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.19); }
.chat-question > span { color: #7d88a2; font-size: 7px; font-weight: 850; letter-spacing: 0.14em; }
.chat-question p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.chat-question b { color: var(--periwinkle); }

.chat-answer { margin-top: 12px; padding: 19px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 5px 18px 18px 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px); }
.ai-label { display: flex; align-items: center; gap: 7px; }
.ai-label > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--blue); font-size: 10px; }
.ai-label strong { font-size: 9px; }
.ai-label small { margin-left: auto; color: #7e89a0; font-size: 7px; }
.chat-answer > p { margin: 17px 0; color: #b2b9c8; font-size: 10px; line-height: 1.6; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-cloud span { padding: 8px 9px; border: 1px solid rgba(159, 178, 255, 0.14); border-radius: 9px; color: #aeb9dd; background: rgba(89, 114, 210, 0.11); font-size: 7px; }
.tag-cloud b { margin-left: 5px; color: white; }
.change-feed { margin: 14px 0 0 12px; padding: 13px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; border-left: 1px solid rgba(255, 255, 255, 0.13); color: #8e98ad; font-size: 7px; }
.change-feed span { display: flex; align-items: center; gap: 7px; }
.change-feed span i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.change-feed b { grid-column: 1; color: #d7dbe5; font-size: 9px; }
.change-feed small { grid-column: 2; grid-row: 1; }

.pulse-copy .bento-kicker { color: #707888; }
.pulse-copy h3 { font-size: clamp(42px, 4.2vw, 63px); }
.pulse-note { margin-top: 31px; display: flex; align-items: center; gap: 12px; }
.pulse-note > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #324122; background: var(--lime); font-size: 18px; }
.pulse-note p { margin: 0; }
.pulse-note strong,
.pulse-note small { display: block; }
.pulse-note strong { font-size: 10px; }
.pulse-note small { margin-top: 4px; color: #9197a4; font-size: 7px; }

.leaderboard-ui { overflow: hidden; border: 1px solid #e0e4ed; border-radius: 23px; background: #f9fafc; box-shadow: 0 24px 54px rgba(29, 42, 77, 0.1); }
.leaderboard-top { padding: 14px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #e2e6ee; background: white; }
.leaderboard-tabs { padding: 4px; display: flex; gap: 4px; border-radius: 11px; background: #f0f2f6; }
.leaderboard-tabs button { padding: 9px 11px; border: 0; border-radius: 8px; color: #858c9a; background: transparent; cursor: pointer; font-size: 8px; font-weight: 760; }
.leaderboard-tabs button.active { color: var(--ink); background: white; box-shadow: 0 4px 12px rgba(30, 42, 74, 0.08); }
.live-badge { margin-left: auto; display: flex; align-items: center; gap: 7px; color: #7e8594; font-size: 7px; font-weight: 690; }
.live-badge i { width: 6px; height: 6px; }
.leaderboard-head,
.leaderboard-row { display: grid; grid-template-columns: 55px minmax(145px, 1.5fr) minmax(80px, 0.7fr) minmax(95px, 0.7fr); align-items: center; }
.leaderboard-head { padding: 14px 18px 9px; color: #9aa0ac; font-size: 6px; font-weight: 850; letter-spacing: 0.13em; }
.leaderboard-row { min-height: 62px; padding: 8px 18px; border-top: 1px solid #e7e9ef; color: #818896; font-size: 9px; }
.leaderboard-row:first-child { border-top: 0; }
.leaderboard-row > span:first-child { color: #a1a7b2; font-size: 7px; font-weight: 760; }
.row-name { display: flex; align-items: center; gap: 9px; }
.row-name .app-glyph { width: 32px; height: 32px; border-radius: 9px; }
.row-name .app-glyph i { width: 15px; height: 15px; left: 7px; top: 7px; border-width: 2px; }
.row-name .app-glyph b { width: 7px; height: 7px; right: 6px; bottom: 6px; }
.row-name strong { color: #222a3b; font-size: 10px; }
.growth-value { color: #388b63; font-weight: 780; }
.competition { width: max-content; padding: 6px 8px; display: block; border-radius: 99px; color: #447545; background: #e9f6dd; font-size: 7px; font-weight: 760; }
.competition-1 { color: #806b3e; background: #fff0d1; }
.model-note { margin: 0; padding: 11px 18px; border-top: 1px solid #e2e6ee; color: #9aa0ad; background: white; font-size: 7px; }

.workflow-section {
  position: relative;
  padding: 155px 32px 170px;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 50% 105%, rgba(74, 105, 255, 0.31), transparent 40%),
    var(--ink);
}

.workflow-heading { width: min(1180px, 100%); margin: 0 auto; text-align: center; }
.workflow-heading .eyebrow { color: var(--periwinkle); }
.workflow-heading h2 { margin: 0; font-size: clamp(55px, 7vw, 99px); line-height: 0.94; letter-spacing: -0.075em; }
.workflow-heading h2 em { color: var(--lime); font-family: var(--font-sans); font-style: normal; font-weight: var(--type-heading-weight); }
.workflow-grid { width: min(1240px, 100%); margin: 85px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.workflow-card { position: relative; min-height: 430px; padding: 30px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 28px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)); cursor: pointer; transition: transform 240ms cubic-bezier(.2,.75,.25,1), border-color 240ms ease, box-shadow 240ms ease; }
.workflow-card::before { content: "↗"; position: absolute; z-index: 3; right: 26px; bottom: 26px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: var(--lime); font-size: 17px; font-weight: 850; opacity: 0; transform: translate(-6px, 6px); transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.75,.25,1); }
.workflow-card::after { content: ""; position: absolute; width: 240px; height: 240px; left: -100px; bottom: -120px; border-radius: 50%; background: rgba(114, 91, 238, 0.15); }
.workflow-card:nth-child(2)::after { background: rgba(255, 128, 107, 0.12); }
.workflow-card:nth-child(3)::after { background: rgba(202, 255, 105, 0.11); }
.workflow-card:hover { transform: translateY(-8px); border-color: rgba(94, 110, 255, 0.35); box-shadow: 0 34px 78px rgba(30, 41, 75, 0.15); }
.workflow-card:hover::before,
.workflow-card:focus-visible::before { opacity: 1; transform: translate(0, 0); }
.workflow-card:focus-visible { outline: 3px solid rgba(54, 92, 255, 0.44); outline-offset: 5px; }
.workflow-card:active { transform: translateY(-2px) scale(.995); }
.step-top { display: flex; align-items: center; color: #768098; font-size: 10px; font-weight: 850; letter-spacing: 0.14em; }
.step-top .app-glyph { margin-left: auto; }
.workflow-grid h3 { max-width: 280px; margin: 70px 0 0; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -0.055em; }
.workflow-grid p { margin: 20px 0 0; color: #a1a9bb; font-size: 13px; line-height: 1.65; }
.step-chip { position: relative; z-index: 2; width: max-content; margin-top: auto; padding: 9px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; color: #9da6ba; background: rgba(255, 255, 255, 0.05); font-size: 7px; font-weight: 820; letter-spacing: 0.1em; }
.step-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(202, 255, 105, 0.1); }

.comparison-section { padding: 160px 32px 170px; background: #f5f6fa; }
.comparison-heading { width: min(1240px, 100%); margin: 0 auto; }
.comparison-heading h2 { margin: 0; max-width: 980px; font-size: clamp(55px, 7.2vw, 102px); line-height: 0.92; letter-spacing: -0.075em; }
.comparison-heading > p:last-child { margin: 27px 0 0; color: #697081; font-size: 17px; }
.comparison-table { width: min(1240px, 100%); margin: 72px auto 0; overflow: hidden; border: 1px solid #dfe2e9; border-radius: 26px; background: white; box-shadow: 0 28px 70px rgba(30, 41, 75, 0.08); }
.comparison-row { min-width: 900px; display: grid; grid-template-columns: 0.72fr 1fr 1fr 1.12fr; }
.comparison-row > * { min-height: 108px; padding: 24px; display: flex; align-items: center; border-right: 1px solid #e4e7ed; }
.comparison-row > *:last-child { border-right: 0; }
.comparison-row + .comparison-row { border-top: 1px solid #e4e7ed; }
.comparison-header > * { min-height: 78px; color: #8a919f; font-size: 8px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.comparison-header .brand-lockup { color: var(--ink); font-size: 15px; text-transform: none; }
.comparison-header .brand-mark { width: 24px; height: 24px; }
.comparison-row > strong { color: #273043; font-size: 11px; }
.comparison-row > span { gap: 10px; color: #727a8b; font-size: 10px; line-height: 1.55; }
.comparison-row .applode-column { color: #1f2940; background: #eef2ff; font-weight: 680; }
.minus-icon,
.check-icon { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #9097a6; background: #f0f2f5; font-style: normal; }
.check-icon { color: #1f522f; background: var(--lime); }

.pricing-section {
  position: relative;
  padding: 155px 32px 175px;
  overflow: hidden;
  background: #eef1ff;
}

.pricing-heading { width: min(1050px, 100%); margin: 0 auto; text-align: center; }
.pricing-heading h2 { margin: 0; font-size: clamp(58px, 7vw, 99px); line-height: 0.92; letter-spacing: -0.075em; }
.pricing-heading > p:last-child { width: min(640px, 100%); margin: 25px auto 0; color: #687085; font-size: 16px; line-height: 1.65; }
.pricing-grid { width: min(1320px, 100%); margin: 78px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 16px; }
.price-card { position: relative; padding: 34px; display: flex; flex-direction: column; border: 1px solid rgba(31, 44, 81, 0.11); border-radius: 27px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 25px 60px rgba(41, 53, 99, 0.1); backdrop-filter: blur(18px); }
.featured-price { color: var(--ink); border-color: rgba(49, 93, 255, 0.34); background: #f7f9ff; box-shadow: inset 0 3px 0 var(--blue), 0 32px 70px rgba(49, 93, 255, 0.14); transform: translateY(-13px); }
.popular-badge { position: absolute; top: 16px; right: 16px; padding: 7px 9px; border-radius: 99px; color: #334022; background: var(--lime); font-size: 7px; font-weight: 850; letter-spacing: 0.1em; }
.pricing-card-heading { min-height: 49px; display: flex; align-items: center; gap: 12px; }
.pricing-plan-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #5f43db; background: #eeeaff; }
.pricing-plan-icon svg { width: 21px; height: 21px; }
.pricing-plan-icon-coral { color: #d85e49; background: #fff0ec; }
.pricing-plan-icon-lime { color: #4f8028; background: #eff8dc; }
.pricing-card-status { display: inline-block; margin-top: 6px; color: #8791a3; font-size: 9px; font-weight: 700; }
.featured-price .pricing-card-status { color: #748099; }
.plan-name { margin: 0; color: #727a8c; font-size: 9px; font-weight: 850; letter-spacing: 0.15em; }
.featured-price .plan-name { color: #59667f; }
.price { min-height: 103px; margin-top: 39px; }
.price strong,
.price span { display: block; }
.price strong { font-size: clamp(39px, 4vw, 57px); line-height: 0.95; letter-spacing: -0.06em; }
.price span { margin-top: 9px; color: #8c94a4; font-size: 9px; }
.price-copy strong { font-size: clamp(31px, 3vw, 43px); }
.featured-price .price span { color: #748099; }
.price-card > p:not(.plan-name) { min-height: 54px; margin: 23px 0 0; color: #737b8b; font-size: 12px; line-height: 1.55; }
.featured-price > p:not(.plan-name) { color: #58657c; }
.price-card > a { margin-top: 25px; padding: 14px 16px; display: flex; align-items: center; border: 1px solid #dfe3eb; border-radius: 12px; color: #283044; background: white; font-size: 11px; font-weight: 790; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.price-card > a svg { width: 17px; height: 17px; margin-left: auto; color: var(--blue); transition: transform 180ms ease; }
.price-card > a:hover { transform: translateY(-2px); border-color: rgba(49, 93, 255, .34); box-shadow: 0 10px 20px rgba(49, 93, 255, .11); }
.price-card > a:hover svg { transform: translateX(3px); }
.featured-price > a { color: white; border-color: rgba(255, 255, 255, 0.08); background: var(--blue); }
.featured-price > a svg { color: white; }
.price-card ul { margin: 29px 0 0; padding: 24px 0 0; display: grid; gap: 13px; border-top: 1px solid #e2e5eb; list-style: none; color: #555e70; font-size: 10px; }
.featured-price ul { color: #4e5a70; border-top-color: rgba(49, 93, 255, 0.14); }
.price-card li { position: relative; padding-left: 21px; line-height: 1.5; }
.price-card li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 5px; color: #28411e; background: var(--lime); font-size: 7px; font-weight: 900; }
.pricing-section-link { width: max-content; margin: 30px auto 0; display: flex; align-items: center; gap: 8px; color: #44547f; font-size: 11px; font-weight: 800; }
.pricing-section-link span { color: var(--blue); transition: transform 180ms ease; }
.pricing-section-link:hover span { transform: translateX(3px); }

.faq-section { padding: 160px 32px; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: start; gap: 110px; background: #f8f9fc; }
.faq-heading { max-width: 610px; justify-self: end; }
.faq-heading h2 { margin: 0; font-size: clamp(53px, 6vw, 86px); line-height: 0.94; letter-spacing: -0.07em; }
.faq-heading > p:last-child { margin: 25px 0 0; color: #697080; font-size: 15px; line-height: 1.65; }
.faq-list { width: min(690px, 100%); }
.faq-list details { border-top: 1px solid #dfe3ea; }
.faq-list details:last-child { border-bottom: 1px solid #dfe3ea; }
.faq-list summary { min-height: 88px; display: grid; grid-template-columns: 32px 1fr 28px; align-items: center; gap: 15px; color: #242d40; cursor: pointer; list-style: none; font-size: 14px; font-weight: 740; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: 0.1em; }
.faq-list summary > b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #6f7788; background: #edf0f6; font-size: 13px; transition: transform 180ms ease, background 180ms ease; }
.faq-list details[open] summary > b { color: #263a19; background: var(--lime); transform: rotate(45deg); }
.faq-list details > p { margin: -5px 40px 29px 47px; color: #737b8a; font-size: 12px; line-height: 1.7; }

.final-cta {
  position: relative;
  min-height: 760px;
  padding: 130px 6vw;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 79% 52%, rgba(70, 103, 255, 0.38), transparent 27%),
    linear-gradient(145deg, #111a37, #070c18 67%);
}

.final-cta::before { content: ""; position: absolute; width: 660px; height: 660px; right: -170px; top: 10%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255, 255, 255, 0.018), 0 0 0 180px rgba(255, 255, 255, 0.012); }
.cta-grid { opacity: 0.08; mask-image: linear-gradient(90deg, black, transparent 60%); }
.final-copy { position: relative; z-index: 4; width: min(850px, 70%); }
.final-copy > p { margin: 0 0 27px; color: var(--periwinkle); font-size: 10px; font-weight: 850; letter-spacing: 0.16em; }
.final-copy h2 { margin: 0; font-size: clamp(55px, 6.6vw, 96px); line-height: 0.92; letter-spacing: -0.075em; }
.final-copy h2 em { color: var(--lime); font-family: var(--font-sans); font-style: normal; font-weight: var(--type-heading-weight); }
.final-copy > span { margin-top: 25px; display: block; color: #a2abbd; font-size: 16px; }
.cta-light { margin-top: 34px; color: var(--ink); background: white; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25); }
.cta-light > b { color: white; background: var(--blue); }
.cta-light:hover { color: white; }
.final-title-line,
.final-brand-line { display: block; }
.final-brand-line { margin-top: 0.08em; }
.final-brand-wordmark { width: min(540px, 100%); height: auto; display: block; }
.final-copy .cta-hero-match { margin-top: 38px; }
.primary-cta.cta-hero-match {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(42, 61, 122, 0.16), inset 0 0 0 1px rgba(49, 93, 255, 0.1);
}
.primary-cta.cta-hero-match > span {
  color: #ffffff;
  background: var(--blue);
}
.primary-cta.cta-hero-match:hover {
  color: var(--ink);
  background: #f8f9ff;
  box-shadow: 0 22px 52px rgba(42, 61, 122, 0.22), inset 0 0 0 1px rgba(49, 93, 255, 0.14);
}
.goldmine-asset { position: absolute; z-index: 3; width: min(660px, 48vw); right: -1%; bottom: 1%; filter: drop-shadow(0 45px 65px rgba(0, 0, 0, 0.34)); animation: goldmine-float 5.5s ease-in-out infinite; }
@keyframes goldmine-float { 0%, 100% { transform: translateY(5px) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.cta-orbit { position: absolute; z-index: 4; }
.orbit-one { right: 5%; top: 15%; transform: rotate(10deg); }
.orbit-two { right: 45%; bottom: 13%; transform: rotate(-12deg) scale(0.84); }

.site-footer { padding: 72px 6vw 30px; display: grid; grid-template-columns: 1.8fr repeat(3, 0.7fr); gap: 45px; color: #7b8290; background: #060a13; }
.footer-brand .brand-lockup { color: white; }
.footer-brand .brand-mark { background: white; }
.footer-brand .brand-mark i { background: var(--ink); }
.footer-brand .brand-mark i:last-child { background: var(--blue); }
.footer-brand p { max-width: 310px; margin: 17px 0 0; font-size: 11px; line-height: 1.6; }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 10px; }
.footer-links strong { margin-bottom: 5px; color: #d4d8e0; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; }
.footer-links a:hover { color: white; }
.footer-links span { color: #555c6b; }
.footer-bottom { grid-column: 1 / -1; margin-top: 35px; padding-top: 24px; display: flex; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #4f5664; font-size: 8px; }
.footer-bottom span:last-child { margin-left: auto; }

@media (max-width: 1180px) {
  .edge-phone { opacity: 0.76; }
  .edge-phone-left { left: -105px; }
  .edge-phone-right { right: -100px; }
  .capability-slide { grid-template-columns: minmax(270px, 0.8fr) minmax(390px, 1.2fr); gap: 40px; }
  .faq-section { gap: 60px; }
}

@media (max-width: 900px) {
  .site-header { width: calc(100% - 36px); }
  .site-header nav { display: none; }
  .site-header { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 920px; padding-top: 120px; align-items: start; }
  .hero-copy { margin-top: 42px; transform: none; }
  .hero h1 { font-size: clamp(55px, 10.5vw, 82px); }
  .hero-subtitle { max-width: 670px; }
  .edge-phone { width: 170px; height: 340px; padding: 51px 17px 18px; border-width: 6px; border-radius: 39px; top: auto; bottom: -115px; opacity: 0.95; }
  .edge-phone-left { left: 7%; }
  .edge-phone-right { right: 7%; }
  .phone-island { top: 12px; width: 60px; height: 17px; }
  .phone-app-row { margin-top: 17px; }
  .phone-app-row .app-glyph { width: 40px; height: 40px; }
  .mini-chart { height: 82px; margin-top: 17px; }
  .mini-question { margin-top: 17px; }
  .mini-answer { margin-bottom: 12px; }
  .scroll-cue { display: none; }
  .proof-heading { grid-template-columns: 1fr; gap: 25px; }
  .proof-heading > p { margin: 0; }
  .proof-cards { grid-template-columns: 1fr; }
  .proof-card { min-height: 280px; }
  .capability-stage { padding: 17px 20px 20px; }
  .capability-stage-header { min-height: 78px; margin-bottom: 12px; }
  .capability-stage-header h2 { font-size: 29px; }
  .capability-slide { padding: 34px; grid-template-columns: minmax(230px, 0.76fr) minmax(350px, 1.24fr); gap: 30px; border-radius: 29px; }
  .capability-number { top: -68px; font-size: 62px; }
  .capability-copy h3,
  .pulse-copy h3 { font-size: clamp(35px, 5.2vw, 46px); }
  .capability-copy > p:not(.bento-kicker) { margin-top: 16px; font-size: 13px; }
  .capability-scroll-hint { bottom: 24px; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-card { min-height: 360px; }
  .workflow-grid h3 { margin-top: 48px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .featured-price { transform: none; }
  .faq-section { grid-template-columns: 1fr; }
  .faq-heading { max-width: 720px; justify-self: start; }
  .faq-list { max-width: 720px; }
  .final-cta { min-height: 900px; align-items: start; }
  .final-copy { width: 100%; }
  .goldmine-asset { width: 620px; max-width: 84vw; right: -4%; bottom: -3%; opacity: 0.82; }
  .site-footer { grid-template-columns: 1.4fr repeat(3, 0.8fr); gap: 30px 22px; }
}

@media (max-width: 780px) {
  .capability-stage { padding: 13px 14px 15px; }
  .capability-stage-header { min-height: 70px; margin-bottom: 10px; }
  .capability-stage-header .eyebrow { margin-bottom: 5px; font-size: 7px; }
  .capability-stage-header h2 { font-size: clamp(22px, 5.5vw, 28px); }
  .capability-progress { gap: 10px; }
  .capability-progress > span { display: none; }
  .capability-progress button { width: 24px; }
  .capability-slide { padding: 24px 20px 29px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 18px; border-radius: 25px; }
  .capability-number { display: none; }
  .capability-copy h3,
  .pulse-copy h3 { max-width: 520px; font-size: clamp(31px, 7vw, 39px); line-height: 0.98; }
  .capability-copy > p:not(.bento-kicker) { max-width: 620px; margin-top: 12px; font-size: 12px; line-height: 1.48; }
  .capability-copy .bento-kicker { margin-bottom: 10px; font-size: 7px; }
  .capability-demo { min-height: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .capability-slide .watchdog-ui,
  .capability-slide .competitor-ui { width: min(560px, 100%); margin: 0 auto; }
  .capability-slide .leaderboard-ui { width: min(620px, 100%); margin: 0 auto; }
  .capability-competitor .watchlist-button { position: absolute; right: 0; top: -3px; margin: 0; }
  .pulse-note { display: none; }
  .capability-scroll-hint { display: none; }
}

@media (max-width: 640px) {
  .site-header { height: 74px; }
  .brand-lockup { font-size: 17px; }
  .brand-logo-header { width: 110px; }
  .hero-brand-line { gap: .12em; font-size: .82em; }
  .brand-mark { width: 25px; height: 25px; }
  .sign-in { padding: 9px 11px; }
  .hero { min-height: 860px; padding: 106px 18px 88px; }
  .hero-copy { margin-top: 14px; }
  .hero-proof { margin-bottom: 23px; font-size: 9px; }
  .hero h1 { font-size: clamp(44px, 12vw, 54px); line-height: 0.98; }
  .hero-assistant-title .hero-title-line:last-child { font-size: 0.6em; letter-spacing: -0.035em; }
  .hero-subtitle { margin-top: 24px; font-size: 15px; }
  .primary-cta { padding: 14px 15px 14px 18px; gap: 20px; font-size: 13px; }
  .edge-phone { width: 145px; height: 285px; bottom: -95px; border-radius: 34px; }
  .edge-phone-left { left: -11px; }
  .edge-phone-right { right: -12px; }
  .phone-app-row span,
  .phone-stat,
  .mini-token-row b:nth-child(3) { display: none; }
  .mini-chart { height: 75px; padding: 12px 8px 8px; }
  .mini-question { padding: 12px; font-size: 10px; }
  .mini-answer { padding: 10px; }
  .proof-section,
  .workflow-section,
  .comparison-section,
  .pricing-section { padding: 105px 18px 115px; }
  .capabilities-section { height: 300svh; padding: 0; }
  .proof-section { padding-left: 0; padding-right: 0; }
  .proof-heading,
  .proof-cards,
  .proof-disclaimer { width: calc(100% - 36px); }
  .proof-heading h2,
  .section-heading h2,
  .workflow-heading h2,
  .comparison-heading h2,
  .pricing-heading h2,
  .faq-heading h2 { font-size: clamp(46px, 13vw, 65px); }
  .proof-heading > p,
  .section-heading > p:last-child,
  .comparison-heading > p:last-child,
  .pricing-heading > p:last-child { font-size: 14px; }
  .ticker-app { width: 174px; }
  .ticker-app img { width: 43px; height: 43px; }
  .proof-card { padding: 23px; }
  .proof-card h3 { margin-top: 38px; }
  .capability-stage { padding: 10px 10px 12px; }
  .capability-stage-header { min-height: 67px; padding: 0 4px; }
  .capability-stage-header h2 { font-size: 21px; letter-spacing: -0.04em; }
  .capability-progress button { width: 20px; }
  .capability-slide { padding: 21px 16px 24px; gap: 13px; border-radius: 22px; }
  .capability-copy h3,
  .pulse-copy h3 { font-size: clamp(29px, 8.5vw, 36px); }
  .capability-copy > p:not(.bento-kicker) { font-size: 11px; }
  .watchdog-ui form { padding: 14px; border-radius: 15px; }
  .watchdog-ui textarea { height: 58px; margin-top: 8px; font-size: 12px; }
  .composer-bottom { padding-top: 9px; }
  .composer-bottom button { padding: 8px 9px; }
  .email-preview { width: 92%; padding: 13px; }
  .email-preview h4 { margin-top: 13px; font-size: 14px; }
  .growth-line { margin-top: 8px; }
  .growth-line strong { font-size: 21px; }
  .email-preview > p { display: none; }
  .capability-competitor .watchlist-button { padding: 7px 8px; font-size: 7px; }
  .chat-question { width: 97%; }
  .chat-question { padding: 11px 13px; }
  .chat-answer { margin-top: 8px; padding: 13px; }
  .chat-answer > p { margin: 11px 0; }
  .change-feed { margin-top: 8px; padding: 9px; }
  .leaderboard-ui { margin: 0; border-radius: 16px; }
  .leaderboard-top { align-items: flex-start; }
  .leaderboard-tabs { flex: 1; }
  .leaderboard-tabs button { flex: 1; padding: 8px 6px; }
  .live-badge { display: none; }
  .leaderboard-head,
  .leaderboard-row { grid-template-columns: 35px minmax(110px, 1.4fr) 70px 78px; }
  .leaderboard-head { padding-left: 10px; padding-right: 10px; }
  .leaderboard-row { min-height: 48px; padding-left: 10px; padding-right: 10px; }
  .model-note { padding: 8px 10px; }
  .workflow-grid { margin-top: 55px; }
  .workflow-card { min-height: 340px; padding: 24px; }
  .comparison-table { margin-top: 50px; overflow-x: auto; border-radius: 18px; }
  .comparison-row { min-width: 840px; }
  .price-card { padding: 28px; }
  .faq-section { padding: 105px 18px 115px; gap: 50px; }
  .faq-list summary { min-height: 78px; font-size: 12px; }
  .faq-list details > p { margin-left: 47px; margin-right: 15px; }
  .final-cta { min-height: 860px; padding: 105px 18px 90px; }
  .final-copy h2 { font-size: clamp(47px, 13.5vw, 66px); }
  .final-copy > span { font-size: 13px; line-height: 1.55; }
  .goldmine-asset { width: 520px; max-width: 105vw; right: -22%; bottom: -1%; opacity: 0.74; }
  .orbit-two { display: none; }
  .site-footer { padding: 58px 22px 26px; grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 14px; }
  .footer-links:nth-of-type(3) { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .footer-bottom span:last-child { margin-left: 0; }
}

.proof-market-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.proof-market-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #dbe2f0;
  background: rgba(255, 255, 255, 0.07);
  font-size: 9px;
  font-weight: 760;
}

.proof-market-pill .store-logo {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.proof-copy-line {
  display: block;
}

.hero-proof.market-coverage {
  width: max-content;
  padding: 0;
  gap: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-platforms {
  margin: 24px auto 0;
  opacity: .86;
}

.hero-proof.market-coverage > .market-pill {
  width: auto;
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(20, 31, 59, 0.1);
  border-radius: 999px;
  color: #646b7c;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
  box-shadow: 0 6px 14px rgba(42, 61, 122, 0.045);
  backdrop-filter: blur(14px);
}

.hero-proof.market-coverage > .market-pill > .store-logo {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .hero-platforms {
    margin-top: 19px;
  }

  .hero-proof.market-coverage > .market-pill {
    height: 32px;
    padding: 0 9px;
    font-size: 9px;
  }

  .hero-proof.market-coverage > .market-pill > .store-logo {
    width: 17px;
    height: 17px;
  }
}

/* Capability slides use three distinct compositions instead of one repeated outer card. */
.capability-slide {
  padding: clamp(32px, 4.4vw, 64px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.capability-slide::after {
  display: none;
}

.capability-copy {
  align-self: center;
  max-width: 540px;
}

.capability-demo {
  align-self: center;
  min-width: 0;
}

.capability-watchdog > .capability-demo,
.capability-competitor > .capability-demo {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(16, 25, 49, 0.1);
  border-radius: 32px;
  box-shadow: 0 28px 75px rgba(28, 39, 73, 0.12);
}

.capability-watchdog > .capability-demo {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(145deg, #d8e0ff, #a9baff 61%, #91a7ff);
}

.capability-competitor > .capability-demo {
  color: #ffffff;
  background:
    radial-gradient(circle at 78% 10%, rgba(110, 138, 255, 0.34), transparent 32%),
    linear-gradient(150deg, #121a36, #080e1d 68%);
}

.capability-competitor {
  color: var(--ink);
  background: transparent;
}

.capability-competitor .capability-copy {
  color: var(--ink);
}

.capability-competitor .capability-number {
  color: rgba(27, 37, 66, 0.11);
}

.capability-competitor .capability-copy > p:not(.bento-kicker) {
  color: #5d6578;
}

.capability-competitor .bento-kicker {
  color: #586177;
}

.capability-slide .watchdog-ui,
.capability-slide .competitor-ui {
  margin-top: 0;
}

.capability-pulse > .capability-demo {
  min-width: 0;
}

.capability-pulse .leaderboard-ui {
  border-radius: 32px;
  box-shadow: 0 28px 75px rgba(28, 39, 73, 0.12);
}

.capability-competitor .capability-copy {
  order: 2;
}

.capability-competitor .capability-demo {
  order: 1;
}

@media (max-width: 780px) {
  .capability-slide {
    padding: 24px 20px 29px;
  }

  .capability-competitor .capability-copy,
  .capability-competitor .capability-demo {
    order: initial;
  }

  .capability-watchdog > .capability-demo,
  .capability-competitor > .capability-demo {
    padding: 18px;
    border-radius: 25px;
  }

  .capability-pulse .leaderboard-ui {
    border-radius: 25px;
  }
}

/* Keep the sections in place, but exchange their light/dark visual themes. */
.workflow-section {
  color: var(--ink);
  background: #f5f6fa;
}

.workflow-heading .eyebrow {
  color: var(--blue);
}

.workflow-heading h2 {
  color: var(--ink);
}

.workflow-heading h2 em {
  color: var(--blue);
}

.workflow-card {
  color: var(--ink);
  border-color: #dfe2e9;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(30, 41, 75, 0.08);
}

.workflow-card::after {
  background: rgba(140, 114, 255, 0.12);
}

.workflow-card:nth-child(2)::after {
  background: rgba(255, 128, 107, 0.12);
}

.workflow-card:nth-child(3)::after {
  background: rgba(202, 255, 105, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .workflow-card,
  .workflow-card::before { transition: none; }
}

.step-top {
  color: #8a919f;
}

.workflow-grid h3 {
  color: var(--ink);
}

.workflow-grid p {
  color: #697081;
}

.step-chip {
  color: #727a8b;
  border-color: #dfe3eb;
  background: #f0f2f5;
}

.step-chip i {
  background: #8ecf3f;
  box-shadow: 0 0 0 3px rgba(142, 207, 63, 0.13);
}

.comparison-section {
  color: #ffffff;
  background: var(--ink);
}

.comparison-heading .eyebrow {
  color: var(--periwinkle);
}

.comparison-heading h2 {
  color: #ffffff;
}

.comparison-heading > p:last-child {
  color: #a1a9bb;
}

.comparison-table {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 26px;
  background: #111a34;
  box-shadow: none;
}

.comparison-row > * {
  border-color: rgba(255, 255, 255, 0.1);
}

.comparison-row + .comparison-row {
  border-color: rgba(255, 255, 255, 0.1);
}

.comparison-header > * {
  color: #929cb3;
}

.comparison-header .brand-lockup {
  color: #ffffff;
}

.comparison-row > strong {
  color: #ffffff;
}

.comparison-row > span {
  color: #aeb7c8;
}

.comparison-row .applode-column {
  color: #ffffff;
  background: #19254d;
}

.minus-icon,
.check-icon {
  color: #909aae;
  background: rgba(255, 255, 255, 0.08);
}

.check-icon {
  color: #26341d;
  background: var(--lime);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track,
  .goldmine-asset { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* FAQ is a centered reading section, not a two-column intro + list. */
.faq-section {
  display: block;
  padding: 150px 32px 165px;
}

.faq-heading {
  max-width: 820px;
  margin: 0 auto 66px;
  text-align: center;
}

.faq-heading h2 {
  margin: 0;
}

.faq-heading > p:first-child {
  margin-bottom: 22px;
}

.faq-list {
  width: min(900px, 100%);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .faq-heading {
    max-width: 720px;
    margin-right: auto;
    margin-bottom: 50px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .faq-section {
    padding: 105px 18px 115px;
  }

  .faq-heading {
    margin-bottom: 42px;
  }
}

/* Keep section headlines readable and consistent across the long page. */
.proof-heading h2 {
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.workflow-heading h2 {
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.workflow-heading h2 em {
  color: var(--blue);
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
}

.comparison-heading h2 {
  font-size: clamp(48px, 5.5vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.pricing-heading h2 {
  font-size: clamp(48px, 5.6vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.faq-heading h2 {
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

@media (max-width: 640px) {
  .proof-heading h2,
  .workflow-heading h2,
  .comparison-heading h2,
  .pricing-heading h2,
  .faq-heading h2 {
    font-size: clamp(38px, 11vw, 54px);
    line-height: 0.99;
  }
}

/* Final polish after the shortened comparison copy and section-heading audit. */
.comparison-header > * {
  font-size: 9px;
}

.comparison-row > strong {
  font-size: 12px;
}

.comparison-row > span {
  font-size: 11px;
}

.final-copy {
  width: min(800px, 68%);
}

.final-copy h2 {
  font-size: clamp(48px, 5.7vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.final-copy h2 em {
  font-size: 0.98em;
}

@media (max-width: 640px) {
  .final-copy {
    width: 100%;
  }

  .final-copy h2 {
    font-size: clamp(42px, 12vw, 58px);
  }
}

/* Public typography system: one display/body family, one data family, one editorial accent. */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}

button,
textarea,
input,
select { font-family: inherit; }

.site-header nav,
.sign-in,
.primary-cta,
.workflow-card h3,
.price-card,
.faq-list summary,
.footer-links,
.proof-market-pill,
.market-pill {
  font-family: var(--font-sans);
}

.site-header nav { font-weight: var(--type-ui-weight); letter-spacing: -0.012em; }
.sign-in,
.primary-cta { font-weight: var(--type-ui-weight); letter-spacing: -0.018em; }

.hero h1,
.proof-heading h2,
.capability-stage-header h2,
.capability-copy h3,
.pulse-copy h3,
.workflow-heading h2,
.comparison-heading h2,
.pricing-heading h2,
.faq-heading h2,
.final-copy h2 {
  font-family: var(--font-sans);
  font-weight: var(--type-heading-weight);
  font-synthesis: none;
  text-wrap: balance;
}

.hero h1 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--type-display-weight);
  letter-spacing: -0.06em;
}

.proof-heading h2,
.workflow-heading h2,
.comparison-heading h2,
.pricing-heading h2,
.faq-heading h2,
.final-copy h2 {
  letter-spacing: -0.052em;
}

.capability-stage-header h2 { font-weight: var(--type-heading-weight); letter-spacing: -0.035em; }
.capability-copy h3,
.pulse-copy h3 { font-weight: var(--type-feature-weight); letter-spacing: -0.045em; }

.hero-brand-line > em,
.workflow-heading h2 em,
.pricing-heading h2 em,
.final-copy h2 em {
  font-family: var(--font-editorial);
  font-style: normal;
  font-weight: var(--type-heading-weight);
  letter-spacing: -0.04em;
}

.hero-subtitle,
.proof-heading > p,
.capability-copy > p:not(.bento-kicker),
.workflow-grid p,
.comparison-heading > p:last-child,
.pricing-heading > p:last-child,
.price-card > p:not(.plan-name),
.price-card li,
.faq-list details > p,
.final-copy > span,
.footer-brand p {
  font-family: var(--font-sans);
  font-weight: var(--type-body-weight);
  letter-spacing: -0.012em;
}

.eyebrow,
.phone-label,
.proof-card-top,
.proof-disclaimer,
.capability-progress,
.capability-number,
.capability-scroll-hint,
.bento-kicker,
.watchdog-ui label,
.email-head small,
.leaderboard-head,
.leaderboard-row > span:first-child,
.step-top,
.step-chip,
.plan-name,
.popular-badge,
.comparison-header > *,
.footer-links strong,
.footer-bottom {
  font-family: var(--font-mono);
  font-weight: var(--type-ui-weight);
  font-variant-numeric: tabular-nums;
}

.eyebrow { font-size: 10px; letter-spacing: .16em; }
.capability-progress > span { font-size: 10px; font-weight: var(--type-ui-weight); }
.capability-number { font-weight: var(--type-ui-weight); }
.proof-card-top,
.bento-kicker,
.step-top,
.plan-name { font-weight: var(--type-ui-weight); }

.proof-card h3,
.email-preview h4,
.chat-question p,
.chat-answer,
.leaderboard-row,
.comparison-row,
.price,
.pricing-section-link {
  font-family: var(--font-sans);
}

.proof-card h3,
.email-preview h4 { font-weight: var(--type-feature-weight); letter-spacing: -0.035em; }
.proof-metric strong,
.growth-line strong,
.price strong { font-variant-numeric: tabular-nums; font-weight: var(--type-feature-weight); }

/* D1 typography system: one brand-aligned family with five stable roles. */
.hero-actions p,
.proof-heading > p,
.capability-copy > p:not(.bento-kicker),
.workflow-card p,
.comparison-heading > p,
.price-card p,
.price-card li,
.faq-list details > p,
.final-copy > span,
.footer-brand p {
  font-weight: var(--type-body-weight);
}

.site-header nav,
.sign-in,
.primary-cta,
.market-pill,
.proof-market-pill,
.watchdog-ui textarea,
.composer-bottom button,
.watchlist-button,
.leaderboard-tabs button,
.comparison-row,
.price-card > a,
.pricing-section-link,
.faq-list summary,
.footer-links {
  font-weight: var(--type-ui-weight);
}

.eyebrow,
.phone-label,
.proof-card-top,
.proof-disclaimer,
.capability-progress,
.capability-number,
.capability-scroll-hint,
.bento-kicker,
.watchdog-ui label,
.email-head small,
.leaderboard-head,
.leaderboard-row > span:first-child,
.step-top,
.step-chip,
.plan-name,
.popular-badge,
.comparison-header > *,
.footer-links strong,
.footer-bottom {
  font-weight: var(--type-ui-weight);
}

.proof-card h3,
.email-preview h4,
.capability-copy h3,
.pulse-copy h3,
.workflow-card h3,
.price strong,
.proof-metric strong,
.growth-line strong,
.growth-value {
  font-weight: var(--type-feature-weight);
}

.proof-heading h2,
.capability-stage-header h2,
.workflow-heading h2,
.comparison-heading h2,
.pricing-heading h2,
.faq-heading h2,
.final-copy h2,
.workflow-heading h2 em,
.pricing-heading h2 em,
.final-copy h2 em {
  font-style: normal;
  font-weight: var(--type-heading-weight);
}

@media (max-width: 640px) {
  .hero h1,
  .proof-heading h2,
  .workflow-heading h2,
  .comparison-heading h2,
  .pricing-heading h2,
  .faq-heading h2,
  .final-copy h2 { letter-spacing: -0.045em; }
}

/* Continuous light-page theme for proof, comparison, conversion, and footer. */
.proof-section {
  color: var(--ink);
  background:
    linear-gradient(180deg, #eef1ff 0%, rgba(238, 241, 255, 0) 13%),
    linear-gradient(180deg, transparent 80%, #f5f6fb 100%),
    radial-gradient(circle at 5% 27%, rgba(128, 151, 255, .21), transparent 31%),
    radial-gradient(circle at 95% 64%, rgba(202, 255, 105, .18), transparent 27%),
    linear-gradient(180deg, #eef1ff 0%, #f6f7fb 100%);
}

.proof-section::before {
  opacity: .32;
  background-image:
    linear-gradient(rgba(30, 45, 86, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 45, 86, .06) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 61%, transparent 89%);
  pointer-events: none;
}

.proof-heading .eyebrow { color: var(--blue); }
.proof-heading h2 { color: var(--ink); }
.proof-heading h2 > span { display: block; }
.proof-heading h2 .proof-title-action { margin-top: .08em; color: var(--blue); }
.proof-heading > p { color: #626b7d; }

.proof-market-pill {
  color: #525c70;
  border-color: rgba(16, 25, 49, .11);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 22px rgba(31, 43, 81, .07);
}

.ticker-app {
  border-color: rgba(16, 25, 49, .11);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 30px rgba(31, 43, 81, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ticker-app img { box-shadow: 0 8px 18px rgba(31, 43, 81, .15); }
.ticker-app strong { color: #1b2336; }
.ticker-app small { color: #858d9e; }

.proof-card {
  color: var(--ink);
  border-color: rgba(16, 25, 49, .11);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 24px 60px rgba(31, 43, 81, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px);
}

.proof-card::after { background: rgba(140, 114, 255, .13); filter: blur(10px); }
.proof-coral::after { background: rgba(255, 128, 107, .13); }
.proof-lime::after { background: rgba(155, 211, 79, .15); }
.proof-card-top { color: #7b8497; }
.proof-card-top b { background: #7561cf; }
.proof-coral .proof-card-top b { background: #e97361; }
.proof-card h3 { color: var(--ink); }
.proof-metric strong { color: #5675ec; }
.proof-coral .proof-metric strong { color: #df6c5b; }
.proof-lime .proof-metric strong { color: #608e28; }
.proof-metric span { color: #7e8799; }
.proof-card > p { color: #616b7e; background: #edf0f6; }
.proof-disclaimer { color: #7b8496; }

.comparison-section {
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(202, 255, 105, .15), transparent 25%),
    #f6f7fb;
}

.comparison-heading .eyebrow { color: var(--blue); }
.comparison-heading h2 { color: var(--ink); }
.comparison-heading > p:last-child { color: #697285; }

.comparison-table {
  border-color: #dce1ea;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(30, 41, 75, .08);
}

.comparison-row > *,
.comparison-row + .comparison-row { border-color: #e2e6ed; }
.comparison-header > * { color: #7d8698; }
.comparison-row > strong { color: #222c40; }
.comparison-row > span { color: #697387; }
.comparison-row .applode-column { color: #17233d; background: #edf1ff; }
.minus-icon { color: #8992a3; background: #eef1f5; }
.check-icon { color: #29411d; background: var(--lime); }

.final-cta {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 48%, rgba(49, 93, 255, .18), transparent 28%),
    radial-gradient(circle at 96% 92%, rgba(202, 255, 105, .19), transparent 25%),
    linear-gradient(145deg, #edf1ff, #f8f9fc 64%);
}

.final-cta::before {
  border-color: rgba(20, 31, 59, .10);
  box-shadow: 0 0 0 90px rgba(20, 31, 59, .022), 0 0 0 180px rgba(20, 31, 59, .014);
}

.final-cta .cta-grid {
  opacity: .24;
  background-image:
    linear-gradient(rgba(20, 31, 59, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 31, 59, .055) 1px, transparent 1px);
}

.final-copy > p { color: var(--blue); }
.final-copy h2 { color: var(--ink); }
.final-copy h2 em { color: var(--blue); }
.final-copy > span { color: #626c80; }

.cta-light {
  color: #ffffff;
  background: var(--ink);
  box-shadow: 0 18px 42px rgba(31, 43, 81, .18);
}

.cta-light > b { color: #25351b; background: var(--lime); }
.cta-light:hover { color: #ffffff; background: var(--blue); }
.goldmine-asset { filter: drop-shadow(0 40px 55px rgba(32, 48, 92, .22)); }

.site-footer {
  color: #697285;
  background: #f6f7fb;
  border-top: 1px solid #dfe3ea;
}

.footer-brand p { color: #697285; }
.footer-links strong { color: #253047; }
.footer-links a { color: #657084; }
.footer-links a:hover { color: var(--blue); }
.footer-links span { color: #8b93a2; }
.footer-bottom { color: #8a92a1; border-top-color: #dfe3ea; }

.capability-stage-header.capability-stage-controls {
  min-height: 34px;
  margin-bottom: 8px;
  justify-content: flex-end;
}

.capability-stage-controls .capability-progress { margin-left: 0; }

/* The first capability is the product's core demand-versus-supply lens. */
.capability-pulse {
  grid-template-columns: minmax(270px, .64fr) minmax(590px, 1.36fr);
  gap: clamp(30px, 4vw, 60px);
}

.capability-pulse .capability-copy { max-width: 500px; }
.capability-pulse .pulse-copy h3 { max-width: 500px; font-size: clamp(42px, 3.9vw, 60px); }
.capability-pulse .capability-copy > p:not(.bento-kicker) { max-width: 490px; }

.market-equation {
  width: max-content;
  max-width: 100%;
  margin-top: 28px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dfe4ea;
  border-radius: 14px;
  color: #697285;
  background: rgba(255, 255, 255, .74);
  font-size: 8px;
  font-weight: var(--type-ui-weight);
  letter-spacing: .08em;
}

.market-equation span,
.market-equation strong { padding: 7px 8px; border-radius: 8px; }
.market-equation span { color: #536078; background: #f0f2f6; }
.market-equation strong { color: #28371d; background: var(--lime); }
.market-equation b { color: #a0a7b5; font-weight: var(--type-ui-weight); }

.market-leaderboard {
  border-color: #d8dee8;
  border-radius: 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 30px 80px rgba(28, 39, 73, .13);
}

.market-leaderboard .leaderboard-top { padding: 16px 18px; }
.market-leaderboard .leaderboard-tabs button { padding: 10px 13px; font-size: 9px; }
.market-leaderboard .live-badge { font-size: 8px; white-space: nowrap; }

.market-leaderboard .leaderboard-head,
.market-leaderboard .leaderboard-row {
  grid-template-columns: 38px minmax(130px, 1.25fr) minmax(120px, 1fr) 56px 42px;
  column-gap: 10px;
}

.market-leaderboard.is-supply .leaderboard-head,
.market-leaderboard.is-supply .leaderboard-row {
  grid-template-columns: 38px minmax(190px, 1.55fr) 48px 48px minmax(88px, .75fr);
}

.market-leaderboard .leaderboard-head { min-height: 42px; padding: 12px 16px; }
.market-leaderboard .leaderboard-row { min-height: 72px; padding: 10px 16px; }
.market-leaderboard .leaderboard-row > span:first-child { font-size: 8px; }

.leaderboard-market-name { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.leaderboard-market-name strong { overflow: hidden; color: #1c2538; font-size: 11px; font-weight: var(--type-feature-weight); text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-market-name small { max-width: 100%; overflow: hidden; color: #9098a7; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.sparkline-cell { min-width: 0; display: flex; align-items: center; }
.market-sparkline { width: 100%; height: 34px; overflow: visible; }
.market-sparkline .axis { stroke: #dfe4eb; stroke-width: 1; }
.market-sparkline .trend { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.market-sparkline .dot { fill: var(--lime); stroke: #52652f; stroke-width: 1.2; }

.demand-now,
.demand-delta,
.supply-number,
.supply-median { font-variant-numeric: tabular-nums; }
.demand-now { color: #293349; font-size: 12px; font-weight: var(--type-ui-weight); }
.demand-now small { color: #9aa1af; font-size: 7px; }
.demand-delta { color: #26845d; font-size: 12px; font-weight: var(--type-feature-weight); }
.supply-number { color: #4c566b; font-size: 11px; font-weight: var(--type-ui-weight); }
.supply-median { color: #795b23; font-size: 11px; font-weight: var(--type-feature-weight); }

.market-leaderboard .model-note {
  min-height: 38px;
  padding: 12px 16px;
  color: #7f889a;
  font-size: 7px;
  letter-spacing: .015em;
}

@media (max-width: 900px) {
  .capability-pulse {
    grid-template-columns: minmax(230px, .7fr) minmax(470px, 1.3fr);
    gap: 28px;
  }
}

@media (max-width: 780px) {
  .capability-pulse { grid-template-columns: 1fr; gap: 18px; }
  .capability-pulse .capability-copy { max-width: none; }
  .capability-pulse .pulse-copy h3 { max-width: 580px; font-size: clamp(30px, 7.6vw, 38px); }
  .capability-pulse .capability-copy > p:not(.bento-kicker) { max-width: 640px; }
  .market-equation { margin-top: 14px; }
  .market-leaderboard .leaderboard-head,
  .market-leaderboard .leaderboard-row {
    grid-template-columns: 28px minmax(108px, 1.2fr) minmax(72px, .8fr) 40px 34px;
    column-gap: 6px;
  }
  .market-leaderboard.is-supply .leaderboard-head,
  .market-leaderboard.is-supply .leaderboard-row {
    grid-template-columns: 28px minmax(112px, 1.35fr) 36px 36px minmax(70px, .75fr);
  }
  .market-leaderboard .leaderboard-row { min-height: 58px; padding: 7px 10px; }
  .market-leaderboard .leaderboard-head { min-height: 34px; padding: 8px 10px; font-size: 5px; }
  .leaderboard-market-name strong { font-size: 9px; }
  .leaderboard-market-name small { font-size: 6px; }
  .market-sparkline { height: 27px; }
  .demand-now,
  .demand-delta,
  .supply-number,
  .supply-median { font-size: 9px; }
}

@media (max-width: 520px) {
  .market-equation { display: none; }
  .market-leaderboard .leaderboard-top { padding: 10px; gap: 8px; }
  .market-leaderboard .leaderboard-tabs { width: 100%; }
  .market-leaderboard .leaderboard-tabs button { flex: 1; padding: 9px 6px; font-size: 8px; }
  .market-leaderboard .live-badge { display: none; }
  .market-leaderboard .leaderboard-row:nth-child(n+4) { display: none; }
  .market-leaderboard .model-note { min-height: 32px; padding: 9px 10px; font-size: 6px; }
}

/* Side-by-side rankings: podium first, spaced ranking rows second. */
.capability-pulse.ranking-slide {
  padding: 14px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
}

.ranking-intro {
  display: grid;
  grid-template-columns: minmax(460px, 1.18fr) minmax(360px, .82fr);
  align-items: end;
  gap: 56px;
}

.ranking-intro-title { min-width: 0; display: grid; grid-template-columns: 80px 1fr; align-items: end; gap: 16px; }
.ranking-index { position: relative; height: 72px; }
.ranking-index > span { position: absolute; left: 0; bottom: 1px; color: rgba(27, 37, 66, .11); font-size: 72px; font-weight: var(--type-ui-weight); line-height: .8; letter-spacing: -.08em; }
.ranking-index p { position: absolute; left: 1px; bottom: -13px; width: max-content; margin: 0; display: flex; align-items: center; gap: 7px; color: #697285; font-size: 8px; font-weight: var(--type-ui-weight); letter-spacing: .14em; }
.ranking-index .status-dot { width: 7px; height: 7px; display: block; }
.ranking-intro h3 { margin: 0; color: var(--ink); font-size: clamp(34px, 3.4vw, 49px); font-weight: var(--type-feature-weight); line-height: .95; letter-spacing: -.055em; }
.ranking-intro h3 > span { display: block; }
.ranking-title-opportunity { color: var(--ink); }
.ranking-title-avoid {
  margin-top: .08em;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.ranking-intro-side > p { max-width: 520px; margin: 0; color: #626c7e; font-size: 13px; line-height: 1.52; }
.ranking-intro-side .market-equation { margin-top: 14px; }

.dual-rankings { width: min(1060px, 100%); min-height: 0; flex: 0 0 auto; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.ranking-board {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #dce2eb;
  border-radius: 25px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 64px rgba(28, 39, 73, .10);
}

.ranking-board-header { min-height: 66px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #e3e7ee; }
.ranking-board-header > div { min-width: 0; }
.ranking-board-header p { margin: 0 0 5px; color: var(--blue); font-size: 7px; font-weight: var(--type-ui-weight); letter-spacing: .14em; }
.supply-ranking .ranking-board-header p { color: #9a6b24; }
.ranking-board-header h4 { margin: 0; color: #1c2538; font-size: 18px; font-weight: var(--type-feature-weight); letter-spacing: -.03em; }
.ranking-board-header > span { margin-left: auto; padding: 7px 8px; border-radius: 999px; color: #7b8495; background: #f0f2f6; font-size: 7px; font-weight: var(--type-ui-weight); letter-spacing: .08em; white-space: nowrap; }

.ranking-podium { min-height: 174px; padding: 18px 14px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 9px; background: linear-gradient(180deg, #fbfcff, #f6f8fc); }
.ranking-podium-card { position: relative; min-width: 0; height: 148px; padding: 11px 10px 10px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e1e5ed; border-radius: 16px; background: #ffffff; box-shadow: 0 10px 26px rgba(31, 44, 82, .07); }
.ranking-podium-card.rank-1 { grid-column: 2; grid-row: 1; height: 170px; border-color: rgba(216, 171, 52, .48); background: #ffffff; box-shadow: 0 16px 34px rgba(110, 82, 20, .13); }
.ranking-podium-card.rank-2 { grid-column: 1; grid-row: 1; background: #ffffff; }
.ranking-podium-card.rank-3 { grid-column: 3; grid-row: 1; border-color: rgba(194, 110, 75, .28); background: #ffffff; }

.ranking-podium-card-top { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ranking-app-icon { width: 27px; height: 27px; flex: 0 0 auto; display: block; border-radius: 8px; object-fit: cover; box-shadow: 0 7px 15px rgba(31, 44, 82, .17); }
.ranking-podium-card .ranking-app-icon { width: 36px; height: 36px; border-radius: 10px; }

.rank-badge { width: 28px; height: 28px; display: grid; place-items: center; clip-path: none; border: 1px solid rgba(106, 119, 140, .22); border-radius: 999px; color: #657084; background: linear-gradient(145deg, #f6f8fb, #d9dfe7); font-size: 10px; font-weight: var(--type-feature-weight); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.rank-badge.rank-1 { color: #674b0b; border-color: rgba(171, 128, 24, .28); background: linear-gradient(145deg, #fff0a4, #e7b633); }
.rank-badge.rank-3 { color: #ffffff; border-color: rgba(145, 74, 46, .25); background: linear-gradient(145deg, #f3a17c, #c76b45); }

.ranking-podium-card h5 { max-width: 100%; margin: 6px 0 0; overflow: hidden; color: #1d273a; font-size: 11px; font-weight: var(--type-feature-weight); letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.ranking-podium-card > small { max-width: 100%; margin-top: 3px; overflow: hidden; color: #929aaa; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-podium-card .podium-primary { margin-top: auto; color: var(--blue); font-size: 18px; font-weight: var(--type-feature-weight); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.supply-ranking .ranking-podium-card .podium-primary { color: #8b621f; }
.ranking-podium-card .podium-primary small { margin-left: 3px; color: #8c95a5; font-size: 6px; font-weight: var(--type-body-weight); letter-spacing: 0; }
.ranking-podium-card .podium-secondary { margin-top: 3px; color: #70798b; font-size: 7px; font-variant-numeric: tabular-nums; }
.ranking-podium-card .market-sparkline { height: 25px; margin-top: 6px; }

.ranking-list { padding: 8px 12px 4px; display: grid; gap: 7px; }
.ranking-list-row { min-height: 49px; padding: 7px 10px; display: grid; align-items: center; gap: 9px; border: 1px solid #e8ebf0; border-radius: 12px; background: #f9fafc; }
.demand-ranking .ranking-list-row { grid-template-columns: 27px minmax(105px, 1fr) minmax(78px, .8fr) 38px 32px; }
.supply-ranking .ranking-list-row { grid-template-columns: 27px minmax(128px, 1.25fr) 38px 38px 70px; }
.ranking-list-row .rank-badge { width: 25px; height: 25px; clip-path: none; border-radius: 8px; color: #647083; background: #edf0f5; font-size: 9px; text-shadow: none; }
.ranking-row-identity { min-width: 0; display: flex; align-items: center; gap: 7px; }
.ranking-row-name { min-width: 0; }
.ranking-row-name strong,
.ranking-row-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row-name strong { color: #273145; font-size: 9px; font-weight: var(--type-feature-weight); }
.ranking-row-name small { margin-top: 2px; color: #969dac; font-size: 6px; }
.ranking-list-row .market-sparkline { height: 24px; }
.ranking-row-value { color: #465166; font-size: 9px; font-weight: var(--type-ui-weight); font-variant-numeric: tabular-nums; }
.ranking-row-delta { color: #26845d; font-size: 9px; font-weight: var(--type-feature-weight); font-variant-numeric: tabular-nums; }
.ranking-row-median { color: #835d20; font-size: 9px; font-weight: var(--type-feature-weight); font-variant-numeric: tabular-nums; }

.ranking-board-footer { min-height: 34px; margin-top: auto; padding: 9px 14px; display: flex; align-items: center; color: #8d95a4; border-top: 1px solid #e5e8ee; background: #ffffff; font-size: 6px; line-height: 1.35; }
.supply-watch { justify-content: space-between; gap: 12px; }
.supply-watch span { display: flex; align-items: center; gap: 6px; color: #5c6679; font-size: 8px; font-weight: var(--type-ui-weight); }
.supply-watch span b { padding: 5px 6px; border-radius: 6px; color: #28371d; background: var(--lime); font-size: 6px; letter-spacing: .08em; }
.supply-watch strong { color: #8b6424; font-size: 7px; font-weight: var(--type-ui-weight); text-align: right; }

@media (max-width: 900px) {
  .capability-pulse.ranking-slide { gap: 24px; }
  .ranking-intro { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ranking-intro-title { grid-template-columns: 58px 1fr; gap: 10px; }
  .ranking-index > span { font-size: 58px; }
  .ranking-intro h3 { font-size: clamp(29px, 4.2vw, 38px); }
  .ranking-intro-side > p { font-size: 11px; }
  .ranking-podium { min-height: 158px; padding: 14px 10px 10px; gap: 6px; }
  .ranking-podium-card { height: 132px; padding: 8px 7px; }
  .ranking-podium-card.rank-1 { height: 150px; }
  .ranking-podium-card .ranking-app-icon { width: 30px; height: 30px; }
  .ranking-app-icon { width: 22px; height: 22px; border-radius: 7px; }
  .ranking-board-header { padding: 11px 13px; }
  .ranking-board-header h4 { font-size: 15px; }
  .ranking-list { padding: 6px 8px 3px; gap: 5px; }
  .ranking-list-row { min-height: 40px; padding: 5px 6px; gap: 5px; }
  .demand-ranking .ranking-list-row { grid-template-columns: 24px minmax(86px, 1fr) 62px 30px 26px; }
  .supply-ranking .ranking-list-row { grid-template-columns: 24px minmax(92px, 1.15fr) 28px 28px 55px; }
}

@media (max-width: 780px) {
  .capability-pulse.ranking-slide { padding: 4px 0 0; justify-content: flex-start; gap: 16px; overflow-y: auto; scrollbar-width: none; }
  .capability-pulse.ranking-slide::-webkit-scrollbar { display: none; }
  .ranking-intro { display: block; }
  .ranking-intro-title { display: block; }
  .ranking-index { height: 19px; }
  .ranking-index > span { display: none; }
  .ranking-index p { position: static; }
  .ranking-intro h3 { margin-top: 9px; font-size: clamp(27px, 7.8vw, 35px); }
  .ranking-intro-side > p { margin-top: 8px; font-size: 10px; line-height: 1.4; }
  .ranking-intro-side .market-equation { display: none; }
  .dual-rankings { margin-top: 2px; display: grid; grid-template-columns: 1fr; gap: 9px; }
  .ranking-board { border-radius: 18px; }
  .ranking-board-header { min-height: 42px; padding: 8px 10px; }
  .ranking-board-header p { margin-bottom: 2px; font-size: 5px; }
  .ranking-board-header h4 { font-size: 13px; }
  .ranking-board-header > span { padding: 5px 6px; font-size: 5px; }
  .ranking-podium { min-height: 108px; padding: 8px 7px 7px; gap: 5px; }
  .ranking-podium-card { height: 96px; padding: 6px; border-radius: 11px; }
  .ranking-podium-card.rank-1 { height: 108px; }
  .ranking-podium-card-top { min-height: 24px; }
  .ranking-podium-card .ranking-app-icon { width: 24px; height: 24px; border-radius: 7px; }
  .ranking-app-icon { width: 18px; height: 18px; border-radius: 5px; }
  .rank-badge { width: 22px; height: 22px; font-size: 8px; }
  .ranking-podium-card h5 { margin-top: 5px; font-size: 8px; }
  .ranking-podium-card > small { font-size: 5px; }
  .ranking-podium-card .podium-primary { font-size: 13px; }
  .ranking-podium-card .market-sparkline { height: 16px; margin-top: 3px; }
  .ranking-podium-card .podium-secondary { display: none; }
  .ranking-list { padding: 4px 6px 2px; }
  .ranking-list-row { min-height: 34px; padding: 4px 5px; }
  .ranking-list-row:nth-child(n+2) { display: none; }
  .demand-ranking .ranking-list-row { grid-template-columns: 21px minmax(84px, 1fr) 62px 27px 23px; }
  .supply-ranking .ranking-list-row { grid-template-columns: 21px minmax(100px, 1.2fr) 27px 27px 55px; }
  .ranking-list-row .rank-badge { width: 20px; height: 20px; font-size: 7px; }
  .ranking-row-identity { gap: 5px; }
  .ranking-row-name strong,
  .ranking-row-value,
  .ranking-row-delta,
  .ranking-row-median { font-size: 7px; }
  .ranking-row-name small { font-size: 5px; }
  .ranking-list-row .market-sparkline { height: 18px; }
  .ranking-board-footer { min-height: 25px; padding: 6px 8px; font-size: 5px; }
  .supply-watch span { font-size: 6px; }
  .supply-watch span b { padding: 3px 4px; font-size: 5px; }
  .supply-watch strong { max-width: 54%; font-size: 5px; }
}

/* Two direct visuals: one demand trend, one crowded app market. */
.trend-board,
.crowded-board { height: 720px; }

.simple-ranking-header {
  min-height: 72px;
  padding: 18px 20px;
}

.simple-ranking-header h4 {
  max-width: 430px;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.demand-trend-visual,
.crowded-market-visual {
  min-height: 0;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.trend-feature-head,
.crowded-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.featured-ranking-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.featured-ranking-copy { min-width: 0; }
.featured-ranking-copy > span {
  display: block;
  color: #8b94a5;
  font-size: 7px;
  font-weight: var(--type-ui-weight);
  letter-spacing: .13em;
}

.featured-ranking-copy > strong {
  display: block;
  margin-top: 5px;
  color: #192339;
  font-size: 22px;
  font-weight: var(--type-feature-weight);
  letter-spacing: -.035em;
}

.leader-rank {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d8dee7;
  border-radius: 999px;
  color: #647083;
  background: #f1f3f7;
  font-size: 8px;
  font-weight: var(--type-feature-weight);
}

.leader-rank.rank-1 { color: #5f4305; border-color: rgba(151, 105, 10, .42); background: linear-gradient(145deg, #fff5b9, #e9b82f); box-shadow: 0 0 0 4px rgba(233, 184, 47, .18), 0 7px 15px rgba(117, 83, 12, .16); }
.leader-rank.rank-2 { color: #465264; border-color: #b6c0cd; background: linear-gradient(145deg, #ffffff, #cbd3dd); box-shadow: inset 0 1px 0 white; }
.leader-rank.rank-3 { color: #ffffff; border-color: rgba(126, 60, 35, .42); background: linear-gradient(145deg, #f7ae88, #bd5f3b); box-shadow: 0 5px 11px rgba(139, 69, 43, .14); }
.featured-ranking-label > .leader-rank.rank-1 { width: 34px; height: 34px; font-size: 10px; }

.trend-feature-head > em {
  color: var(--blue);
  font-style: normal;
  text-align: right;
}

.trend-feature-delta strong,
.trend-feature-delta small { display: block; }
.trend-feature-delta strong { font-size: 25px; font-weight: var(--type-feature-weight); letter-spacing: -.05em; }
.trend-feature-delta small { margin-top: 2px; color: #8b94a5; font-size: 7px; font-weight: var(--type-ui-weight); letter-spacing: .04em; }

.demand-chart-shell {
  position: relative;
  min-height: 158px;
  margin-top: 12px;
  padding: 13px 10px 19px;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 18px;
  background:
    linear-gradient(rgba(38, 55, 91, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 55, 91, .055) 1px, transparent 1px),
    linear-gradient(180deg, #fbfcff, #f7f9fd);
  background-size: 100% 36px, 82px 100%, auto;
}

#demandHeroChart { height: 126px; }
.demand-feature-chart { width: 100%; height: 126px; }
.demand-feature-chart .axis { stroke: rgba(49, 93, 255, .15); }
.demand-feature-chart .trend { stroke-width: 2.2; }
.demand-feature-chart .dot { r: 3.8px; }
.trend-chart-axis { position: absolute; left: 12px; right: 12px; bottom: 7px; display: flex; justify-content: space-between; color: #9aa2b1; font-size: 6px; }

.trend-current {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.trend-current strong { color: #1a2439; font-size: 20px; font-weight: var(--type-feature-weight); letter-spacing: -.035em; }
.trend-current span { color: #858e9f; font-size: 8px; }
.trend-signal-list { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.trend-signal { min-width: 0; min-height: 40px; padding: 7px 9px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 92px 46px 48px; align-items: center; gap: 8px; border: 1px solid #e4e8ef; border-radius: 11px; background: #fafbfd; }
.trend-signal .leader-rank { width: 20px; height: 20px; font-size: 6px; }
.trend-signal > span { min-width: 0; }
.trend-signal strong,
.trend-signal small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-signal strong { color: #273145; font-size: 8px; font-weight: var(--type-feature-weight); }
.trend-signal small { margin-top: 2px; color: #969dac; font-size: 5px; }
.trend-signal .market-sparkline { width: 92px; height: 24px; }
.trend-signal em { color: #596477; font-size: 8px; font-style: normal; font-weight: var(--type-ui-weight); text-align: right; white-space: nowrap; }
.trend-signal b { color: #26845d; font-size: 8px; font-weight: var(--type-feature-weight); text-align: right; white-space: nowrap; }

.crowded-search > em {
  padding: 8px 10px;
  border-radius: 999px;
  color: #7a421f;
  background: #fff0e7;
  font-size: 7px;
  font-style: normal;
  font-weight: var(--type-ui-weight);
  letter-spacing: .1em;
}

.app-cloud-shell {
  position: relative;
  min-height: 142px;
  margin-top: 12px;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 30%, rgba(49, 93, 255, .11), transparent 34%),
    radial-gradient(circle at 83% 70%, rgba(202, 255, 105, .18), transparent 32%),
    #f8f9fc;
}

.app-cloud {
  width: max-content;
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 7px;
}

.app-cloud .ranking-app-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 9px 20px rgba(31, 44, 82, .17);
}

.app-cloud-more {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: auto;
  height: auto;
  padding: 6px 10px;
  border: 1px solid rgba(41, 52, 76, .12);
  border-radius: 999px;
  color: #626c7e;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 6px 15px rgba(31, 44, 82, .08);
  font-size: 7px;
  font-weight: var(--type-feature-weight);
}

.crowded-metrics { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crowded-metrics > span { padding: 7px 9px; color: #7e8798; border-radius: 10px; background: #f3f5f8; font-size: 6px; }
.crowded-metrics strong { display: block; margin-bottom: 1px; color: #1c263b; font-size: 15px; font-weight: var(--type-feature-weight); letter-spacing: -.035em; }
.crowded-runner-list { margin-top: 8px; display: grid; gap: 5px; }
.crowded-runner { min-width: 0; min-height: 31px; padding: 5px 8px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 58px 48px; align-items: center; gap: 7px; border: 1px solid #e4e8ef; border-radius: 10px; background: #fafbfd; }
.crowded-runner .leader-rank { width: 20px; height: 20px; font-size: 6px; }
.crowded-runner > strong { overflow: hidden; color: #273145; font-size: 8px; font-weight: var(--type-feature-weight); text-overflow: ellipsis; white-space: nowrap; }
.crowded-runner > b { color: #6a7385; font-size: 7px; font-weight: var(--type-ui-weight); text-align: right; white-space: nowrap; }
.crowded-icon-stack { height: 24px; display: flex; align-items: center; justify-content: flex-end; }
.crowded-icon-stack .ranking-app-icon { width: 23px; height: 23px; margin-left: -7px; border: 2px solid #fafbfd; border-radius: 7px; box-shadow: 0 4px 9px rgba(31, 44, 82, .13); }
.crowded-icon-stack .ranking-app-icon:first-child { margin-left: 0; }
.crowded-footer { color: #8b6424; }

@media (max-width: 900px) {
  .trend-board,
  .crowded-board { height: 660px; }
  .simple-ranking-header h4 { font-size: 17px; }
  .app-cloud { grid-template-columns: repeat(6, 31px); gap: 6px; }
  .app-cloud .ranking-app-icon { width: 31px; height: 31px; border-radius: 9px; }
}

@media (max-width: 780px) {
  .trend-board,
  .crowded-board { height: 410px; }
  .simple-ranking-header { min-height: 46px; padding: 9px 11px; }
  .simple-ranking-header h4 { font-size: 14px; }
  .demand-trend-visual,
  .crowded-market-visual { padding: 10px; }
  .featured-ranking-label { gap: 6px; }
  .featured-ranking-copy > span { font-size: 5px; }
  .featured-ranking-copy > strong { margin-top: 2px; font-size: 15px; }
  .leader-rank { width: 20px; height: 20px; font-size: 6px; }
  .featured-ranking-label > .leader-rank.rank-1 { width: 25px; height: 25px; font-size: 7px; box-shadow: 0 0 0 3px rgba(233, 184, 47, .16); }
  .trend-feature-delta strong { font-size: 18px; }
  .trend-feature-delta small { font-size: 5px; }
  .demand-chart-shell { min-height: 82px; margin-top: 6px; padding: 6px 5px 13px; border-radius: 11px; background-size: 100% 21px, 56px 100%, auto; }
  #demandHeroChart,
  .demand-feature-chart { height: 64px; }
  .trend-chart-axis { bottom: 4px; font-size: 4px; }
  .trend-current { margin-top: 5px; gap: 5px; }
  .trend-current strong { font-size: 13px; }
  .trend-current span { font-size: 5px; }
  .trend-signal-list { margin-top: 6px; gap: 3px; }
  .trend-signal { min-height: 27px; padding: 4px 5px; grid-template-columns: 16px minmax(0, 1fr) 42px 32px 34px; gap: 3px; border-radius: 7px; }
  .trend-signal .leader-rank { width: 15px; height: 15px; font-size: 5px; }
  .trend-signal strong { font-size: 6px; }
  .trend-signal small { display: none; }
  .trend-signal .market-sparkline { width: 42px; height: 16px; }
  .trend-signal em,
  .trend-signal b { font-size: 6px; }
  .crowded-search > em { padding: 5px 6px; font-size: 5px; }
  .app-cloud-shell { min-height: 79px; margin-top: 5px; padding: 6px; border-radius: 11px; }
  .app-cloud { grid-template-columns: repeat(6, 22px); gap: 4px; }
  .app-cloud .ranking-app-icon { width: 22px; height: 22px; border-radius: 6px; }
  .app-cloud-more { right: 8px; bottom: 6px; padding: 4px 7px; font-size: 5px; }
  .crowded-metrics { margin-top: 6px; gap: 4px; }
  .crowded-metrics > span { padding: 5px 6px; border-radius: 7px; font-size: 5px; }
  .crowded-metrics strong { font-size: 12px; }
  .crowded-runner-list { margin-top: 5px; gap: 3px; }
  .crowded-runner { min-height: 23px; padding: 3px 5px; grid-template-columns: 16px minmax(0, 1fr) 42px 36px; gap: 4px; border-radius: 7px; }
  .crowded-runner .leader-rank { width: 15px; height: 15px; font-size: 5px; }
  .crowded-runner > strong,
  .crowded-runner > b { font-size: 6px; }
  .crowded-icon-stack { height: 18px; }
  .crowded-icon-stack .ranking-app-icon { width: 17px; height: 17px; margin-left: -6px; border-width: 1px; border-radius: 5px; }
  .trend-signal:nth-child(n+6),
  .crowded-runner:nth-child(n+6) { display: none; }
}

/* Podium ranks use medal badges; rank 4+ stays circular. */
.leader-rank:is(.rank-1, .rank-2, .rank-3) {
  position: relative;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 84% 13%, 100% 45%, 88% 78%, 50% 100%, 12% 78%, 0% 45%, 16% 13%);
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(44, 49, 59, .18));
}

.leader-rank:is(.rank-1, .rank-2, .rank-3)::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  top: 15%;
  height: 12%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
}

.featured-ranking-label > .leader-rank.rank-1 { width: 38px; height: 42px; }
.trend-signal .leader-rank:is(.rank-2, .rank-3),
.crowded-runner .leader-rank:is(.rank-2, .rank-3) { width: 24px; height: 27px; }

@media (max-width: 780px) {
  .featured-ranking-label > .leader-rank.rank-1 { width: 28px; height: 31px; }
  .trend-signal .leader-rank:is(.rank-2, .rank-3),
  .crowded-runner .leader-rank:is(.rank-2, .rank-3) { width: 18px; height: 20px; }
}

.capability-competitor .capability-copy h3 {
  font-size: clamp(40px, 3.6vw, 54px);
}

@media (max-width: 780px) {
  .capability-competitor .capability-copy h3 {
    font-size: clamp(31px, 7vw, 39px);
  }
}