/* ==========================================================================
   Product page styles (Telpa Pay / Authorize / Renew / Defend). Loaded only on
   the product pages. Builds on the shared classes in site.css.
   ========================================================================== */

.hero--product .hero__inner { padding-top: clamp(64px, 8vw, 100px); padding-bottom: clamp(56px, 7vw, 84px); }
.hero--product .hero__body { max-width: 820px; }
.hero--product .hero__title { font-size: clamp(40px, 5.2vw, 66px); letter-spacing: -0.035em; }
.hero--product .hero__lead { max-width: 640px; }

/* white "how it works" numbered cells */
.cell--step .cell__tag { font-size: 13px; letter-spacing: 0; }
.cell--step .cell__title { font-size: 19px; }
.cell--step .cell__text { margin-bottom: 0; }

/* dark mid-page statement (the intelligence behind it / why it matters) */
.dark-statement { max-width: 860px; }
.dark-statement__eyebrow { margin-bottom: 24px; }
.dark-statement__big { font-size: clamp(24px, 2.9vw, 36px); font-weight: 500; line-height: 1.3; letter-spacing: -0.018em; margin: 0 0 22px; color: var(--ink); }
.dark-statement__big .accent { color: var(--teal-light); }
.dark-statement__text { font-size: 17.5px; line-height: 1.6; color: var(--ink-60); margin: 0; max-width: 660px; }

/* capabilities result line */
.result-callout { margin-top: 40px; }
.result-callout p { font-size: 17px; font-style: italic; color: var(--teal-text); margin: 0; max-width: 620px; }