@font-face {
  font-family: Manrope;
  src: url('../fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --background: #FAFAF6;
  --surface: #FFFFFF;
  --surface-soft: #E7EEE5;
  --text: #20382E;
  --text-muted: #56665C;
  --primary: #245640;
  --primary-hover: #19432F;
  --on-primary: #FFFFFF;
  --accent: #E8D5BC;
  --border: #CBD5CC;
  --control-border: #738476;
  --error: #A52D32;
  --focus: #245640;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--text); background: var(--background); font: 400 18px/1.6 Manrope, Arial, sans-serif; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(36px, 4.45vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
h3 { font-size: clamp(22px, 1.9vw, 24px); line-height: 1.3; font-weight: 600; }
a { color: var(--primary); text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.container { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-block: 96px; }
.reading-column { max-width: 760px; }
.stack > * + * { margin-top: 24px; }
.lead { font-size: 22px; line-height: 1.5; }
.muted, .caption { color: var(--text-muted); }
.caption, .preview-note { font-size: 14px; line-height: 1.5; }
.preview-note { padding: 12px 20px; background: var(--surface-soft); text-align: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 1px solid var(--primary); border-radius: 999px; color: var(--on-primary); background: var(--primary); font: 600 16px/1.4 Manrope, Arial, sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 160ms, color 160ms; }
.button:hover { background: var(--primary-hover); color: var(--on-primary); }
.button:active { background: var(--text); color: var(--on-primary); }
.button-outline { color: var(--primary); background: transparent; }
.button:disabled { color: var(--text-muted); background: var(--surface-soft); border-color: var(--control-border); cursor: not-allowed; }
.data-panel { margin-top: 64px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; }
.price-list { margin-bottom: 0; }
.price-list > div { display: flex; justify-content: space-between; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--border); }
.price-list dd { margin: 0; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.contact { display: block; width: fit-content; min-height: 44px; padding-block: 8px; overflow-wrap: anywhere; }
.data-summary { margin-top: 48px; padding-left: 24px; border-left: 2px solid var(--primary); }
[data-load-status][data-state='error'] { color: var(--error); }
.skip-link { position: absolute; top: 8px; left: 20px; transform: translateY(-200%); padding: 12px 24px; background: var(--surface); z-index: 1; }
.skip-link:focus { transform: none; }
@media (max-width: 1023px) {
  .container { width: calc(100% - 64px); }
  .section { padding-block: 64px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .container { width: calc(100% - 40px); }
  h1 { line-height: 1.1; }
  h2 { line-height: 1.2; }
  .lead { font-size: 18px; }
  .data-panel { padding: 24px; }
  .price-list > div { flex-direction: column; gap: 4px; }
  .actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* T03: approved hero and S02–S06 compositions. */
figure { margin: 0; }
.hero-photo-frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: var(--surface-soft); }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; text-decoration: none; line-height: 1.3; }
.header a { display: inline-flex; align-items: center; min-height: 44px; }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; padding-block: 64px; align-items: start; }
.hero-copy { min-width: 0; }
.format { font-size: 22px; line-height: 1.5; margin-top: 24px; }
.clarification { color: var(--text-muted); font-size: 16px; margin-top: 12px; max-width: 58ch; }
.hero-button { margin-top: 32px; }
.date { font-size: 14px; color: var(--text-muted); margin-top: 16px; }
.portrait { min-width: 0; }
figcaption { padding: 24px 0 0; }
figcaption strong, figcaption span { display: block; }
figcaption strong { font-size: 22px; font-weight: 600; }
figcaption span { font-size: 16px; color: var(--text-muted); margin-top: 4px; }
.hero .lead { margin-top: 32px; }
.header { flex-wrap: wrap; }
.section h2 { max-width: 24ch; }
#problem-title, #about-title, #program-title, #support-title, #results-title, .content-card h3 { overflow-wrap: anywhere; }
.section-body { margin-top: 32px; }
.problem-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.open-list { padding-left: 24px; margin-bottom: 0; }
.open-list li + li { margin-top: 8px; }
.conclusion { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.3; }
.conclusion strong { font-weight: 600; }
.soft-section { background: var(--surface-soft); }
.format-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; list-style: none; padding: 0; margin: 48px 0; }
.format-steps li { position: relative; font-size: 24px; line-height: 1.3; font-weight: 600; padding-right: 24px; }
.step-icon { display: block; width: 48px; height: 48px; margin-bottom: 24px; color: var(--primary); }
.step-arrow::after { content: '→'; position: absolute; right: -24px; top: 8px; }
.program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0; margin-bottom: 0; list-style: none; }
.content-card { min-width: 0; padding: 32px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.content-card > * + * { margin-top: 16px; }
.topic-number { display: block; color: var(--primary); font-size: 32px; line-height: 1.2; font-weight: 600; }
.day-label { color: var(--text-muted); }
.results-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; list-style: none; padding: 0; margin-bottom: 0; }
.results-list li { position: relative; padding-left: 32px; }
.results-list li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.result-ending { margin-top: 48px; }
.pricing-preview { border-top: 1px solid var(--border); }
.pricing-preview:focus { outline-offset: -4px; }
@media (min-width: 1024px) and (max-width: 1199px) { .hero { gap: 24px; } }
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 64px; }
  .hero-copy { max-width: 760px; }
  .portrait { width: min(100%, 480px); }
  .problem-columns { gap: 32px; }
  .format-steps { gap: 24px; }
  .format-steps li { font-size: 22px; }
  .step-arrow::after { right: -12px; }
}
@media (max-width: 767px) {
  .header { padding-block: 16px; }
  .format { font-size: 18px; }
  .hero-button { width: 100%; }
  .problem-columns, .program-grid, .results-list, .format-steps { grid-template-columns: 1fr; }
  .section-body { margin-top: 24px; }
  .program-grid { gap: 16px; }
  .content-card { padding: 24px; }
  .format-steps { margin-block: 32px; gap: 48px; }
  .format-steps li { padding-right: 0; }
  .step-arrow::after { content: '↓'; top: auto; bottom: -36px; left: 0; right: auto; }
}

