/* Sections */

/* Hero Section */

/* Hero: Two-column premium layout with product preview */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 86px);
  padding: clamp(20px, 3vh, 34px) 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 38%, var(--glow-blue), transparent 34%),
    var(--bg-hero);
}

/* Tighter primary/secondary buttons only inside the hero */
.hero .btn {
  min-height: 48px;
  padding: 0 24px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(440px, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
}

/* overflow: hidden only on the right collage panel; on the transparent
   left column it shaved the left edge of glyphs at the box edge
   (e.g. the B in "Based on ATS screening benchmarks."). */
.hero-left,
.hero-right {
  border-radius: var(--border-radius-2xl);
}

.hero-right {
  overflow: hidden;
}

.hero-left {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.6vh, 18px);
  padding: 0;
  background: transparent;
}

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.eyebrow {
  display: inline-block;
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.hero-headline {
  font-size: clamp(46px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  margin: 0;
  max-width: 520px;
  color: var(--color-white);
  text-wrap: balance;
}

.hero-headline .emphasize {
  display: inline-block;
  color: var(--color-gold);
}

.hero-subhead {
  max-width: 500px;
  margin: 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--color-gray-400);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: clamp(4px, 1vh, 10px);
}

/* Right product canvas */
.hero-product-collage {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 10px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.hero-product-collage::before {
  display: none;
}

.hero-product-collage .panel {
  position: static;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: clamp(16px, 1.8vw, 22px);
  animation: none;
  border-radius: var(--border-radius-lg);
}

.hero-product-collage .panel-score-value {
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
}

.hero-product-collage .progress-bar {
  margin: 14px 0 10px;
}

.hero-product-collage .panel-label {
  font-size: 10px;
  letter-spacing: 0.12em;
}

.hero-product-collage .panel-text,
.hero-product-collage .panel li,
.hero-product-collage .keyword-item {
  font-size: 12px;
  line-height: 1.35;
}

.hero-product-collage .panel-sm {
  padding: 16px;
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--border-radius-2xl);
  padding: var(--space-2xl);
  color: var(--color-gray-100);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.38);
}

.panel-xl {
  grid-column: 1 / -1;
  min-height: auto;
}

.panel-md {
  grid-column: 1 / -1;
  min-height: auto;
}

.panel-sm {
  min-height: auto;
}

.panel-3 {
  grid-column: 1;
  grid-row: auto;
}

.panel-4 {
  grid-column: 2;
  grid-row: auto;
}

.panel-5 {
  grid-column: 1;
  grid-row: auto;
}

.panel-6 {
  grid-column: 2;
  grid-row: auto;
}

.pc-title {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
  margin-bottom: 8px;
}

.pc-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.score-bubble {
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 1rem;
}

.progress-wrap {
  flex: 1;
}

.progress-bar {
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 94%;
  background: linear-gradient(90deg, var(--color-green-success), var(--color-green-light));
  border-radius: 999px;
}

.keyword-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-sm);
}

.keyword-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.keyword-item .ok {
  color: var(--color-green-success);
}

.keyword-item .miss {
  color: var(--color-gold);
}

.status-ready {
  color: var(--color-green-success);
  font-weight: var(--font-weight-semibold);
}

.status-note {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
}

/* Decorative grid + glow behind cluster */
.hero-container {
  max-width: 1240px;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background: var(--glow-gold);
  border: 1px solid rgba(var(--gold-rgb),0.25);
  color: var(--color-gold);
  padding: 0.5rem 0.9rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-xs);
}

.eyebrow-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--border-radius-full);
  background: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.18);
}

.hero-trust-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  max-width: 500px;
  margin-top: clamp(4px, 1vh, 10px);
}

/* Hero proof / source lines */
.hero-market-line,
.hero-source-note {
  max-width: 500px;
  margin: 0;
  margin-top: clamp(4px, 1vh, 8px);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-gray-500);
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.panel-1 {
  position: relative;
}

.panel-label,
.panel-label-alt {
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2xs);
  display: block;
}

.panel-score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.panel-score-value {
  font-size: var(--font-size-6xl);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.panel-score-unit {
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
}

.panel-progress {
  margin-bottom: var(--space-md);
}

.panel-meta {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

.panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.9rem;
  border-radius: var(--border-radius-full);
  background-color: rgba(var(--gold-rgb),0.14);
  color: var(--color-gold);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.keyword-group {
  margin-bottom: var(--space-md);
}

.keyword-header {
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2xs);
}

.keyword-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-white);
  font-size: var(--font-size-sm);
  margin-bottom: 0.5rem;
}

.keyword-item:last-child {
  margin-bottom: 0;
}

.warn {
  color: var(--color-gold);
}

.panel-status {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-semibold);
}

.panel-status-strong {
  color: var(--color-green-success);
}

.panel-status-ok {
  color: var(--color-gray-100);
}

.panel-text {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.panel-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-gray-300);
  display: grid;
  gap: 0.5rem;
}

.panel-bullet-list li {
  position: relative;
  padding-left: 1.4rem;
}

.panel-bullet-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

/* New section styles */
.trust-bar {
  background-color: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-top: -0.5rem;
  padding: var(--space-sm) 0 var(--space-md);
}

.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
  color: var(--color-gray-200);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 0;
}

.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.trust-check {
  color: var(--color-gold);
}

