/* ============================================================
   Fresh Web landing pages (pricing, compare, websites for
   coaches). Loaded after /case-studies/cs.css and
   /guides/guides.css, which supply the chrome, tokens and the
   article layout. Only landing-specific pieces live here.
   ============================================================ */

.l-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); scroll-margin-top: 100px; }
.l-section h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.25; color: var(--text-primary); margin-bottom: 14px; text-wrap: balance; }
.l-section h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-primary); margin: 28px 0 8px; }

.l-section .g-steps { margin-top: 28px; }
.l-section .g-step h3 { font-size: 19px; margin: 4px 0 8px; }

/* Price card */
.l-price { margin-top: 36px; padding: 28px; background: var(--navy); color: var(--white); border-radius: var(--radius-lg); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: center; }
.l-price-figure { font-size: clamp(40px, 6vw, 56px); font-weight: 900; letter-spacing: -2px; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.l-price-figure small { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,0.7); }
.l-price ul { list-style: none; display: grid; gap: 6px; }
.l-price li { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.85); padding-left: 22px; position: relative; }
.l-price li::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }

/* Included / feature checklist */
.l-checks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px 24px; margin-top: 18px; }
.l-checks li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.l-checks li::before { content: ''; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); box-shadow: inset 0 0 0 4px var(--green-light); }
.l-checks strong { color: var(--text-primary); font-weight: 700; }

/* Fit / not-a-fit pair */
.l-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.l-pair > div { padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.l-pair > div:first-child { background: var(--bg-secondary); }
.l-pair h3 { margin-top: 0; font-size: 16px; }
.l-pair ul { padding-left: 20px; display: grid; gap: 8px; }
.l-pair li { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }

/* Comparison table */
.l-compare { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.l-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.l-compare th, .l-compare td { text-align: left; vertical-align: top; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; border-top: 1px solid var(--border); }
.l-compare thead td { border-top: none; background: var(--bg-secondary); }
.l-compare thead th { border-top: none; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); background: var(--bg-secondary); }
.l-compare thead th.is-us { color: var(--navy); background: var(--green-light); }
.l-compare tbody th { width: 22%; font-weight: 700; color: var(--text-primary); }
.l-compare td { color: var(--text-secondary); }
.l-compare td.is-us { background: #F7FBF5; color: var(--text-primary); }

/* FAQ */
.l-faq { margin-top: 8px; }
.l-faq h3 { font-size: 17px; }
.l-faq h3 + p { margin-top: 0; }

@media (max-width: 768px) {
  .l-section { margin-top: 44px; padding-top: 32px; }
  .l-section h2 { font-size: 22px; }
  .l-price { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .l-pair { grid-template-columns: minmax(0, 1fr); }
  .l-compare thead { display: none; }
  .l-compare table, .l-compare tbody, .l-compare tr, .l-compare th, .l-compare td { display: block; width: auto; }
  .l-compare tr { padding: 14px 16px; border-top: 1px solid var(--border); }
  .l-compare tr:first-child { border-top: none; }
  .l-compare tbody th { padding: 0 0 8px; border: none; font-size: 15px; }
  .l-compare td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 6px 0; border: none; background: none; }
  .l-compare td.is-us { background: none; }
  .l-compare td::before { content: attr(data-label); font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
  .l-compare td.is-us::before { color: var(--navy); }
}