.why-page { --cream: #fffdf9; --why-ink: #111827; --why-body: #4e5c56; background: var(--cream); }
.why-page .site-header { background: #fffdf9ed; }
.why-main { color: var(--why-body); }
.why-main h1, .why-main h2 { color: var(--why-ink); }
.why-container { width: min(1120px, 100%); margin-inline: auto; padding-inline: 40px; }
.why-copy { max-width: 510px; }
.why-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.8; margin-top: 24px; }
.why-copy strong { color: #355c4b; font-weight: 600; }
.why-main .eyebrow { color: #5b7568; }
.why-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 95px; padding-top: 155px; padding-bottom: 80px; }
.why-hero h1 { font-size: clamp(43px, 4.5vw, 62px); line-height: 1.09; letter-spacing: -.05em; }
.why-life-art { margin: 0; }
.why-life-art img { width: 100%; height: auto; border-radius: 32px; }
.why-understanding { background: #e9f1ea; }
.why-understanding-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 95px; padding-block: 75px; }
.why-understanding .why-copy { grid-column: 2; grid-row: 1; }
.why-understanding-art { grid-column: 1; grid-row: 1; margin: 0; }
.why-understanding-art img { display: block; width: 100%; height: auto; border-radius: 32px; }
.why-main h2 { font-size: clamp(35px, 3.8vw, 47px); line-height: 1.13; }
.why-moments { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 95px; padding-block: 88px 82px; }
.why-practice-art { margin: 0; }
.why-practice-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 32px; }
.why-examples { margin: 24px 0; padding: 0 0 0 20px; }
.why-examples li { padding-left: 4px; font-size: 17px; line-height: 1.7; }
.why-examples li + li { margin-top: 9px; }
.why-examples li::marker { color: #6b8b79; font-size: 12px; }
.why-copy .why-moment-note { color: #5b7164; font-size: 16px; margin-top: 0; }
.why-inline-link { display: inline-flex; align-items: center; gap: 16px; color: #087b5c; font-size: 16px; font-weight: 600; min-height: 44px; margin-top: 21px; text-underline-offset: 5px; }
.why-inline-link:hover { text-decoration: underline; }
.why-inline-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.why-science-link { display: block; width: fit-content; margin-top: 15px; padding-block: 5px; font-size: 13px; color: #63746b; text-decoration: underline; text-underline-offset: 4px; }
.why-closing { display: flex; justify-content: space-between; align-items: center; gap: 50px; padding-block: 48px 51px; position: relative; }
.why-closing::before { content: ''; position: absolute; inset: 0 40px auto; height: 1px; background: #d7ded5; }
.why-closing h2 { font-size: 38px; }
.why-closing > div > p { font-size: 16px; margin-top: 14px; }
.why-download { text-align: center; flex-shrink: 0; }
.why-closing .store-links { margin: 0; }
.why-closing .why-download-note { font-size: 12px; margin-top: 12px; color: #63746b; }
.why-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; color: #66716d; font-size: 12px; }
.why-footer-brand { color: #079b75; font-size: 20px; font-weight: 700; letter-spacing: -1px; }
@media (max-width: 1000px) {
  .why-hero, .why-understanding-layout, .why-moments { gap: 50px; }
  .why-hero h1 { font-size: 49px; }
  .why-copy > p:not(.eyebrow) { font-size: 17px; }
  .why-main h2 { font-size: 39px; }
  .why-closing { gap: 30px; }
}
@media (max-width: 700px) {
  .why-container { padding-inline: 24px; }
  .why-copy { max-width: 530px; }
  .why-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 128px; padding-bottom: 46px; }
  .why-hero h1 { font-size: clamp(37px, 9.5vw, 49px); line-height: 1.1; }
  .why-hero h1 br { display: none; }
  .why-life-art { width: min(400px, 100%); margin-inline: auto; }
  .why-life-art img { border-radius: 25px; }
  .why-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; margin-top: 20px; }
  .why-understanding-layout { display: flex; flex-direction: column; gap: 32px; padding-block: 47px; }
  .why-understanding-art { width: min(400px, 100%); }
  .why-understanding-art img { border-radius: 25px; }
  .why-main h2 { font-size: 33px; }
  .why-moments { grid-template-columns: 1fr; gap: 29px; padding-block: 48px 43px; }
  .why-practice-art { width: min(400px, 100%); margin-inline: auto; }
  .why-practice-art img { border-radius: 25px; }
  .why-examples { margin-block: 20px; }
  .why-examples li { font-size: 15px; }
  .why-examples li + li { margin-top: 8px; }
  .why-copy .why-moment-note { font-size: 15px; margin-top: 0; }
  .why-inline-link { font-size: 15px; margin-top: 16px; }
  .why-science-link { margin-top: 10px; }
  .why-closing { display: block; text-align: center; padding-block: 36px 32px; }
  .why-closing::before { inset-inline: 24px; }
  .why-closing h2 { font-size: 33px; }
  .why-closing > div > p { font-size: 15px; margin-top: 12px; }
  .why-download { margin-top: 25px; }
  .why-closing .store-links { gap: 8px; }
  .why-closing .why-download-note { font-size: 12px; }
  .why-footer { flex-wrap: wrap; justify-content: center; gap: 16px 22px; text-align: center; font-size: 11px; }
  .why-footer-brand { display: none; }
  .why-footer p { order: 3; flex-basis: 100%; }
}
@media (max-width: 360px) {
  .why-container { padding-inline: 20px; }
  .why-hero h1 { font-size: 35px; }
  .why-main h2 { font-size: 30px; }
  .why-copy > p:not(.eyebrow) { font-size: 15px; }
}