.trust-bar,
.pricing-trust,
.faq {
  background-color: var(--bg-section);
}

.why-works,
.plan-comparison {
  background-color: rgba(255,255,255,0.02);
}

.competitive-comparison,
.pricing {
  background-color: var(--bg-section-alt);
}

.how-it-works,
.final-cta {
  background-color: var(--bg-section);
}

.comparison-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-4xl);
}

.comparison-core {
  background: var(--surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius-2xl);
  padding: var(--space-2xl);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.24);
}

.comparison-core-card {
  max-width: 760px;
}

.comparison-core-heading {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.comparison-core p {
  color: var(--color-gray-300);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.comparison-table-wrapper {
  overflow-x: auto;
}

/* Rebuilt comparison table: concept-quality visual */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: var(--font-size-sm);
}

.comp-th-feature {
  text-align: left;
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-section);
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 200px;
  border-bottom: 1px solid var(--glass-border);
}

.comp-th-kaxori {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: rgba(var(--gold-rgb), 0.12);
  border-top: 3px solid var(--color-gold);
  border-left: 1px solid rgba(var(--gold-rgb), 0.30);
  border-right: 1px solid rgba(var(--gold-rgb), 0.30);
  border-bottom: 2px solid var(--color-gold);
  min-width: 180px;
}

.comp-th-kaxori-star {
  display: block;
  color: var(--color-gold);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.comp-th-kaxori-sub {
  display: block;
  font-size: var(--font-size-xs);
  color: rgba(var(--gold-rgb), 0.70);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

.comp-th-competitor {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-section);
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--glass-border);
  vertical-align: top;
}

.comp-th-sub {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-regular);
  margin-top: var(--space-xs);
}

.comp-td-feature {
  padding: var(--space-md);
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}

.comp-td-kaxori {
  padding: var(--space-md);
  text-align: center;
  background: rgba(var(--gold-rgb), 0.07);
  border-left: 1px solid rgba(var(--gold-rgb), 0.20);
  border-right: 1px solid rgba(var(--gold-rgb), 0.20);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.12);
  vertical-align: middle;
}

.comp-td-competitor {
  padding: var(--space-md);
  text-align: center;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
  color: var(--color-gray-400);
}

.comparison-table tbody tr:hover .comp-td-feature,
.comparison-table tbody tr:hover .comp-td-kaxori,
.comparison-table tbody tr:hover .comp-td-competitor {
  filter: brightness(1.08);
}

.comp-yes {
  color: var(--color-green-success);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.comp-no {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.comp-part {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
}

.comparison-cta-panel {
  margin-top: var(--space-4xl);
  padding: var(--space-2xl);
  background: var(--surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius-2xl);
  display: grid;
  gap: var(--space-md);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.22);
}

.comparison-cta-panel h3,
.comparison-cta-panel p {
  margin: 0;
}

.comparison-cta-panel h3 {
  color: var(--color-white);
}

.comparison-cta-panel p {
  color: var(--color-gray-300);
}

/* ============================================================
   Competitive comparison upgrade
   Insight row, premium callout, differentiator cards, table polish.
   Existing tokens only. No hex, no raw gold rgba (uses --gold-rgb).
   ============================================================ */

/* Insight row: three quick framing cards before the table. */
.comp-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.comp-stat-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  justify-items: center;
  text-align: center;
  background: var(--bg-page);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-top: 3px solid rgba(var(--gold-rgb), 0.45);
  border-radius: var(--border-radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.35),
              0 0 24px rgba(var(--gold-rgb), 0.08);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.comp-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.45);
  box-shadow: 0 22px 48px rgba(8, 12, 24, 0.45),
              0 0 32px rgba(var(--gold-rgb), 0.14);
}

/* Card 3 is the Kaxori card: gold wash over the deep navy surface. */
.comp-stat-card-kaxori {
  background: linear-gradient(180deg, var(--glow-gold), transparent), var(--bg-page);
  border-color: rgba(var(--gold-rgb), 0.30);
  border-top-color: var(--color-gold);
}

.comp-stat-card-kaxori .comp-stat-icon {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-dark);
}

.comp-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-full);
  background: var(--glow-gold);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.comp-stat-number {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.comp-stat-label {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.comp-stat-source {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-style: italic;
  margin-top: var(--space-sm);
}

.comp-stat-card p {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Premium callout before the table: centered gold wash over deep navy. */
.comp-core-callout {
  margin-top: var(--space-2xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  background: linear-gradient(180deg, var(--glow-gold), transparent), var(--bg-page);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-2xl);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.35),
              0 0 24px rgba(var(--gold-rgb), 0.08);
}

.comp-core-label {
  display: inline-block;
  color: var(--color-gold);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-xs);
}

.comp-core-heading {
  color: var(--color-white);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
}

.comp-core-callout p {
  color: var(--color-gray-300);
  line-height: var(--line-height-relaxed);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-md);
}

.comp-core-callout p:last-child {
  margin-bottom: 0;
}

/* Table polish: framed wrapper, sharper header, row hover.
   Wrapper keeps horizontal scroll so the table stays readable on mobile. */
.comparison-table-wrapper {
  margin-top: var(--space-2xl);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-xl);
  background: var(--glass-backdrop);
}

/* Differentiator cards after the table, before the CTA. */
.comp-diff-block {
  margin-top: var(--space-4xl);
}

