/* ============================================================================
   Program / sales page components — extracted to keep style.css under 250 lines.
   Loaded by base.html alongside style.css.
   ============================================================================ */

/* ── Section eyebrow ─────────────────────────────────────────────────────── */
.section-eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 700; color: var(--accent-deep); margin-bottom: 8px; }

/* ── Offer price (hero / final CTA) ──────────────────────────────────────── */
.offer-price { font-size: 1.4rem; margin: 14px 0; }
.price-now { font-size: 1.9rem; font-weight: 800; color: var(--ink); }
.price-was { text-decoration: line-through; color: var(--muted); font-size: 1.05rem; font-weight: 600; margin-right: 8px; }
.photo-hero .price-now { color: #fff; }
.photo-hero .price-was { color: rgba(255, 255, 255, 0.7); }

/* ── Method badges ───────────────────────────────────────────────────────── */
.method-badges { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.method-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); white-space: nowrap; }

/* ── Benefits grid ───────────────────────────────────────────────────────── */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }

/* ── Module list (numbered) ──────────────────────────────────────────────── */
.module-list { counter-reset: mod; padding: 0; margin: 18px 0; display: grid; gap: 12px; list-style: none; }
.module-item { counter-increment: mod; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 16px 56px; position: relative; box-shadow: var(--shadow-card); }
.module-item::before { content: counter(mod); position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 800; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; }
.module-title { display: block; font-weight: 700; }
.module-blurb { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 3px; }

/* ── Value stack ─────────────────────────────────────────────────────────── */
.value-stack { list-style: none; padding: 0; margin: 16px 0; }
.value-stack li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.value-stack li:last-child { border-bottom: none; }
.sp-stack__label { font-weight: 700; }
.sp-stack__detail { color: var(--muted); font-size: 0.92rem; text-align: right; }

/* ── Guarantee section ───────────────────────────────────────────────────── */
.guarantee-section { display: flex; align-items: center; gap: 24px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin: 0; }
.guarantee-seal { flex-shrink: 0; display: block; width: 72px; height: 82px; }
.guarantee-copy h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--accent-deep); }
.guarantee-copy p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.guarantee-copy a { display: inline-block; margin-top: 8px; font-size: 0.82rem; font-weight: 700; color: var(--accent-deep); }

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.faq { max-width: 720px; margin: 0 auto; }
.faq > h2 { text-align: center; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; margin-bottom: 10px; background: var(--card); box-shadow: var(--shadow-card); }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; font-size: 1.2rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; }

/* ── Bibliography fold ───────────────────────────────────────────────────── */
.refs-fold { border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; background: var(--card); box-shadow: var(--shadow-card); margin-top: 0; }
.refs-fold summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 16px 0; list-style: none; color: var(--accent-deep); }
.refs-fold summary::-webkit-details-marker { display: none; }
.refs-fold summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; font-size: 1.2rem; }
.refs-fold[open] summary::after { content: "\2013"; }

/* ── Sticky CTA bar ──────────────────────────────────────────────────────── */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 24px; display: none; align-items: center; justify-content: center; gap: 20px; z-index: 55; box-shadow: 0 -4px 16px rgba(20, 21, 15, 0.08); }
.sticky-cta.visible { display: flex; }
.sticky-price { font-size: 0.92rem; color: var(--ink); }
.sticky-price strong { font-size: 1.15rem; }
.sticky-price s { color: var(--muted); font-size: 0.88rem; margin-left: 4px; }

/* ── Blog layout (2-column: main + sidebar) ─────────────────────────────── */
.blog-wrap { padding: 3rem 24px; }
.blog-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.blog-intro { margin: 10px auto 0; color: var(--muted); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.blog-main { min-width: 0; }
.blog-main.article { padding-top: 0; max-width: var(--maxw); }

/* ── Post cards ─────────────────────────────────────────────────────────── */
.post-cards { display: grid; gap: 20px; }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--card); color: var(--ink); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.post-card-thumb { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-card-body { padding: 22px 26px 24px; }
.post-card-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; line-height: 1.3; }
.post-card-desc { color: var(--muted); font-size: 0.96rem; margin: 0 0 10px; line-height: 1.55; }
.post-card-meta { font-size: 0.8rem; font-weight: 600; color: var(--accent-deep); }
.blog-pager { display: flex; justify-content: space-between; margin-top: 2rem; }