/* S10 — approved T01 pricing composition. */
.site-navigation { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
.site-navigation a { text-decoration: none; }
.site-navigation a:hover { text-decoration: underline; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 32px; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list details:first-child { border-top: 1px solid var(--border); }
.faq-list summary { position: relative; list-style: none; cursor: pointer; padding: 24px 40px 24px 0; min-height: 48px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 24px; font-size: 24px; line-height: 1.2; color: var(--primary); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:hover { color: var(--primary); }
.faq-list summary:active { color: var(--primary-hover); }
.faq-answer { padding: 0 0 24px; max-width: 65ch; }
.reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.reviews-grid figure { padding: 32px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }
.reviews-grid blockquote { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reviews-grid figcaption { font-size: 16px; color: var(--text-muted); overflow-wrap: anywhere; }
.reviews-source { margin-top: 16px; }
.reviews-source a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-block: 48px; border-top: 1px solid var(--border); }
.site-footer a { display: flex; align-items: center; min-height: 44px; }
.footer-links, .footer-contacts { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1023px) {
  .site-navigation { flex-basis: 100%; flex-direction: column; gap: 4px; }
}
@media (max-width: 767px) {
  .header { gap: 12px; }
  .header .brand { max-width: 160px; }
  .menu-toggle { padding-inline: 16px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-grid figure { padding: 24px; }
  .site-footer { flex-direction: column; gap: 24px; }
}

.pricing { border-top: 1px solid var(--border); }
.pricing:focus { outline-offset: -4px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 32px; }
.plan { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); padding: 32px; }
.plan-featured { border: 2px solid var(--primary); padding: 31px; background: var(--surface-soft); }
.plan h3 { min-height: 2.6em; }
.price { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -.04em; margin-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.price { overflow-wrap: anywhere; }
.price span { font-size: 18px; font-weight: 400; letter-spacing: 0; }
.price:not([data-ready]) { font-size: 18px; letter-spacing: 0; }
.inherits { margin-top: 24px; font-weight: 500; }
.features { list-style: none; margin: 24px 0 32px; padding: 0; }
.features li { position: relative; padding-left: 24px; }
.features li + li { margin-top: 12px; }
.features li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 8px; height: 8px; border: 1px solid var(--primary); border-radius: 50%; }
.personal-copy { margin: 24px 0 32px; }
.personal-copy p + p { margin-top: 16px; }
.personal-copy strong { font-weight: 600; }
.plan-label { align-self: flex-start; padding: 4px 12px; background: var(--surface); border-radius: 12px; font-size: 14px; margin-top: auto; margin-bottom: 24px; }
.plan-label-warm { background: var(--accent); }
.plan .button { width: 100%; min-height: 70px; }
.plan > .features + .button { margin-top: auto; }

.pricing-details { margin-top: 32px; }
@media (min-width: 1024px) and (max-width: 1199px) { .plan { padding: 24px; } .plan-featured { padding: 23px; } }
@media (max-width: 1023px) { .plans { grid-template-columns: 1fr; } .plan h3 { min-height: 0; } .plan .button { min-height: 48px; } }
@media (max-width: 767px) { .plans { gap: 16px; margin-top: 24px; } .plan { padding: 24px; } .plan-featured { padding: 23px; } }

.social-link { display: inline-flex; align-items: center; gap: 10px; }
.social-icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; }