.comp-diff-heading {
  color: var(--color-white);
  font-size: var(--font-size-3xl);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.comp-diff-sub {
  color: var(--color-gray-300);
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
  line-height: var(--line-height-relaxed);
}

.comp-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.comp-diff-card {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  background: linear-gradient(180deg, var(--bg-hero), var(--bg-page));
  border: 1px solid var(--glass-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: 0 22px 50px rgba(8, 12, 24, 0.42);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.comp-diff-card:hover {
  transform: translateY(-4px);
  border-color: var(--glow-gold);
  border-top-color: var(--color-gold);
  box-shadow: 0 26px 56px rgba(8, 12, 24, 0.50);
}

/* Small uppercase context label at the top of each card. */
.comp-diff-vs {
  justify-self: start;
  color: var(--color-gold-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Headline is the punch line: large, bold, tight, with gold "Kaxori". */
.comp-diff-title {
  color: var(--color-white);
  font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-2xl));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

.comp-diff-them {
  color: var(--color-gray-400);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Visible gold hairline between the problem and the payoff. */
.comp-diff-divider {
  height: 1px;
  background: rgba(var(--gold-rgb), 0.35);
}

.comp-diff-kaxori {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  margin: 0;
}

/* KAXORI MOVE: the payoff anchor, with a small green accent marker. */
.comp-diff-kaxori-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-green-success);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.comp-diff-kaxori-label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: var(--border-radius-full);
  background: var(--color-green-success);
}

.comp-diff-kaxori-copy {
  display: block;
  color: var(--color-gray-100);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

/* Wider, centered subhead for this section's stronger headline area. */
.competitive-comparison .section-subtitle {
  max-width: 760px;
}

/* Battlecard: one framed container around band + table + CTA. */
.comp-battlecard {
  margin-top: var(--space-3xl);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-radius: var(--border-radius-2xl);
  background: var(--surface-card);
  box-shadow: 0 24px 60px rgba(8, 12, 24, 0.32);
  overflow: hidden;
}

/* Header band above the table. */
.comp-table-band {
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  background: linear-gradient(135deg, var(--glow-gold), transparent);
  border-bottom: 1px solid var(--glass-border);
}

.comp-table-band-title {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.comp-table-band-sub {
  max-width: 640px;
  margin: var(--space-sm) auto 0;
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* The table sits flush inside the battlecard; the frame lives on the card. */
.comp-battlecard .comparison-table-wrapper {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
}

/* Keep the gold subhead phrase together so it never dangles a word. */
.competitive-comparison .section-subtitle .title-gold {
  white-space: nowrap;
}

/* Small badge inside the Kaxori column header. */
.comp-kaxori-badge {
  display: block;
  width: fit-content;
  margin-top: var(--space-sm);
  padding: 0.25rem 0.6rem;
  border-radius: var(--border-radius-full);
  background: var(--color-gold);
  color: var(--color-navy-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* CTA bar attached to the bottom of the battlecard. */
.comp-table-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-2xl);
  border-top: 1px solid var(--glass-border);
  background: linear-gradient(135deg, var(--glow-gold), transparent);
}

.comp-table-cta span {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* CTA reads as the closing band of this section. */
.comparison-cta-panel {
  margin-top: var(--space-3xl);
  text-align: center;
  justify-items: center;
  background: linear-gradient(135deg, var(--glow-gold), var(--surface-card));
  border-color: rgba(var(--gold-rgb), 0.25);
}

.comparison-cta-panel p {
  max-width: 560px;
}

/* Competitive upgrade: stack the new grids on smaller screens. */
@media (max-width: 900px) {
  .comp-stat-row,
  .comp-diff-grid {
    grid-template-columns: 1fr;
  }

  .comp-table-cta {
    justify-content: center;
    text-align: center;
  }
}

/* Trust bridge into pricing: centered gold wash over deep navy,
   matching the premium dark card system. Restrained so it does
   not compete with the Premium pricing card below. */
.pricing-trust-panel {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
  background: linear-gradient(180deg, var(--glow-gold), transparent 45%), var(--bg-page);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--border-radius-2xl);
  margin-top: var(--space-4xl);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.35),
              0 0 24px rgba(var(--gold-rgb), 0.08);
}

.pricing-trust-panel h2 {
  color: var(--color-white);
  margin-top: 0.25rem;
}

.pricing-trust-panel p {
  color: var(--color-gray-300);
  line-height: var(--line-height-relaxed);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
}

.pricing-trust-chips span {
  background: var(--glass-bg);
  color: var(--color-gray-200);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-full);
  padding: 0.9rem 1rem;
  font-size: var(--font-size-sm);
}

.plan-comparison-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-4xl);
}

.plan-comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.plan-comparison-table th,
.plan-comparison-table td {
  padding: var(--space-md);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--color-gray-200);
  text-align: left;
}

.plan-comparison-table thead th {
  background: rgba(255,255,255,0.04);
  color: var(--color-white);
}

.plan-comparison-table tbody th {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.plan-comparison-table td {
  background: rgba(255,255,255,0.03);
}

.plan-comparison-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

.planned-cta {
  margin-top: var(--space-lg);
}

.why-works {
  background-color: var(--color-navy-bg);
}

/* Section eyebrow matches the approved larger kicker treatment
   used by .comp-core-label. Scoped to this section only. */
.why-works .section-label {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.07em;
}

.value-grid,
.feature-grid,
.proof-grid {
  display: grid;
  gap: var(--space-2xl);
}

/* Journey grid: three numbered steps reading left to right.
   Gold (see) to green (fix) to gold (send). Tokens only. */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.journey-card {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  background: linear-gradient(180deg, var(--glow-gold), transparent 45%), var(--bg-page);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  border-top: 3px solid rgba(var(--gold-rgb), 0.55);
  border-radius: var(--border-radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.30),
              0 0 24px rgba(var(--gold-rgb), 0.06);
}

/* Step two is the positive fix-it moment: green accents. */
.journey-green {
  background: linear-gradient(180deg, var(--glow-green), transparent 45%), var(--bg-page);
  border-color: color-mix(in srgb, var(--color-green-success) 24%, transparent);
  border-top-color: color-mix(in srgb, var(--color-green-success) 65%, transparent);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.30),
              0 0 24px var(--glow-green);
}

.journey-green:hover {
  border-color: color-mix(in srgb, var(--color-green-success) 45%, transparent);
}

.journey-kicker {
  color: var(--color-gold);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
}

.journey-green .journey-kicker {
  color: var(--color-green-light);
}

.journey-title {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.journey-copy {
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

/* Mini in-card demo panel. */
.journey-demo {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  background: var(--surface-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}

.demo-label {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.demo-score {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  line-height: 1;
}

.demo-score small {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.demo-meter {
  height: 6px;
  border-radius: var(--border-radius-full);
  background: var(--surface-card-strong);
  overflow: hidden;
}

.demo-meter-fill {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold));
}

.demo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.demo-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
}

.demo-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--border-radius-full);
  background: var(--color-gold);
}

.demo-diff {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  padding: 0.6rem 0.75rem;
  background: var(--glass-bg);
  border-left: 3px solid var(--color-navy-lighter);
  border-radius: var(--border-radius-md);
}

.demo-diff span {
  display: block;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

.demo-diff-after {
  color: var(--color-gray-100);
  background: var(--glow-green);
  border-left-color: var(--color-green-success);
}

.demo-diff-after span {
  color: var(--color-green-light);
}

.demo-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-green-light);
  font-size: var(--font-size-sm);
}

