/* Numbered offer cards — numeral auto-fitted to the title block.
   Load AFTER homepage-offers.css. Pair with offer-numbers.js.

   The numeral's ink box is matched to the title text block: top and bottom
   align exactly, whether the title runs 2 lines or 3. offer-numbers.js does
   the measuring; the values below are the no-JS fallback (still presentable).

   Markup:
     <h3 class="offer-tile__title">
       <i class="offer-tile__num">1</i><span>Create or restructure…</span>
     </h3>
*/

.offer-trio--numA .offer-tile__title {
  display: flex;
  align-items: flex-end;          /* fallback: baseline-ish bottom alignment */
  gap: 16px;
}
/* Once JS has fitted the numeral, it aligns from the top and positions its own ink. */
.offer-trio--numA .offer-tile__title.is-fitted { align-items: flex-start; }

.offer-tile__num {
  font-style: normal;
  flex: none;
  font-weight: 800;
  font-size: 58px;                /* fallback only — JS overrides */
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums tabular-nums;
}
.offer-trio--numA .offer-tile--peer .offer-tile__num { color: var(--turquoise); }
.offer-trio--numA .offer-tile--flagship .offer-tile__num { color: var(--purple); opacity: .42; }

.offer-trio--numA .offer-tile__title > span { min-width: 0; }

@media (max-width: 780px) {
  .offer-trio--numA .offer-tile__title { gap: 13px; }
  .offer-tile__num { font-size: 50px; }
}