@charset "UTF-8";

/* Editorial scenes carry the first explanation; the real UI remains in its feature galleries. */
.hero-inner { grid-template-columns: 1fr 1.03fr; gap: 58px; align-items: center; min-height: 0; padding-top: 56px; padding-bottom: 58px; }
.hero-copy { display: block; min-width: 0; }
.hero-copy .category { font-size: 11px; margin-bottom: 19px; gap: 8px; }
.hero-copy .free-check-badge { font-size: 10px; margin-left: 0; padding: 3px 8px; }
.hero-copy .hero-message h1 { font-size: 47px; line-height: 1.6; letter-spacing: .01em; margin: 0; }
.hero-message .hero-description { font-size: 15px; line-height: 2; margin-top: 20px; max-width: 510px; }
.hero-audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 22px; }
.hero-audiences a { display: grid; grid-template-columns: 1fr auto; gap: 0 7px; padding: 9px 11px 10px; border-top: 1px solid #bccbb4; border-bottom: 1px solid #bccbb4; font-size: 14px; font-weight: 700; line-height: 1.8; }
.hero-audiences small { grid-column: 1 / -1; font-size: 10px; font-weight: 400; color: #6c7d5e; }
.hero-audiences a > span { grid-column: 2; font-weight: 400; color: #6c7d5e; }
.hero-audiences a:hover { background: #edf1e7; }
.hero-copy .hero-actions { display: flex; flex-wrap: nowrap; margin-top: 25px; gap: 10px; }
.hero-copy .hero-actions .button { font-size: 12px; min-height: 54px; padding: 13px 16px; gap: 12px; }
.hero-copy .support-option-note { font-size: 10px; margin-top: 12px; line-height: 1.85; color: #738069; }
.hero-illustration { width: 100%; min-width: 0; }
.hero-illustration > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.hero-illustration figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 15px; font-size: 13px; color: #556d4a; line-height: 1.7; }
.hero-illustration figcaption small { font-size: 10px; color: #859079; }

.retention-section { padding: 73px 0 70px; }
.retention-paths-heading { display: block; margin-top: 0; }
.retention-paths-heading .section-label { font-size: 11px; margin: 0 0 11px; }
.retention-paths-heading h2 { font-size: 31px; line-height: 1.75; }
.retention-paths { gap: 30px; margin-top: 30px; }
.retention-paths article { border-top: 0; padding-top: 0; }
.retention-paths article:not(:last-child)::after { content: ""; display: block; min-height: 21px; }
.retention-scene { width: 100%; margin: 0 0 19px; }
.retention-scene img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 7px; }
.retention-paths h3 { font-size: 18px; line-height: 1.85; margin: 9px 0 9px; letter-spacing: .005em; }
.retention-paths article > p { font-size: 13px; line-height: 1.95; }
.retention-paths a { font-size: 11px; gap: 13px; }
.illustration-note { font-size: 10px; color: #849078; margin-top: 19px; }
.retention-background { padding: 32px 33px 25px; margin-top: 34px; border: 1px solid #e0e4d8; background: #f8f8f3; }
.retention-background .retention-intro { grid-template-columns: 1.2fr 1fr; gap: 48px; }
.retention-context .section-label { font-size: 10px; margin-bottom: 12px; }
.retention-context h3 { font-size: 25px; line-height: 1.75; letter-spacing: .015em; }
.retention-context > p:last-child { font-size: 13px; margin-top: 13px; text-wrap: pretty; }
.retention-stat { padding: 17px 23px 12px; background: #eef2e8; }
.retention-stat figcaption { font-size: 12px; line-height: 1.85; }
.retention-number strong { font-size: 55px; }
.retention-number > span { font-size: 20px; }
.retention-source { font-size: 10px; margin-top: 19px; }
.retention-principle { font-size: 10px; margin-top: 23px; padding-top: 16px; }

.cycle-steps > li { text-align: center; }
.cycle-sunna { width: 112px; height: 112px; object-fit: contain; margin: 0 auto 14px; }
.cycle-steps .step-number { text-align: left; }
.funnel-overview .cycle-steps p { font-size: 13px; }
.funnel-overview { padding-top: 73px; padding-bottom: 76px; }

.wbc-intro { gap: 64px; align-items: center; }
.wbc-illustration { min-width: 0; }
.wbc-illustration img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.wbc-illustration figcaption { display: flex; align-items: center; justify-content: center; gap: 17px; margin-top: 17px; font-size: 12px; font-weight: 700; line-height: 1.8; color: #526e48; }
.wbc-illustration figcaption i { font-style: normal; font-weight: 400; color: #899b78; }
.wbc-output-details { margin-top: 33px; border-top: 1px solid #b9c8ac; border-bottom: 1px solid #b9c8ac; }
.wbc-output-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 23px; padding: 20px 3px; cursor: pointer; list-style: none; min-height: 80px; }
.wbc-output-details > summary::-webkit-details-marker { display: none; }
.wbc-output-details > summary b { display: block; font-size: 16px; line-height: 1.8; }
.wbc-output-details > summary small { display: block; font-size: 11px; color: #7a866f; margin-top: 4px; line-height: 1.8; }
.wbc-output-details > summary > i { font-style: normal; color: #68815a; font-size: 23px; flex-shrink: 0; transition: transform .2s; }
.wbc-output-details[open] > summary > i { transform: rotate(45deg); }
.wbc-output-details-body { padding: 12px 0 29px; }
.wbc-output-details .wbc-analysis { margin-top: 0; }
.wbc-method-heading { font-size: 18px; margin-top: 30px; }
.wbc-output-details .wbc-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; border-top: 0; margin-top: 14px; }
.wbc-output-details .wbc-process li { gap: 14px; padding: 15px 0; border-top: 1px solid #c5cfbb; border-bottom: 0; }
.wbc-output-details .wbc-process h3 { font-size: 14px; }
.wbc-output-details .wbc-process p { font-size: 12px; }
.wbc-outputs { margin-top: 29px; }
.wbc-section { padding-top: 76px; padding-bottom: 76px; }

@media (max-width: 1190px) {
  .hero-inner { gap: 37px; padding-top: 45px; padding-bottom: 45px; }
  .hero-copy .hero-message h1 { font-size: 41px; }
  .hero-copy .category { font-size: 10px; }
  .hero-message .hero-description { font-size: 14px; }
  .hero-audiences a { font-size: 13px; }
  .hero-copy .hero-actions .button { font-size: 11px; padding: 12px 11px; gap: 9px; }
  .retention-paths-heading h2 { font-size: 28px; }
  .retention-paths h3 { font-size: 16px; }
  .retention-background .retention-intro { gap: 32px; }
  .wbc-intro { gap: 40px; }
}
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 31px; }
  .hero-copy .hero-message h1 { font-size: 36px; }
  .hero-copy .category { line-height: 1.9; margin-bottom: 16px; }
  .hero-message .hero-description { font-size: 13px; }
  .hero-audiences a { font-size: 12px; padding-inline: 7px; }
  .hero-copy .hero-actions { flex-wrap: wrap; }
  .hero-copy .hero-actions .button { font-size: 11px; }
  .retention-paths { gap: 23px; }
  .retention-background { padding: 26px; }
  .retention-context h3 { font-size: 22px; }
}
@media (max-width: 800px) {
  .hero-inner { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 30px; padding-bottom: 35px; }
  .hero-copy, .hero-message { display: contents; }
  .hero-copy .category, .hero-copy .hero-message h1, .hero-message .hero-description,
  .hero-copy .hero-actions, .hero-copy .support-option-note, .hero-audiences, .hero-illustration { grid-column: auto; grid-row: auto; }
  .hero-copy .category { order: 1; font-size: 11px; margin: 0; }
  .hero-copy .hero-message h1 { order: 2; font-size: 40px; }
  .hero-illustration { order: 3; max-width: 650px; margin: 3px auto 1px; }
  .hero-message .hero-description { order: 4; margin: 0; font-size: 14px; max-width: none; }
  .hero-audiences { order: 5; margin-top: 1px; }
  .hero-copy .hero-actions { order: 6; margin-top: 2px; display: grid; grid-template-columns: 1fr 1fr; }
  .hero-copy .support-option-note { order: 7; margin: 0; }
  .hero-illustration figcaption { font-size: 12px; margin-top: 10px; }
  .retention-paths { gap: 19px; }
  .retention-paths h3 { font-size: 15px; }
  .retention-background .retention-intro { gap: 24px; }
  .wbc-intro { gap: 30px; }
}
@media (max-width: 700px) {
  .hero-inner { gap: 15px; padding-top: 25px; padding-bottom: 29px; }
  .hero-copy .category { font-size: 10px; gap: 6px; }
  .hero-copy .free-check-badge { font-size: 9px; padding: 2px 6px; }
  .hero-copy .hero-message h1 { font-size: clamp(27px, 7.5vw, 39px); line-height: 1.6; }
  .hero-message .hero-description { font-size: 13px; }
  .hero-audiences { gap: 10px; }
  .hero-audiences a { font-size: 12px; padding: 8px 9px; }
  .hero-audiences small { font-size: 9px; }
  .hero-copy .hero-actions .button { font-size: 11px; min-height: 54px; padding: 12px 9px; }
  .hero-copy .support-option-note { font-size: 9px; }
  .hero-illustration figcaption { font-size: 11px; gap: 1px; }
  .hero-illustration figcaption small { font-size: 9px; }
  .retention-section { padding: 46px 0; }
  .retention-paths-heading .section-label { font-size: 10px; }
  .retention-paths-heading h2 { font-size: 22px; }
  .retention-paths { display: block; margin-top: 22px; }
  .retention-paths article { margin-top: 30px; padding-top: 0; }
  .retention-paths article:not(:last-child)::after { display: none; }
  .retention-paths article:first-child { margin-top: 0; }
  .retention-scene { margin-bottom: 14px; }
  .retention-paths h3 { font-size: 19px; margin-top: 7px; }
  .retention-paths article > p { font-size: 13px; }
  .retention-paths a { font-size: 12px; margin-top: 2px; }
  .retention-background { margin-top: 26px; padding: 21px 18px; }
  .retention-background .retention-intro { display: block; }
  .retention-context h3 { font-size: 20px; }
  .retention-context > p:last-child { font-size: 12px; margin-top: 12px; }
  .retention-stat { margin-top: 20px; padding: 18px 17px 11px; }
  .retention-source { font-size: 9px; }
  .retention-principle { font-size: 10px; }
  .funnel-overview { padding-top: 48px; padding-bottom: 50px; }
  .cycle-sunna { width: 92px; height: 92px; margin-bottom: 10px; }
  .funnel-overview .cycle-steps h3 { font-size: 14px; }
  .funnel-overview .cycle-steps p { font-size: 12px; }
  .wbc-section { padding-top: 49px; padding-bottom: 49px; }
  .wbc-intro { display: block; }
  .wbc-illustration { margin-top: 26px; }
  .wbc-illustration figcaption { font-size: 11px; gap: 16px; margin-top: 13px; }
  .wbc-output-details { margin-top: 26px; }
  .wbc-output-details > summary { min-height: 80px; gap: 15px; padding: 18px 0; }
  .wbc-output-details > summary b { font-size: 14px; }
  .wbc-output-details > summary small { font-size: 10px; }
  .wbc-output-details-body { padding-bottom: 17px; }
  .wbc-method-heading { font-size: 16px; }
  .wbc-output-details .wbc-process { display: block; }
  .wbc-output-details .wbc-process li { padding: 17px 0; }
}
@media (max-width: 360px) {
  .hero-copy .category { font-size: 9px; }
  .hero-copy .hero-message h1 { font-size: 26px; }
  .hero-audiences a { font-size: 11px; padding-inline: 7px; }
  .hero-copy .hero-actions { grid-template-columns: 1fr; }
  .hero-copy .hero-actions .button { font-size: 12px; }
  .retention-paths-heading h2 { font-size: 20px; }
  .retention-context h3 { font-size: 17px; }
  .retention-paths h3 { font-size: 17px; }
}