.demo-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.demo-files li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-gray-200);
  font-size: var(--font-size-sm);
  padding: 0.7rem 0.9rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
}

.check-mark {
  color: var(--color-green-success);
}

.value-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.value-card,
.feature-card,
.proof-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
}

.value-card h3,
.feature-card h3,
.proof-card h3 {
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.value-card p,
.feature-card p,
.proof-card p {
  color: var(--color-gray-300);
  line-height: var(--line-height-relaxed);
}

.feature-card-featured {
  background: linear-gradient(180deg, rgba(var(--gold-rgb),0.14), rgba(255,255,255,0.04));
  border-color: rgba(var(--gold-rgb),0.2);
}

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

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

.proof-note {
  color: var(--color-gray-500);
  text-align: center;
  margin-top: var(--space-lg);
}

.steps-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.step-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  text-align: center;
}

.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: var(--color-navy-dark);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-lg);
}

.step-item h3,
.step-item p {
  color: var(--color-white);
  margin: 0;
}

.step-item p {
  color: var(--color-gray-300);
  line-height: var(--line-height-relaxed);
}

/* Final CTA: the blue band itself is the container; the inner box is just
   a centered content wrapper, not a floating card. */
.final-cta {
  padding: var(--space-3xl) 0;
  background: var(--bg-section);
}

.final-cta-container {
  display: grid;
  place-items: center;
  width: 100%;
}

