/* v395 — one dark palette; light sections reserved for product and plans. */
:root {
  --trail-deep: #081e26;
  --trail-panel: #112d35;
  --trail-copy: #bfced1;
  --trail-mint: #42dcc0;
  --trail-gold: #f8c243;
}

.progress-showcase,
.live-product,
.faq { background: var(--trail-deep); color: #f6faf8; }
.progress-showcase { padding-bottom: 72px; }
.live-product { padding-top: 0; }
.live-grid { padding-top: 76px; border-top: 1px solid #29424a; }
.workflow { border-top: 1px solid #29424a; }
.progress-showcase .section-heading h2 em,
.live-product .section-heading h2 em,
.workflow .section-heading h2 em { color: var(--lime); }
.progress-showcase .section-heading > p:last-child,
.live-product .section-heading > p:last-of-type,
.workflow .section-heading > p:last-of-type,
.workflow .steps p { color: var(--trail-copy); }
.progress-showcase .section-heading { max-width: 820px; }
.progress-showcase .section-heading > p:last-child { margin-inline: auto; }
.progress-showcase .section-heading h2 em { display: block; }

.progress-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 36px;
  background: var(--trail-panel);
  border: 1px solid #36505a;
  border-top: 3px solid var(--lime);
  border-radius: 24px;
  box-shadow: 0 16px 36px rgb(0 0 0 / 12%);
}
.progress-summits { border-top-color: var(--trail-mint); }
.progress-card::after { display: none; }
.progress-card-top { margin-bottom: 28px; }
.progress-label { font-size: .8rem; color: var(--lime); }
.progress-summits .progress-label { color: var(--trail-mint); }
.progress-icon { flex-shrink: 0; background: var(--lime); }
.progress-summits .progress-icon { background: var(--trail-mint); }
.progress-card-top strong { color: var(--trail-copy); font-size: .75rem; }
.progress-card h3 {
  color: var(--lime);
  font-size: clamp(1.8rem, 2.7vw, 2.25rem);
  line-height: 1.12;
  max-width: 440px;
}
.progress-summits h3 { color: var(--trail-mint); }
.progress-card > p { color: var(--trail-copy); margin-bottom: 28px; }
.progress-stats { margin-top: auto; }
.progress-stats span {
  background: var(--trail-deep);
  border: 1px solid #29424a;
  font-size: .8rem;
  color: var(--trail-copy);
}
.progress-stats b { font-size: 1.5rem; color: var(--lime); }
.progress-stats span:nth-child(2) b { color: var(--trail-mint); }
.progress-stats span:nth-child(3) b { color: var(--trail-gold); }
.summit-ribbon {
  margin-top: auto;
  min-height: 86px;
  background: var(--trail-deep);
  border-color: #29424a;
  flex-wrap: wrap;
}
.summit-ribbon span { color: var(--trail-mint); font-size: .75rem; }
.summit-ribbon b { color: #f6faf8; font-size: 1rem; }
.summit-ribbon i { color: var(--trail-mint); }
.progress-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.progress-actions p { margin: 0; color: var(--trail-copy); font-size: .875rem; }
.future-note { max-width: 780px; color: #a6bdc2; line-height: 1.7; font-size: .8125rem; }
.future-note strong { color: var(--trail-copy); }

.app-preview,
.live-console {
  background: var(--trail-panel);
  border-color: #3f736e;
  box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
}
.app-preview::before,
.app-preview::after,
.live-console::after { display: none; }
.live-now { background: var(--trail-deep); border-color: #31525b; }
.live-now h3 { color: var(--trail-mint); }
.live-console-top b { color: var(--trail-copy); font-family: inherit; font-size: .875rem; letter-spacing: .08em; }
.live-metrics b { color: var(--lime); }
.live-metrics article:nth-child(2) b { color: var(--trail-mint); }
.live-metrics article:nth-child(3) b { color: var(--trail-gold); }
.live-metrics span { color: var(--trail-copy); font-size: .75rem; }
.live-now p, .live-points span { color: var(--trail-copy); }
.preview-stats article:first-child { background: #153d3e; border-color: #367b71; }
.preview-stats article:last-child { background: #333627; border-color: #78713d; }
.preview-stats article:first-child strong { color: var(--trail-mint); }
.preview-stats article:last-child strong { color: var(--trail-gold); }
.preview-stats article::after { display: none; }
.microcopy { color: #c4d1cb; font-size: .875rem; }
.proof-grid span { color: #b9cac3; font-size: .875rem; }
.live-points span { font-size: 1rem; }
.eyebrow, .card-kicker { font-size: .75rem !important; }
.live-now small, .live-console-top { font-size: .75rem; }
.preview-score small, .preview-score span,
.preview-session small, .preview-session span,
.preview-stats span, .preview-stats small { font-size: .8125rem; }

.pricing { background: var(--cream); }
.price-card { padding: 64px 36px 36px; }
.price-card.highlighted { background: var(--trail-deep); border: 2px solid #779b40; }
.price-card .plan-name { font-size: 1.15rem; }
.price-card.highlighted .plan-name { color: var(--lime); }
.highlighted .price span,
.highlighted > p,
.price-card small { color: var(--trail-copy); }
.price-card small { font-size: .875rem; }
.price-card.highlighted li::before { color: var(--lime); }
.recommended { position: absolute; top: 22px; right: 24px; font-size: .75rem; }
.pricing-note { max-width: 880px; margin: 28px auto 0; font-size: .875rem; line-height: 1.75; color: #4e625a; }
.pricing-context { max-width: 800px; margin: -24px auto 32px; text-align: center; color: #4e625a; font-size: .9375rem; }

.faq .section-heading { margin-bottom: 0; }
.faq .eyebrow.dark { color: var(--trail-mint); }
.faq .accordions details { border-color: #36505a; }
.faq .accordions details[open] { background: var(--trail-panel); border-radius: 12px; }
.faq .accordions summary { padding: 24px 48px 24px 20px; line-height: 1.5; }
.faq .accordions summary:hover { color: var(--lime); }
.faq .accordions summary span::before,
.faq .accordions summary span::after { background: var(--trail-mint); right: 16px; }
.faq .accordions details p { color: var(--trail-copy); padding: 0 24px 24px 20px; margin-bottom: 0; }
.faq .accordions details p strong { color: #f6faf8; }
.faq a:focus-visible,
.faq summary:focus-visible,
.progress-actions a:focus-visible { outline-color: var(--trail-mint); }
.final-cta { border-top: 1px solid #36505a; }
.final-inner > p:not(.eyebrow), .tester-note { color: #c4d2d4; }
.tester-note { font-size: .875rem; line-height: 1.65; }
.button { white-space: normal; text-align: center; line-height: 1.35; padding-block: 12px; }
.play-button svg { flex-shrink: 0; }

/* Lighthouse C18: readable small copy on both light and dark sections. */
.feature-card .card-kicker { color: #4d7019 !important; }
.feature-card.feature-wide .card-kicker,
.feature-card.feature-photo .card-kicker { color: var(--lime) !important; }
#planes .section-heading > p:last-child { color: #4f6059; }
.footer-grid h2 { color: #bbc9c3; font-size: .75rem; }
.footer-grid > div:first-child p,
.footer-bottom { color: #adbcb5; }
.footer-bottom { font-size: .75rem; }

/* The document stays readable if scripts are blocked or fail. */
.reveal { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-card { padding: 24px; }
  .progress-card-top { gap: 8px; }
  .progress-stats { grid-template-columns: 1fr; }
  .progress-stats span { grid-template-columns: 1fr 1fr; align-items: center; }
  .summit-ribbon { align-content: center; }
  .live-grid { padding-top: 60px; }
}
@media (max-width: 640px) {
  .progress-grid { grid-template-columns: 1fr; }
  .progress-showcase { padding-bottom: 52px; }
  .progress-card { min-height: auto; }
  .progress-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .progress-stats span { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 8px; font-size: .75rem; }
  .progress-stats b { font-size: 1.25rem; }
  .progress-actions { flex-direction: column; gap: 12px; }
  .progress-actions .button { width: 100%; }
  .price-card { padding: 60px 28px 28px; }
  .faq-grid { gap: 30px; }
  .pricing-context { margin-top: -16px; }
}