/* ── Blog sidebar ───────────────────────────────────────────────────────── */
.blog-aside { position: sticky; top: 92px; display: grid; gap: 20px; }
.aside-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.aside-kicker { display: inline-block; font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.aside-card h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.25; color: var(--ink); }
.aside-guide { display: block; text-decoration: none; color: inherit; background: var(--accent-soft); border-color: transparent; transition: border-color .14s ease; }
.aside-guide:hover { border-color: var(--accent); text-decoration: none; }
.aside-guide-body { padding: 22px 24px; }
.aside-guide p { margin: 0 0 12px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.aside-promo { display: block; text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.aside-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.aside-promo-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.aside-promo-body { padding: 18px 22px 20px; }
.aside-price { margin: 0 0 8px; }
.aside-price .now { color: var(--accent-deep); font-weight: 800; font-size: 1.35rem; }
.aside-promo-note { margin: 0 0 12px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.aside-promo-cta { color: var(--accent); font-weight: 800; font-size: 0.9rem; }
.aside-trust { padding: 22px 24px; }
.aside-trust p { margin: 0 0 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.aside-guarantee { font-weight: 700; color: var(--angel); font-size: 0.85rem; margin-top: 10px; }

/* ── Sidebar opt-in form ──────────────────────────────────────────────── */
.aside-optin { padding: 22px 24px; background: var(--accent-soft); border-color: transparent; }
.aside-optin p { margin: 0 0 12px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.aside-form { display: grid; gap: 8px; }
.aside-form input[type="email"], .aside-form input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.88rem; }
.aside-form .btn-sm { padding: 8px 14px; font-size: 0.85rem; width: 100%; }
.aside-form-msg { font-size: 0.8rem; margin: 0; }
.aside-form-msg.err { color: var(--danger, #c62828); }
.aside-form-ok { color: var(--angel, #2e7d32); font-weight: 700; font-size: 0.9rem; margin: 0; }
.aside-micro { font-size: 0.72rem; color: var(--muted); margin: 8px 0 0; }

/* ── Article page ───────────────────────────────────────────────────────── */
.breadcrumb { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.article-meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }
.article-hero { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius); margin-bottom: 2rem; box-shadow: var(--shadow-card); }
.article-cta { margin: 2.5rem 0; }
.article-cta-alt { font-size: 0.88rem; color: var(--muted); margin-top: 12px; }
.related-articles { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.related-articles h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.related-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.related-list a { display: block; padding: 12px 16px; background: var(--paper-2); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; font-size: 0.95rem; transition: background .14s ease; }
.related-list a:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; }

/* ── Blog responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 32px; }
  .blog-aside { position: static; }
}
@media (min-width: 740px) and (max-width: 900px) {
  .post-card { flex-direction: row; }
  .post-card-thumb { width: 230px; height: auto; min-height: 160px; flex-shrink: 0; }
}

/* ── Photo-hero on squeeze (mag-hero + photo-hero combo) ─────────────────── */
.mag-hero.photo-hero { background: none; border-bottom: none; }
.mag-hero.photo-hero .mag-hero-copy { color: #fff; }
.mag-hero.photo-hero .hero__headline, .mag-hero.photo-hero .mag-h1 { color: #fff; }
.mag-hero.photo-hero .hero__subhead, .mag-hero.photo-hero .mag-lede { color: rgba(255, 255, 255, 0.88); }
.mag-hero.photo-hero .mag-eyebrow { color: oklch(.72 .16 250); }
.mag-hero.photo-hero .mag-trust-pills span { color: rgba(255, 255, 255, 0.82); }
.mag-hero.photo-hero .mag-trust-pills span svg { color: oklch(.72 .16 250); }

/* ── Program final CTA ───────────────────────────────────────────────────── */
.program-final-cta h2 { margin-top: 0; }
.program-final-cta .lede { margin-bottom: 8px; }

/* ── Responsive adjustments ──────────────────────────────────────────────── */
/* ── Offer price in non-hero contexts ─────────────────────────────────── */
.sp-price { font-size: 1.4rem; margin: 14px 0; }

/* ── Who grid ────────────────────────────────────────────────────────── */
.who-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 620px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
.sp-for, .sp-not { list-style: none; padding: 0; }
.sp-for li, .sp-not li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; font-size: 0.95rem; }
.sp-for li span { position: absolute; left: 0; color: var(--angel); font-weight: 700; }
.sp-not li span { position: absolute; left: 0; color: var(--muted); font-weight: 700; }
.sp-benefit__icon { margin-bottom: 0.5rem; }
.sp-benefit h3 { font-size: 1rem; }
.sp-benefit p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ── Comparison table mobile ──────────────────────────────────────────── */
.comparison-table { table-layout: fixed; word-wrap: break-word; }

@media (max-width: 768px) {
  .guarantee-section { flex-direction: column; text-align: center; }
  .method-badges { justify-content: center; }
  .sticky-cta { flex-direction: column; gap: 8px; padding: 10px 16px; }
  .photo-hero .hero-inner { text-align: center; margin: 0 auto; overflow-wrap: break-word; max-width: 100%; }
  .photo-hero .wrap-wide { padding-left: 16px; padding-right: 16px; }
  .comparison-table { font-size: 0.85rem; }
  .comparison-table th, .comparison-table td { padding: 0.5rem 0.6rem; }
}