.final-cta-box {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-md);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.final-cta-box h2 {
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.final-cta-subhead {
  color: var(--color-gray-300);
  margin-bottom: var(--space-2xl);
}

.final-cta-actions {
  display: inline-flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer {
  background-color: var(--bg-page);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-5xl) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.footer-brand {
  grid-column: span 2;
}

/* Rev 2.5 footer brand lockup: white-reverse horizontal logo (tagline
   baked in), matching the header. Sits directly on the dark footer with
   no panel. Sized by width so the tagline stays readable. */
.footer-logo-img {
  display: block;
  width: clamp(260px, 28vw, 380px);
  height: auto;
  max-width: 100%;
  margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  .footer-logo-img {
    width: min(320px, 100%);
  }
}

.footer-column h4 {
  color: var(--color-gray-300);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-column a {
  display: block;
  color: var(--color-gray-400);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-lg);
  margin-top: var(--space-3xl);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

/* Desktop height guard: keep hero within one viewport */
@media (min-width: 980px) {
  .hero {
    max-height: calc(100vh - 86px);
  }

  .hero-product-collage {
    transform: translateY(0);
  }
}

/* Mobile: let the hero stack and grow naturally */
@media (max-width: 980px) {
  .hero {
    max-height: none;
    min-height: auto;
    padding: var(--space-4xl) 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-product-collage {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  .hero-grid,
  .journey-grid,
  .value-grid,
  .feature-grid,
  .proof-grid,
  .steps-line,
  .footer-grid,
  .trust-bar-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    padding: var(--space-2xl);
  }

  .hero-grid::before {
    display: none;
  }

  .hero-left {
    border-right: none;
    padding-right: 0;
    padding-left: 0;
  }

  .hero-right {
    padding-left: 0;
    padding-right: 0;
  }

  .panel-xl,
  .panel-md,
  .panel-sm {
    position: static;
    width: 100%;
  }

  .panel-3,
  .panel-4,
  .panel-5,
  .panel-6 {
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  .hero-product-collage {
    min-height: auto;
  }

  .trust-bar-grid {
    text-align: center;
  }

  .footer-brand {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: var(--space-2xl) 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .hero-headline {
    font-size: var(--font-size-4xl);
  }

  .hero-subhead {
    font-size: var(--font-size-base);
  }

  .pricing-grid,
  .journey-grid,
  .value-grid,
  .feature-grid,
  .proof-grid,
  .steps-line {
    grid-template-columns: 1fr;
  }

  .pricing-toggle {
    width: 100%;
    justify-content: center;
  }

  .faq-question {
    font-size: var(--font-size-base);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Features Section */

.features {
  background-color: var(--color-navy-bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2xl);
}

/* How It Works Section */

.how-it-works {
  background-color: var(--color-navy-dark);
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
}

.step-card {
  text-align: center;
  position: relative;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  border-radius: 50%;
  color: var(--color-navy-dark);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-lg);
}

.step-card h3 {
  color: var(--color-white);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
}

.step-card p {
  color: var(--color-gray-300);
  margin-bottom: 0;
}

/* Pricing Section */

.pricing {
  background-color: var(--color-navy-bg);
}

.pricing-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--space-sm);
  padding: 4px;
  background-color: var(--color-navy-dark);
  border: 1px solid var(--color-navy-lighter);
  border-radius: var(--border-radius-full);
}

.pricing-toggle-note {
  text-align: center;
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 auto var(--space-2xl);
}

.pricing-toggle-button {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-300);
  background: transparent;
  border: none;
  border-radius: var(--border-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}

.pricing-toggle-button:hover {
  color: var(--color-white);
}

.pricing-toggle-button.active {
  color: var(--color-navy-dark);
  background-color: var(--color-gold);
  box-shadow: 0 6px 16px var(--glow-gold);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: var(--space-2xl);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.35);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.pricing-card:hover {
  transform: translateY(-4px);
}

/* CTA anchored to the card base so buttons line up across plans */
.pricing-card .btn {
  margin-top: auto;
  width: 100%;
}

/* Tier ladder: Free muted starter, Basic green active search,
   Premium gold hero. Mirrors the plan comparison table logic. */
.pricing-grid .pricing-card:nth-child(2) {
  border-color: color-mix(in srgb, var(--color-green-success) 35%, transparent);
  background: linear-gradient(180deg, var(--glow-green), transparent 40%), var(--bg-page);
  box-shadow: 0 18px 40px rgba(8, 12, 24, 0.35),
              0 0 24px var(--glow-green);
}

.pricing-grid .pricing-card:nth-child(2) .pricing-card-label {
  color: var(--color-green-light);
}

.pricing-card-popular {
  border-color: var(--color-gold);
  background: linear-gradient(180deg, var(--glow-gold), transparent 45%), var(--bg-page);
  box-shadow: 0 0 0 1px var(--color-gold),
              0 26px 60px var(--glow-gold),
              0 0 32px rgba(var(--gold-rgb), 0.14);
}

.pricing-card-popular .pricing-card-label {
  color: var(--color-gold);
}

/* Premium CTA reads as the strongest action on the page. */
.pricing-card-popular .btn {
  box-shadow: 0 10px 26px rgba(var(--gold-rgb), 0.30);
}

.pricing-card-popular .btn:hover {
  box-shadow: 0 14px 32px rgba(var(--gold-rgb), 0.40);
}

.pricing-card-badge,
.pricing-card-badge-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--gold-rgb),0.12);
  color: var(--color-gold);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  margin-bottom: var(--space-md);
}

.pricing-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.pricing-card-label {
  color: var(--color-gray-300);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
}

.pricing-card-subtitle {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

.pricing-card-price {
  color: var(--color-white);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  margin-top: var(--space-xs);
}

.pricing-card-equiv {
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

/* Actual charge for term plans: stays directly visible under the
   monthly-equivalent price. Hidden on Monthly where it is empty. */
.pricing-card-billed {
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-xs);
}

.pricing-card-billed:empty {
  display: none;
}

.pricing-card-renewal {
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-lg);
}

/* Per-plan guidance line: who each plan is for */
.pricing-card-guidance {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}

.pricing-list {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  padding-left: 0;
  list-style: none;
}

.pricing-list li {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  position: relative;
  padding-left: 1.75rem;
}

.pricing-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--color-gold);
}

/* Tier visual tiles: compact capability and lens-coverage blocks.
   Free muted, Basic green, Premium gold. Tokens only. */
.tier-visual {
  display: grid;
  gap: var(--space-sm);
  background: var(--bg-section);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--color-navy-lighter);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.tier-visual-basic {
  border-left-color: var(--color-green-success);
  background: linear-gradient(180deg, var(--glow-green), transparent 60%), var(--bg-section);
}

.tier-visual-premium {
  border-left-color: var(--color-gold);
  background: linear-gradient(180deg, var(--glow-gold), transparent 60%), var(--bg-section);
}

.tier-visual-label {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tier-visual-basic .tier-visual-label {
  color: var(--color-green-light);
}

.tier-visual-premium .tier-visual-label {
  color: var(--color-gold);
}

.tier-caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem var(--space-sm);
}

