/* Keep the comparison cards, but use the same neutral table palette as Cost and Regions. */
body.frontier-page { background: #f9fafb; color: #111827; }
.frontier-page .site-header, .frontier-page footer { background: #f9fafb; border-color: #e5e7eb; }
.frontier-page .site-header { padding: 0 40px; }
.frontier-page footer a { color: #111827; }
.frontier-page .frontier-catalog { background: #f9fafb; padding-top: 0 !important; }
.frontier-intro { padding: 40px 0 20px; }
.frontier-intro h1 { margin: 0 0 12px; font-size: 36px; line-height: 1; letter-spacing: -.04em; color: #111827; }
.frontier-intro > p { max-width: 720px; margin: 0; color: #6b7280; font-size: 15px; line-height: 1.5; }
.frontier-catalog .heading { margin-bottom: 8px !important; }
#frontier-count { margin-left: auto; color: #6b7280; font: 10px 'IBM Plex Mono', monospace; }

.frontier-tier { margin-bottom: 28px; }
.frontier-tier-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 10px; padding: 0 8px 8px; border-bottom: 1px solid #e5e7eb; }
.frontier-tier-heading h2 { margin: 0; color: #6b7280; font-size: 24px; letter-spacing: -.04em; }
.frontier-tier-heading span { color: #6b7280; font: 10px 'IBM Plex Mono', monospace; }

/* A fixed 3-column grid stretched to the container width: a tier with fewer than 3 models just
   leaves the remaining column(s) as blank space rather than widening its cards to fill the row.
   grid-template-rows must be explicit (not auto-rows) for the cards' grid-template-rows:subgrid
   below to have tracks to inherit — subgrid can't subgrid into an implicit row set. */
.frontier-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--card-rows), auto); gap: 1px; background: #e5e7eb; }

/* Every card in a tier emits the identical row structure (see lib/frontier-cards.js), so subgrid
   can align each attribute — Pricing, Features, everything — at the same height across the row,
   regardless of how much text or how many harness entries any single card has to show. dl and its
   row <div>s use display:contents to hand their rows up to the card's own row tracks; each row
   still lays out its own dt/dd pair independently, only the vertical position is shared. */
.frontier-card { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; align-content: start; padding: 18px; background: #fff; border: 0; }
.frontier-card:hover { background: #eff6ff; }
.frontier-card.placeholder, .frontier-card.placeholder:hover { background: #f3f4f6; }
.frontier-card.missing { grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #6b7280; text-align: center; }

.frontier-card h3 { display: flex; align-items: flex-start; gap: 7px; min-height: 44px; margin: 0 0 18px; font-size: 20px; line-height: 1.1; letter-spacing: -.04em; }
.frontier-card h3 a { display: flex; align-items: center; gap: 4px; color: #111827; text-decoration: none; }
.frontier-card h3 a:hover { text-decoration: underline; }
.frontier-provider-logo { width: 20px; height: 20px; object-fit: contain; }
.frontier-published { margin-left: auto; color: #6b7280; font: 10px 'IBM Plex Mono', monospace; font-weight: 400; white-space: nowrap; }

.frontier-card h4 { margin: 4px 0 0; padding: 9px 0 0; color: #374151; font: 500 10px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .02em; }
.frontier-card dl { display: contents; }
.frontier-card dl > div { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 12px; min-height: 34px; padding: 8px 0; border-top: 1px solid #e5e7eb; align-items: center; }
.frontier-card dl.frontier-pricing > div { align-items: start; }
.frontier-price-best { color: #166534; background: #dcfce7; border-radius: 3px; box-shadow: 0 0 0 2px #dcfce7; }
.frontier-card dt { color: #6b7280; font: 10px 'IBM Plex Mono', monospace; }
.frontier-card dd { margin: 0; color: #374151; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.frontier-card dd img { vertical-align: -1px; }

.frontier-modalities { display: flex; align-items: center; gap: 4px; }
.frontier-modalities .modality-icon { width: 18px; height: 18px; }
.frontier-modalities .modality-icon svg { width: 11px; height: 11px; }

.frontier-endpoint-apis { display: grid; gap: 4px; }
.frontier-endpoint-api { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; }

.frontier-cap { display: inline-block; font: 600 11px 'IBM Plex Sans', sans-serif; }
.frontier-cap.supported { color: #166534; }
.frontier-cap.unsupported, .frontier-cap.undocumented { color: #6b7280; }

@media (max-width: 900px) {
  .frontier-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .frontier-page .site-header { padding: 0 20px; }
  .frontier-intro { padding: 24px 0 20px; }
  .frontier-intro h1 { font-size: 28px; }
  .frontier-cards { grid-template-columns: 1fr; }
  .frontier-card dl > div { grid-template-columns: 110px minmax(0, 1fr); }
}