/* ==========================================================================
   Prosper202 Pro page (/pro/) — additions on top of reimagined.css
   Only /pro/ loads this file. It reuses the site's tokens and patterns
   (hero, signal strip, app cards, section headers, requirement pills) and
   adds the offer card, comparison table, pricing, FAQ and closing CTA.
   ========================================================================== */

/* Current page marker in the shared nav (same rules as docs.css) */
.nav-links a[aria-current="page"] {
  color: #fff;
}

.nav-links a[aria-current="page"]::after {
  width: 100%;
}

.mobile-nav a[aria-current="page"] {
  color: var(--color-accent-primary);
}

/* ---------- Hero ---------- */
.pro-hero {
  min-height: 0;
}

.pro-hero .hero-content h1 {
  font-size: clamp(3rem, 5.6vw, 5.4rem);
}

.pro-fineprint,
.pro-signed-in {
  max-width: 540px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
}

.pro-fineprint {
  margin-top: 1.5rem;
}

.pro-fineprint strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.pro-signed-in {
  margin-top: 0.6rem;
}

/* Offer card: the dashboard-mockup shell with price and trial timeline */
.pro-offer {
  min-height: 0;
}

.pro-offer-price {
  padding: 26px 20px 22px;
  border-bottom: 1px solid #343a32;
}

.pro-offer-label,
.pro-offer-timeline span {
  color: #889084;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pro-offer-price strong {
  display: block;
  margin: 12px 0 8px;
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.pro-offer-was {
  color: #aab2a6;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.pro-offer-was s {
  color: #889084;
}

.pro-offer-timeline {
  display: grid;
  gap: 1px;
  margin: 20px 20px 0;
  overflow: hidden;
  background: #343a32;
  border: 1px solid #343a32;
  border-radius: var(--radius-md);
}

.pro-offer-timeline li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #1e231d;
}

.pro-offer-timeline small {
  color: #c9cfc5;
  font-size: 0.8rem;
  line-height: 1.4;
}

.pro-offer-timeline strong {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
}

/* ---------- What's included ---------- */
.pro-included {
  background: #dfe5ff;
  border-top: 1px solid var(--color-text-primary);
}

.pro-included .section-header::after {
  background: var(--color-accent-orange);
}

.pro-included .app-points em {
  font-style: normal;
  font-weight: 600;
}

/* ---------- Free vs Pro ---------- */
.pro-compare {
  background: #fffef8;
  border-top: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
}

.pro-compare .section-header::after {
  background: var(--color-accent-blue);
}

.pro-table-wrap {
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-md);
  box-shadow: 12px 12px 0 var(--color-accent-blue);
}

.pro-table {
  width: 100%;
  border-collapse: collapse;
}

.pro-table th,
.pro-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.pro-table thead th {
  background: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pro-table thead th.pro-col {
  background: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.pro-table tbody th,
.pro-table tfoot th {
  color: var(--color-text-primary);
  font-size: 0.92rem;
  font-weight: 500;
}

.pro-table td {
  width: 22%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.pro-table thead th:not(:first-child) {
  text-align: center;
}

.pro-table td.pro-col {
  background: rgba(199, 255, 72, 0.22);
}

.pro-yes {
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.pro-no {
  color: var(--color-text-tertiary);
}

.pro-table tfoot th,
.pro-table tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--color-text-primary);
  font-weight: 600;
}

.pro-table tfoot td {
  font-size: 0.74rem;
  line-height: 1.5;
}

.pro-compare .requirements {
  margin-top: 4rem;
}

.pro-reqs-note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.pro-reqs-note a {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* ---------- Pricing ---------- */
.pro-pricing {
  background: var(--color-text-primary);
}

.pro-pricing .section-header::before {
  color: var(--color-accent-primary);
}

.pro-pricing .section-header h2,
.pro-pricing .section-header p {
  color: #fff;
}

.pro-pricing .section-header::after {
  border-color: var(--color-accent-primary);
  background: transparent;
}

.pro-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.pro-price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 34px;
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
}

.pro-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.pro-price strong {
  font-family: var(--font-mono);
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.pro-price span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pro-price-was {
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.pro-price-points {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--color-text-primary);
}

.pro-price-points li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid rgba(17, 20, 16, 0.25);
  font-size: 0.9rem;
  line-height: 1.5;
}

.pro-price-points li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--color-accent-blue);
  font-family: var(--font-mono);
}

