/* Shared chapter system: role, message, explanation, and a visual demonstration. */
.feature-section { padding-block: 128px; }
.pay-section, .points-section { background: var(--background); }
.feature-section .feature-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 80px; margin-top: 0; }
.feature-section .feature-copy { min-width: 0; }
.feature-section .feature-copy .eyebrow { margin-bottom: 24px; font-size: 14px; }
.feature-section .feature-copy h2 { color: var(--foreground); font-size: clamp(36px, 3.4vw, 48px); line-height: 1.35; font-weight: 750; letter-spacing: -.04em; }
.feature-section .feature-description { margin-top: 24px; font-size: 17px; line-height: 1.85; color: var(--secondary-foreground); max-width: none; word-break: keep-all; }
.feature-section .feature-role { margin-top: 24px; color: var(--brand-primary); font-size: 13px; font-weight: 650; }
.feature-section .feature-copy > .text-link { margin-top: 24px; }
.feature-section .pay-stage { min-height: 600px; }
.pay-story-steps { margin-top: 32px; }
.pay-story .story-step { min-height: 0; padding: 16px 0; }
.pay-story .story-step strong { font-size: 19px; margin-top: 4px; }
.pay-story .story-step > span:last-child { font-size: 13px; }
.feature-section .cafe-editorial-street .image-frame { aspect-ratio: 3 / 2; }
.feature-section .cafe-editorial-street img { object-fit: contain; }
/* Make the earning rate the chapter's focal point, with its example label adjacent. */
.points-benefit-title > span { display: block; }
.feature-section .points-benefit-title .points-rate-lead { font-size: 24px; line-height: 1.4; letter-spacing: 0; }
.feature-section .points-benefit-title .points-rate-value { color: var(--brand-primary); font-size: clamp(104px, 10vw, 144px); line-height: 1.05; font-weight: 850; letter-spacing: -.04em; margin-block: 8px 16px; font-variant-numeric: lining-nums tabular-nums; }
.points-rate-value > span { font-size: .52em; margin-left: 4px; }
.feature-section .points-benefit-title .points-rate-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 32px; line-height: 1.4; }
.points-rate-caption small { color: var(--brand-primary); background: var(--brand-primary-surface); border-radius: var(--mobile-radius-control); padding: 4px 12px; font-size: 13px; font-weight: 650; letter-spacing: 0; }
.points-section .point-example { width: 100%; min-width: 0; padding: 36px; }
.points-section .merchant-grid { margin-top: 112px; }
/* Supporting rows share both image size and text alignment. */
.feature-section .feature-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; margin-top: 112px; padding-top: 0; border: 0; }
.feature-section .feature-detail > figure { width: 100%; max-width: none; min-width: 0; }
.feature-section .feature-detail .image-frame { aspect-ratio: 4 / 3; }
.feature-section .feature-detail .image-frame img { object-fit: cover; }
.feature-section .cafe-editorial-roasting img { object-position: center 65%; }
.feature-section .feature-detail h3 { font-size: 36px; font-weight: 750; line-height: 1.4; }
.feature-section .feature-detail p { max-width: none; }
.points-section .example-heading { align-items: center; gap: 8px; }
.points-section .example-heading .tag { border: 0; background: var(--brand-primary-surface); padding: 4px 8px; }
.points-section .amount-label { margin-top: 40px; }
.points-section .point-result { margin-top: 28px; padding-top: 24px; }
.points-section .point-result output { font-size: 44px; min-inline-size: 0; }
.points-section .fine-print { margin-top: 24px; font-size: 11px; }
.cafe-section .cafe-editorial-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.cafe-section .cafe-editorial-moments > div { flex-direction: column; gap: 8px; }
.cafe-section .cafe-editorial-benefit p { font-size: 14px; }

@media (max-width: 1099px) {
  .feature-section { padding-block: 104px; }
  .feature-section .feature-lead, .feature-section .feature-detail { gap: 40px; }
  .feature-section .feature-description { font-size: 16px; }
  .points-section .point-example { padding: 24px; }
  .feature-section .feature-detail h3 { font-size: 30px; }
}
@media (max-width: 749px) {
  .feature-section { padding-block: 80px; }
  .feature-section .feature-lead { grid-template-columns: 1fr; gap: 40px; }
  .feature-section .feature-copy h2 { font-size: 36px; }
  .feature-section .feature-copy .eyebrow { margin-bottom: 20px; }
  .feature-section .feature-description { margin-top: 20px; }
  .feature-section .feature-role { margin-top: 20px; font-size: 12px; }
  .feature-section .pay-stage { min-height: 480px; }
  .pay-story .story-step { padding: 16px 0; }
  .pay-story .story-step strong { font-size: 15px; }
  .feature-section .cafe-editorial-street .image-frame { aspect-ratio: 3 / 2; }
   .feature-section .feature-detail { grid-template-columns: 1fr; gap: 32px; margin-top: 80px; }
  .feature-section .feature-detail .merchant-copy { grid-row: auto; }
  .feature-section .feature-detail h3 { font-size: 28px; }
  .feature-section .feature-detail h3 br { display: none; }
  .points-section .point-result output { font-size: 36px; }
  .points-section .amount-label { margin-top: 32px; }
  .points-section .point-result { font-size: 13px; }
  .cafe-section .cafe-editorial-benefit { margin-top: 24px; }
  .cafe-section .cafe-editorial-moments { margin-top: 24px; }

}

@media (max-width: 379px) {
  .points-section .point-example { padding: 20px; }
  .points-section .point-result output { font-size: 30px; }
  .points-section .example-heading { font-size: 13px; }
  .points-section .example-heading .tag { font-size: 11px; }
  .cafe-section .cafe-editorial-moments { gap: 16px; }
  .cafe-section .cafe-editorial-moments strong { font-size: 17px; }
  .cafe-section .cafe-editorial-moments p { font-size: 14px; }
}