/* Phrase landing pages (/say/*). Reached from Google only: nothing on the
   site links here. Each page is one everyday situation, then the shop. */
.say-hero .phero-inner { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.say-hero h1 { font-size: clamp(34px, 4.8vw, 64px); }
.say-hero .lede { max-width: 58ch; }

.say-wrap { box-sizing: content-box; max-width: 860px; margin: 0 auto; padding: 8px var(--gutter) 0; }
.say-cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.say-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 20px 22px; background: var(--white); border-radius: 22px; box-shadow: var(--soft); }
.say-tl { margin: 0; font-family: var(--f-disp); font-weight: 700; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.say-ar { margin: 0; font-family: var(--f-ar); font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1.3; color: var(--amber); text-align: right; }
.say-en { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.say-when { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--ink-soft); }

.say-note { margin: 18px 2px 0; font-size: 15px; color: var(--ink-soft); }

.say-cta { margin: clamp(40px, 6vw, 64px) auto 0; width: calc(100% - 2 * var(--gutter)); max-width: 860px; padding: clamp(26px, 4vw, 40px); border-radius: 28px; background: linear-gradient(160deg, #FFF1D2 0%, #FFE0C7 100%); box-shadow: var(--soft-lg); }
.say-cta h2 { margin: 0 0 10px; font-family: var(--f-disp); font-weight: 800; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.05; letter-spacing: -.03em; }
.say-cta p { margin: 0 0 22px; max-width: 52ch; color: var(--ink); }
.say-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.say-free { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

.say-more { box-sizing: content-box; max-width: 860px; margin: clamp(40px, 6vw, 64px) auto clamp(48px, 7vw, 88px); padding: 0 var(--gutter); }
.say-more h2 { margin: 0 0 14px; font-family: var(--f-disp); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.02em; }
.say-more ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.say-more a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--white); border-radius: 18px; box-shadow: var(--soft); font-weight: 600; text-decoration: none; transition: transform .25s var(--spring); }
.say-more a:hover { transform: translateY(-2px); }
.say-more a::after { content: "→"; color: var(--amber); font-weight: 700; }

@media (max-width: 560px) {
  .say-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .say-ar { text-align: left; }
  .say-cta-row .btn { width: 100%; justify-content: center; }
}

.say-sounds { margin-top: 28px; }
.say-sounds h2 { margin: 0 0 12px; font-family: var(--f-disp); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.02em; }
.say-sounds ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.say-sounds li { padding: 14px 18px; background: var(--cream); border-radius: 16px; font-size: 15.5px; color: var(--ink); }
.say-sounds b { font-family: var(--f-mono); color: #C26A00; }