/* Program page + Ads landing pages, v2 (5 Nov 2026).
   v1 reused eight different homepage components, each with its own width,
   left edge, heading size and kicker label; Ray: "looks very messy". v2 is
   ONE system: one 1180px container and left edge, one heading scale (dark
   ink, one pink italic word, the homepage headline's device), larger and
   darker body text for a 50 to 80 year old audience (Cristian, 13 Jul:
   "easier to read"), calm alternating white and cream bands, photos set
   square beside the copy, static testimonial cards and a one-at-a-time FAQ.
   No scroll effects (Cristian, 13 Jul: plain vertical scrolling).
   New filename because /assets/* is served immutable for a year. On the
   program page this file loads BEFORE concept.css, so overrides of shared
   classes carry an extra class of specificity. */

.c-pg-sec { padding: clamp(72px, 10vh, 120px) 0; background: var(--paper); }
.c-pg-sec--cream { background: var(--cream); }
.c-pg-sec--dark { background: var(--spot); }
.c-pg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* type: one scale for the whole page */
.c-pg-h2 {
  margin: 0 0 20px; max-width: 22ch;
  font-family: var(--display); font-weight: 650; font-style: normal;
  font-size: clamp(2.1rem, 3.5vw, 3.15rem); line-height: 1.08; letter-spacing: -.01em;
  color: var(--ink); text-wrap: balance;
}
.c-pg-h2 em { font-style: italic; color: var(--pink-deep); }
.c-pg-sec--dark .c-pg-h2 { color: var(--spot-text); }
.c-pg-sec--dark .c-pg-h2 em { color: #ef86a8; }
.c-pg-h3 {
  margin: 0 0 6px; font-family: var(--display); font-weight: 640; font-style: normal;
  font-size: clamp(1.28rem, 1.7vw, 1.45rem); line-height: 1.22; color: var(--ink);
}
.c-pg-lead { margin: 0 0 18px; max-width: 58ch; font-size: clamp(1.18rem, 1.45vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.c-pg-text p, p.c-pg-p { margin: 0 0 16px; max-width: 62ch; font-size: 1.1875rem; line-height: 1.7; color: #4b434d; text-wrap: pretty; }
.c-pg-pull, .c-pg-text .c-pg-pull {
  margin: 6px 0 24px; max-width: 28ch;
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.25; color: var(--pink-deep);
}

/* two columns, stacking under 900px */
.c-pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.c-pg-split--top { align-items: start; }
/* the heading column keeps the reader company down a long list (desktop only) */
@media (min-width: 900px) { .c-pg-split--top > .c-pg-sticky { position: sticky; top: 110px; } }
@media (max-width: 899px) { .c-pg-split { grid-template-columns: 1fr; } }

/* intro: copy and form side by side; on a phone the form comes straight
   after the headline and lead, before the rest of the copy */
.c-pg-intro {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  grid-template-areas: "head form" "rest form"; gap: 0 clamp(36px, 5vw, 80px); align-items: start;
}
.c-pg-intro-head { grid-area: head; }
.c-pg-intro-rest { grid-area: rest; }
.c-pg-intro-form { grid-area: form; }
.c-pg-intro .c-form { padding: clamp(24px, 2.6vw, 34px); }
.c-pg-intro .c-form .c-form-title { font-size: 1.35rem; }
.c-pg-intro .c-reassure-chips { margin: 4px 0 22px; }
.c-pg-intro .c-pg-h3 { margin-top: 10px; }
@media (max-width: 899px) {
  .c-pg-intro { grid-template-columns: 1fr; grid-template-areas: "head" "form" "rest"; gap: 30px; }
}

/* numbered steps: one ruled list, a real sequence */
.c-pg-steps { list-style: none; margin: 0; padding: 0; }
.c-pg-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.c-pg-steps li:last-child { border-bottom: 1px solid var(--line); }
.c-pg-num {
  width: 44px; height: 44px; border-radius: 999px; background: var(--pink-deep); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 800; font-size: 17px;
}
.c-pg-steps p { margin: 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.65; color: #4b434d; }

/* photos: square-set, one treatment everywhere */
.c-pg-photo { margin: 0; }
.c-pg-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 60px rgba(39, 33, 43, .14); }
.c-pg-photo--wide img { aspect-ratio: 4 / 3; }
.c-pg-photo figcaption { margin-top: 12px; font-size: 15.5px; color: var(--body-ink); }
@media (max-width: 899px) { .c-pg-photo img { aspect-ratio: 3 / 2; } }

/* ruled list (what a program includes) */
.c-pg-list { list-style: none; margin: 10px 0 0; padding: 0; }
.c-pg-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.c-pg-list li:last-child { border-bottom: 1px solid var(--line); }
.c-pg-list p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #4b434d; }

/* goals: four photo tiles with their copy underneath */
.c-pg-goals { display: grid; gap: clamp(20px, 2.2vw, 28px); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(24px, 4vh, 40px); }
@media (max-width: 999px) { .c-pg-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .c-pg-goals { grid-template-columns: 1fr; } }
.c-pg-goal .c-card { aspect-ratio: 4 / 4.6; }
.c-pg-goal .c-card-name { margin: 0; font-weight: 650; font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
.c-pg-goal p { margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.6; color: #4b434d; }
@media (max-width: 559px) { .c-pg-goal .c-card { aspect-ratio: 16 / 10; } }

/* testimonials: static cards, no stacking effect */
.c-pg-quotes { display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(26px, 4vh, 44px); }
.c-pg-quotes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 999px) { .c-pg-quotes, .c-pg-quotes--4 { grid-template-columns: 1fr; } }
.c-pg-quote {
  margin: 0; padding: clamp(24px, 2.6vw, 34px); border-radius: 12px;
  background: #201b28; border: 1px solid rgba(243, 237, 230, .08);
  display: flex; flex-direction: column; gap: 14px;
}
.c-pg-quote blockquote { margin: 0; font-family: var(--display); font-style: italic; font-weight: 620; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.25; color: var(--spot-text); }
.c-pg-quote p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: #d2c9d5; }
.c-pg-quote figcaption { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #ef86a8; }

/* published figures as a quiet 2 x 2 panel */
.c-pg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.c-pg-stat { background: var(--paper); padding: clamp(20px, 2.4vw, 30px); }
.c-pg-stat b { display: block; font-family: var(--display); font-weight: 680; font-style: normal; font-size: clamp(2.3rem, 3.8vw, 3.1rem); line-height: 1; color: var(--pink-deep); }
.c-pg-stat span { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.45; color: var(--ink); }

/* cost: actions card */
.c-pg-actions {
  background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 12px;
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  box-shadow: 0 18px 50px rgba(39, 33, 43, .08);
}
.c-pg-actions .c-ul { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; font-size: 1.0625rem; }

/* FAQ: one question at a time; answers stay in the page for search */
.c-pg-faq { margin-top: 20px; max-width: 880px; border-top: 1px solid var(--line); }
.c-pg-faq details { border-bottom: 1px solid var(--line); }
.c-pg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; min-height: 44px; }
.c-pg-faq summary::-webkit-details-marker { display: none; }
.c-pg-faq summary .c-pg-h3 { margin: 0; }
.c-pg-faq summary::after {
  content: "+"; flex: none; width: 38px; height: 38px; border-radius: 999px;
  border: 1.5px solid var(--pink-soft); color: var(--pink-deep);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.c-pg-faq details[open] summary::after { transform: rotate(45deg); }
.c-pg-faq details > p { margin: 0 0 22px; max-width: 70ch; font-size: 1.125rem; line-height: 1.65; color: #4b434d; }

/* gift landing page: certificate cards */
.c-pg-pack-head { margin-top: clamp(28px, 4vh, 44px); }
.c-pg-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 16px 0 0; }
@media (max-width: 899px) { .c-pg-pack-grid { grid-template-columns: 1fr; } }
.c-pg-pack { background: var(--paper); border: 1.5px solid var(--pink-soft); border-radius: 12px; padding: clamp(22px, 2.4vw, 30px); }
.c-pg-price { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 680; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: var(--pink-deep); }
.c-pg-pack p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: #4b434d; }
.c-pg-more { margin-top: 26px; font-size: 1.0625rem; }

/* buttons and related links inside these sections */
.c-pg-cta { margin-top: 10px; }
.c-pg-sec aside.c-related--grid { margin-top: clamp(44px, 6vh, 64px); padding-bottom: 0; }

/* landing page header without the menu */
.c-header--lp { justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .c-pg-faq summary::after { transition: none; }
}