.tier-caps li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
}

.tier-caps li::before {
  content: '\2713';
  color: var(--color-gray-500);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.tier-visual-basic .tier-caps li::before {
  color: var(--color-green-success);
}

.tier-visual-premium .tier-caps li::before {
  color: var(--color-gold);
}

.tier-visual-premium .tier-caps {
  grid-template-columns: 1fr;
}

.tier-visual-premium .tier-caps li {
  color: var(--color-gray-100);
}

/* Stacked tiles inside one card sit tight; the last tile keeps
   the larger gap before the main feature list. */
.tier-visual:has(+ .tier-visual) {
  margin-bottom: var(--space-sm);
}

/* Lens chips: compact per-tier lens access. */
.lens-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.lens-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--border-radius-full);
  background: var(--bg-page);
  border: 1px solid var(--glass-border);
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  white-space: nowrap;
}

.tier-visual-basic .lens-chip {
  border-color: color-mix(in srgb, var(--color-green-success) 30%, transparent);
  color: var(--color-gray-200);
}

.tier-visual-premium .lens-chip {
  border-color: rgba(var(--gold-rgb), 0.30);
  color: var(--color-gray-100);
}

/* Pricing outcome strip: compact, premium value pills */
.pricing-outcomes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  max-width: 760px;
  margin: 0 auto var(--space-xl);
}

.pricing-outcome {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  background: var(--glow-gold);
  border: 1px solid var(--glow-gold);
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.pricing-outcome::before {
  content: '\2713';
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
}

/* FAQ Section */

.faq {
  background-color: var(--color-navy-dark);
}

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-md);
}

.faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-navy-lighter);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--color-white);
  padding: var(--space-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.faq-question::after {
  content: '+';
  color: var(--color-gold);
  transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"]::after {
  content: '-';
}

.faq-answer {
  padding: 0 var(--space-lg) var(--space-lg);
}

.faq-answer p {
  color: var(--color-gray-300);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* Footer */

footer {
  background-color: var(--color-navy-bg);
  border-top: 1px solid var(--color-navy-lighter);
  padding: var(--space-3xl) 0;
}

.footer-content {
  text-align: center;
}

.footer-content p {
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-lg);
}

.footer-links a {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  transition: color var(--transition-base);
}

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

/* ============================================================
   Sprint 4A: post-hero polish
   Tighter rhythm, clearer zones, gold emphasis, sharper cards.
   Variables only, no hardcoded hex. Hero is untouched.
   ============================================================ */

/* 1. Cut excessive vertical dead space in post-hero sections.
      Moderate, viewport-aware padding so each zone enters cleanly.
      Hero, trust-bar and final-cta keep their own class padding. */
.why-works,
.how-it-works,
.competitive-comparison,
.pricing-trust,
.pricing,
.plan-comparison,
.faq {
  padding: clamp(48px, 7vh, 80px) 0;
  border-top: 1px solid var(--glass-border);
}

.section-header {
  margin-bottom: var(--space-3xl);
}

/* Pull oversized panel/table gaps in tighter. */
.comparison-layout,
.comparison-cta-panel,
.pricing-trust-panel {
  margin-top: var(--space-2xl);
}

/* 2. Scanability: headings slightly more dramatic, subtitles narrower. */
.section-title {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.section-subtitle {
  max-width: 540px;
}

/* 3. One gold emphasis phrase per major section. */
.title-gold,
.final-cta-box h2 .title-gold {
  color: var(--color-gold);
}

/* 4. Clearer card hierarchy with a subtle lift on hover. */
.journey-card,
.step-item,
.value-card,
.feature-card,
.proof-card {
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.journey-card:hover,
.step-item:hover,
.value-card:hover,
.feature-card:hover,
.proof-card:hover {
  transform: translateY(-4px);
  border-color: var(--glow-gold);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.30);
}

/* 5. Tables: more breathing room, Kaxori as the clear winner column. */
.comparison-table-wrapper {
  margin-top: var(--space-xl);
}

.plan-comparison-table-wrapper {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

/* ============================================================
   SPRINT-8D: Plan comparison decision matrix
   Branded frame + gold/green linework + tier lanes.
   Free = muted starter, Basic = green active-search,
   Premium = gold winner (visually strongest). Existing tokens only.
   ============================================================ */

/* Branded outer frame around the matrix. */
.plan-comparison-table-wrapper {
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-radius: var(--border-radius-xl);
  background: var(--bg-section-alt);
}

/* Warm brand tone on the grid lines + roomier cells. */
.plan-comparison-table th,
.plan-comparison-table td {
  padding: var(--space-md) var(--space-lg);
  vertical-align: middle;
  border-color: rgba(var(--gold-rgb), 0.12);
}

.plan-comparison-table thead th {
  text-align: center;
  vertical-align: top;
}

.plan-comparison-table thead th:first-child,
.plan-comparison-table tbody th {
  text-align: left;
}

.plan-comparison-table tbody td {
  text-align: center;
}

/* --- Left label column: lifted navy surface + gold rail --- */
.plan-comparison-table thead th:first-child {
  background: var(--surface-card-strong);
  border-bottom: 2px solid var(--color-gold);
}

.plan-comparison-table tbody th {
  background: var(--surface-card-strong);
  border-left: 3px solid rgba(var(--gold-rgb), 0.5);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

/* Subtle row hover for scanability. */
.plan-comparison-table tbody tr {
  transition: filter var(--transition-base);
}

.plan-comparison-table tbody tr:hover th,
.plan-comparison-table tbody tr:hover td {
  filter: brightness(1.08);
}

/* Tier name + badge in the header cells. */
.plan-tier-label {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.1;
}

.plan-badge {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 0.22rem 0.6rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Restrained green availability check (used only on capability flips). */
.plan-yes::before {
  content: "\2713";
  margin-right: 0.4rem;
  color: var(--color-green-success);
  font-weight: var(--font-weight-bold);
}

/* --- Free: muted starter lane --- */
.plan-comparison-table thead th.plan-col-free {
  border-top: 3px solid var(--color-gray-600);
  border-bottom: 2px solid var(--color-gray-600);
}

.plan-comparison-table thead th.plan-col-free .plan-tier-label {
  color: var(--color-gray-200);
}

.plan-col-free .plan-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-gray-300);
}

.plan-comparison-table tbody td:nth-child(2) {
  color: var(--color-gray-400);
}

/* --- Basic: green active-search lane --- */
.plan-comparison-table thead th.plan-col-basic {
  border-top: 3px solid var(--color-green-success);
  border-bottom: 2px solid var(--color-green-success);
  border-left: 1px solid var(--color-green-success);
  border-right: 1px solid var(--color-green-success);
  background: var(--glow-green);
}

.plan-comparison-table thead th.plan-col-basic .plan-tier-label {
  color: var(--color-green-light);
}

.plan-col-basic .plan-badge {
  background: var(--glow-green);
  color: var(--color-green-light);
}

.plan-comparison-table tbody td:nth-child(3) {
  background: var(--glow-green);
  border-left: 1px solid var(--color-green-success);
  border-right: 1px solid var(--color-green-success);
}

/* --- Premium: gold winner lane (strongest, pulls the eye) --- */
.plan-comparison-table thead th.plan-col-premium {
  border-top: 4px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  border-left: 2px solid rgba(var(--gold-rgb), 0.55);
  border-right: 2px solid rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.16);
  box-shadow: inset 0 0 28px var(--glow-gold);
}

.plan-comparison-table thead th.plan-col-premium .plan-tier-label {
  color: var(--color-gold);
}

.plan-col-premium .plan-badge {
  background: var(--color-gold);
  color: var(--color-navy-dark);
}

.plan-comparison-table tbody td:nth-child(4) {
  background: rgba(var(--gold-rgb), 0.11);
  border-left: 2px solid rgba(var(--gold-rgb), 0.55);
  border-right: 2px solid rgba(var(--gold-rgb), 0.55);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.plan-comparison-table tbody tr:last-child td:nth-child(4) {
  border-bottom: 3px solid var(--color-gold);
}

/* Keep cells readable on smaller screens (wrapper keeps horizontal scroll). */
@media (max-width: 768px) {
  .plan-comparison-table th,
  .plan-comparison-table td {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ============================================================
   Sprint 4A: Hero + Trust Strip polish
   Sharper hierarchy, proof-forward cards, tighter top of page.
   Tokens only. Preserves the working above-the-fold hero layout:
   no tall absolute stacks, no large gold background blobs.
   ============================================================ */

/* Hero left column: tighten rhythm so the eye runs
   headline -> subhead -> primary CTA -> proof cards -> trust bullets. */
.hero-left {
  gap: clamp(10px, 1.4vh, 16px);
}

/* Primary CTA carries the most weight; secondary reads as a quiet glass option. */
.hero .btn-primary {
  box-shadow: 0 10px 28px rgba(var(--gold-rgb),0.28);
}

.hero .btn-secondary {
  background: var(--glass-bg);
}

/* Trust bullets sit under the CTA as quiet reassurance, not a headline. */
.hero-trust-row {
  gap: 6px 16px;
  margin-top: var(--space-xs);
}

.hero-trust-item {
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

.hero-trust-item .trust-dot {
  width: 7px;
  height: 7px;
}

/* Market + source notes: smallest tier, clearly subordinate. */
.hero-market-line,
.hero-source-note {
  margin-top: var(--space-xs);
}

/* Proof cards: glass surfaces that read as product evidence, not decoration. */
.hero-product-collage .panel {
  background: linear-gradient(180deg, var(--surface-card-strong), var(--surface-card));
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
}

/* Lead proof card gets a subtle gold edge and a corner proof badge. */
.hero-product-collage .panel-1 {
  position: relative;
  border-color: rgba(var(--gold-rgb),0.30);
  background: linear-gradient(180deg, var(--glow-gold), var(--surface-card));
}

.hero-product-collage .panel-1 .panel-badge {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  margin: 0;
}

/* Green stays strictly on positive proof signals. */
.hero-product-collage .panel-status-strong,
.hero-product-collage .keyword-item .ok {
  color: var(--color-green-success);
}

/* Trust Strip: a thin reassurance bridge that blends out of the hero. */
.trust-bar {
  background: linear-gradient(180deg, var(--bg-hero), var(--bg-section));
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  margin-top: 0;
  padding: var(--space-md) 0;
}

.trust-bar-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-2xl);
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.trust-bar-item {
  position: relative;
  gap: var(--space-sm);
}

/* Hairline dividers between bullets so the strip scans as one quick line. */
.trust-bar-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--space-2xl) / -2);
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--glass-border);
}

@media (max-width: 1024px) {
  .trust-bar-item:not(:last-child)::after {
    display: none;
  }
}

/* ============================================================
   Mobile launch fixes (SPRINT-9D).
   Kept at the end of the file: the desktop pricing grid and
   several card bases are declared later in source than the
   shared mobile media block, so phone overrides must sit after
   them to win the cascade. Desktop is untouched.
   ============================================================ */

/* Phone-only table alternates: hidden wherever desktop tables show. */
.comp-mobile-cards,
.plan-mobile-cards {
  display: none;
}

/* Comparison card styles (rendered on phones only). */
.comp-mobile-card,
.plan-mobile-card {
  background: var(--bg-page);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}

.comp-mobile-card {
  border-left: 3px solid var(--color-navy-lighter);
}

.comp-mobile-card-kaxori {
  border-color: rgba(var(--gold-rgb), 0.30);
  border-left-color: var(--color-gold);
  background: linear-gradient(180deg, var(--glow-gold), transparent 50%), var(--bg-page);
}

.comp-mobile-name {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.comp-mobile-card-kaxori .comp-mobile-name {
  color: var(--color-gold);
}

.comp-mobile-sub {
  display: block;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  margin-top: 0.15rem;
  margin-bottom: var(--space-sm);
}

.comp-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.comp-mobile-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.comp-mobile-list li::before {
  position: absolute;
  left: 0;
  font-weight: var(--font-weight-bold);
}

.comp-mobile-yes::before {
  content: '\2713';
  color: var(--color-green-success);
}

.comp-mobile-part::before {
  content: '\2713';
  color: var(--color-gray-600);
}

.comp-mobile-no::before {
  content: '\2715';
  color: var(--color-gray-600);
}

/* Plan summary cards: Free muted, Basic green, Premium gold. */
.plan-mobile-card {
  border-top: 3px solid var(--color-navy-lighter);
}

.plan-mobile-card-basic {
  border-color: color-mix(in srgb, var(--color-green-success) 25%, transparent);
  border-top-color: var(--color-green-success);
}

.plan-mobile-card-premium {
  border-color: rgba(var(--gold-rgb), 0.30);
  border-top-color: var(--color-gold);
  background: linear-gradient(180deg, var(--glow-gold), transparent 50%), var(--bg-page);
}

.plan-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.plan-mobile-name {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.plan-mobile-badge {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
}

.plan-mobile-card-basic .plan-mobile-badge {
  color: var(--color-green-light);
}

.plan-mobile-card-premium .plan-mobile-badge {
  color: var(--color-gold);
}

.plan-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.plan-mobile-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.plan-mobile-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-green-success);
  font-weight: var(--font-weight-bold);
}

.plan-mobile-card-premium .plan-mobile-list li::before {
  color: var(--color-gold);
}

.plan-mobile-best {
  margin: var(--space-sm) 0 0;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

/* Pricing stacks below 900px (re-declared after the desktop
   3-column base so it wins the cascade on phones). */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 768px) {
  /* A. Header: one clean row - logo left, compact CTA, hamburger. */
  .navbar-container {
    gap: var(--space-sm);
    padding: 0 var(--space-md);
  }

  .navbar-actions {
    margin-left: auto;
    gap: var(--space-sm);
  }

  /* Log In lives inside the mobile menu on phones. */
  .navbar-actions .btn-login {
    display: none;
  }

  .navbar-actions .btn {
    min-height: 38px;
    padding: 0.45rem 0.8rem;
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }

  .navbar-logo .site-logo {
    height: 32px;
  }

  /* B. No page-level horizontal scroll. Intentional scrolling
     stays inside contained wrappers only. */
  html,
  body {
    overflow-x: clip;
  }

  .comparison-layout > *,
  .comp-battlecard,
  .comparison-table-wrapper,
  .plan-comparison-table-wrapper {
    min-width: 0;
  }

  .pricing-toggle {
    flex-wrap: wrap;
  }

  /* C. Pricing cards: full-width with tighter padding. */
  .pricing-card {
    padding: var(--space-lg);
  }

  /* D + E. Phones get the stacked card summaries instead of
     the wide desktop tables. */
  .comparison-table-wrapper,
  .plan-comparison-table-wrapper {
    display: none;
  }

  .comp-mobile-cards,
  .plan-mobile-cards {
    display: grid;
    gap: var(--space-md);
  }

  .comp-mobile-cards {
    padding: var(--space-lg);
  }

  .plan-mobile-cards {
    margin-top: var(--space-xl);
  }

  /* F. Tighter mobile rhythm without losing the premium feel. */
  .why-works,
  .how-it-works,
  .competitive-comparison,
  .pricing-trust,
  .pricing,
  .plan-comparison,
  .faq {
    padding: var(--space-2xl) 0;
  }

  .section-header {
    margin-bottom: var(--space-xl);
  }

  .journey-card,
  .comp-stat-card,
  .comp-diff-card {
    padding: var(--space-lg);
  }

  .comp-core-callout {
    padding: var(--space-xl) var(--space-lg);
  }

  .pricing-trust-panel {
    padding: var(--space-2xl) var(--space-lg);
  }

  .comp-battlecard {
    margin-top: var(--space-xl);
  }

  .plan-comparison-table-wrapper {
    margin-top: 0;
  }
}