/* Tip policy: the Privacy page's prose grid (page.css), plus the roles' points and the worked example. base.css tokens
   only. The points are a definition list: the role on the left, its points in the display face on the right, a quiet
   rule under each row so the eye carries across; two columns of four on wide screens, one column on phones. The
   example is a square-cornered panel; each of its sentences is a paragraph and each calculation stays on one line, so
   it reads line by line at 390px. Figures are proportional lining numerals: Mona Sans's tabular zero is slashed, which
   reads as a different character next to the zeros in the running text. Nothing on this page moves. */
/* "Tip Policy" has descenders (p, y); the shared title's 0.8 line-height lets them reach the lede, so this page adds room. */
.tips .page-title { padding-bottom: 0.16em; }
.tip-body { display: grid; gap: 18px; align-content: start; min-width: 0; }

.tip-points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  column-gap: 40px; margin: 2px 0 6px;
}
.tip-points > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0 9px; border-bottom: 1px solid rgb(38 40 28 / 0.16);
}
.tip-points dt { font-size: 19px; font-weight: 600; line-height: 1.3; }
.tip-points dd {
  font-family: var(--font-display); font-size: 34px; font-weight: 860; font-stretch: 75%; line-height: 1;
  font-variant-numeric: lining-nums; color: var(--olive);
}

.tip-example {
  display: grid; gap: 12px; margin-top: 6px; padding: clamp(20px, 2.4vw, 32px);
  background: var(--cream-lift); border-top: 4px solid var(--olive);
}
.prose .tip-example p { font-size: 19px; line-height: 1.5; }
.tip-example-label { font-weight: 760; font-stretch: 108%; }
.tip-calc { white-space: nowrap; font-variant-numeric: lining-nums; }
.tip-example b { font-weight: 720; font-variant-numeric: lining-nums; white-space: nowrap; }

.tip-close { grid-column: 3 / span 8; display: grid; gap: 10px; padding-top: 30px; border-top: 2px solid var(--line); }
.prose .tip-questions { font-size: clamp(22px, 2.2vw, 30px); font-weight: 650; line-height: 1.25; }
.prose .tip-updated { font-size: 16px; color: var(--mute-cream); }

@media (max-width: 1099px) {
  .tip-close { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .tip-points { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .tip-points dd { font-size: 30px; }
  .prose .tip-example p { font-size: 18px; }
}