/* Proposed v2 only. Onest roles; the approved surfaces and geometry stay in the base sheets. */
:root {
  --type-section: clamp(36px, 4.1vw, 60px);
  --type-subhead: 22px;
  --type-body: 16px;
  --type-label: 14px;
  --type-note: 13px;
}

/* One display scale for the product, one scale for every section. */
.hero-intro h1,
.hero-intro h1[data-store="true"] {
  font-size: clamp(54px, 5.555556vw, 80px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero-intro h2 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-intro p {
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 65ch;
}
.section-copy h2,
.how-heading h2,
.auto-copy h2,
.bonus-heading h2,
.help-heading h2,
.final-section h2 {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.services h3,
.steps h3 {
  font-size: var(--type-subhead);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Explanations retain a steady reading size on desktop, tablet and phone. */
.section-copy > p,
.services article p,
.how-heading > p,
.steps p,
.auto-copy > p:not(.fine-print),
.bonus-heading > p,
.help-heading > p,
.faq p,
.final-section p,
.cashback-poster > p {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 65ch;
}
.how-heading > p,
.steps p,
.final-section p,
.cashback-poster > p { line-height: 1.65; }
.services article > div { min-width: 0; }
.faq summary {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.015em;
}
.bonus-ledger p {
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.levels-heading h3 {
  font-size: var(--type-body);
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -.015em;
}
.monthly-timeline span {
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Functional labels and explanations use the same rhythm throughout. */
.text-link,
.steps .text-link,
.faq .text-link,
.help-heading .text-link,
.section-copy .text-link {
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.purchase legend { font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.region-options label > span,
.frequency-options span { line-height: 1.4; letter-spacing: 0; }
.button { line-height: 1.25; letter-spacing: -.01em; }
.fine-print,
.services > .fine-print,
.auto-copy .fine-print,
.bonuses .fine-print,
.monthly-timeline small,
.bonus-ledger small,
.bonus-levels small,
.levels-heading > span,
.benefit-caption,
.hero-benefit small,
.first-gift small,
.frequency-note,
.purchase-caption,
.price-block > p,
.auto-poster > small,
.footer > p,
.dialog-note,
.review-check,
.dialog-back,
.compat-result,
.compat-result .text-link,
#dialog-content a:not(.button) {
  font-size: var(--type-note);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}
.footer > p { max-width: 75ch; line-height: 1.65; }
.purchase-safety > button,
.purchase-safety > div { line-height: 1.45; letter-spacing: 0; }
.price-block > span,
.monthly-timeline b { line-height: 1.4; letter-spacing: 0; }
.monthly-timeline > div:nth-child(2) b { line-height: 1.1; letter-spacing: -.04em; }
.hero-benefit b,
.auto-benefit b { font-weight: 550; line-height: 1.25; letter-spacing: -.02em; }

/* Brand metadata remains small; it does not serve as a section heading. */
.poster-caption,
.cashback-bottom > span:last-child,
.bonus-levels li > span,
.dialog-top {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
}
.cashback-bottom > span:first-child { font-size: var(--type-note); line-height: 1.55; letter-spacing: 0; }
.brand > span,
.hero .brand > span { letter-spacing: -.04em; }
.footer-row > div,
.footer-row > span { font-size: var(--type-note); line-height: 1.4; }
dialog h2 { font-weight: 600; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
#dialog-content { font-size: var(--type-body); line-height: 1.6; letter-spacing: 0; }
.review-line { font-size: var(--type-label); line-height: 1.45; letter-spacing: 0; }

/* Prices and benefit values align as data. The certificate is an authored graphic. */
.price-block > strong,
.amount-options span,
.hero-benefit strong,
.first-gift strong,
.auto-benefit strong,
.discount,
.cashback-poster > strong,
.bonus-ledger strong,
.bonus-levels strong,
.step-number {
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.04em;
}
.auto-poster > p { letter-spacing: -.03em; }

/* Exact brand silhouettes inside the existing pale service containers. */
.service-icon .brand-service-icon {
  width: 24px;
  height: 24px;
  color: #3e5268;
  fill: currentColor;
  stroke: none;
}

@media (min-width: 720px) and (max-width: 959px) {
  .hero-intro h1,
  .hero-intro h1[data-store="true"] { font-size: clamp(46px, 5.7vw, 54px); }
}
@media (max-width: 760px) {
  :root { --type-subhead: 20px; }
  .service-icon .brand-service-icon { width: 22px; height: 22px; }
}
@media (max-width: 719px) {
  .hero-intro h1,
  .hero-intro h1[data-store="true"] { font-size: min(40px, 10.45cqi); }
  .hero-intro p { font-size: 14px; line-height: 1.4; }
}