.pro-price-card .btn-primary {
  box-shadow: 5px 5px 0 #fff;
}

.pro-price-card .btn-primary:hover {
  box-shadow: 2px 2px 0 #fff;
}

.pro-price-card .btn,
.pro-final .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.pro-price-note {
  color: var(--color-text-primary);
  font-size: 0.82rem;
}

.pro-steps {
  border: 1px solid #3c4239;
  border-radius: var(--radius-md);
}

.pro-steps li {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #3c4239;
}

.pro-steps li:last-child {
  border-bottom: 0;
}

.pro-step-when {
  padding-top: 4px;
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pro-steps h3 {
  margin-bottom: 6px;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.pro-steps p {
  color: #9fa79b;
  font-size: 0.86rem;
}

.pro-guarantee {
  margin-top: 12px;
  padding: 20px 24px;
  background: var(--color-accent-orange);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
}

.pro-guarantee strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pro-skool-note {
  margin-top: 1.25rem;
  color: #9fa79b;
  font-size: 0.86rem;
}

/* ---------- FAQ ---------- */
.pro-faq-section {
  background: var(--color-bg-secondary);
}

.pro-faq-section .section-header::after {
  background: var(--color-accent-blue);
}

.pro-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-text-primary);
  border-left: 1px solid var(--color-text-primary);
}

.pro-faq-item {
  padding: 30px;
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
}

.pro-faq-item h3 {
  margin-bottom: 12px;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.pro-faq-item p {
  font-size: 0.92rem;
}

.pro-faq-item p + p {
  margin-top: 0.8rem;
}

.pro-faq-item a {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* ---------- Closing CTA ---------- */
.pro-final {
  background: #f1c4a8;
}

.pro-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 3rem;
  align-items: end;
}

.pro-final h2 {
  margin-bottom: 1.25rem;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.pro-final p {
  max-width: 560px;
  color: var(--color-text-primary);
}

.pro-final-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.pro-final-cta .pro-signed-in {
  margin-top: 0.4rem;
  color: var(--color-text-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  .pro-pricing-grid,
  .pro-final-inner {
    grid-template-columns: 1fr;
  }

  .pro-final-inner {
    gap: 2rem;
  }

  .pro-faq {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .pro-hero .hero-content h1 {
    font-size: clamp(2.6rem, 13vw, 3.6rem);
  }

  .pro-offer-price {
    padding: 20px 14px 18px;
  }

  .pro-offer-timeline {
    margin: 14px 12px 0;
  }

  .pro-offer-timeline li {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  /* keep the guarantee line clear of the signal card that overlaps the
     card's bottom edge at this width */
  .pro-offer .mockup-footer {
    padding-bottom: 76px;
  }

  .pro-table th,
  .pro-table td {
    padding: 12px 10px;
  }

  .pro-table tbody th,
  .pro-table tfoot th {
    font-size: 0.84rem;
  }

  .pro-table td {
    width: 26%;
  }

  .pro-table-wrap {
    box-shadow: 7px 7px 0 var(--color-accent-blue);
  }

  .pro-price-card {
    padding: 24px 20px;
  }

  .pro-price-card .btn,
  .pro-final .btn {
    width: 100%;
  }

  .pro-steps li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 20px;
  }

  .pro-faq-item {
    padding: 22px;
  }
}

/* ---------- The p202 command line (reuses the included-section cards) ---------- */
.pro-cli {
  background: #f3f5ff;
}

.pro-cli .app-snippet {
  color: var(--color-text-primary);
}

.pro-cli .pro-cli-jobs {
  margin-top: 40px;
}

.pro-cli-more {
  margin-top: 20px;
  max-width: 72ch;
}