/* The pricing page's own bands (phase 9 spec 6). */

/* #compare, #business and #if-we-stop land below the sticky header. */
main [id] { scroll-margin-block-start: calc(var(--header-height) + var(--space-4)); }
.narrow { max-inline-size: 60rem; margin-inline: auto; }
.card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.card-grid p:last-child { margin-block-end: 0; }
.card-grid .link-more { color: var(--blue); }
.faq + .head { margin-block-start: var(--space-8); }
ul.stack { max-inline-size: var(--measure-long); }

/* The comparison: a table per group, a column per plan. On a narrow screen the plans scroll
   sideways inside the group while the first column stays in view; the group itself never widens
   the page. */
.narrow > details { min-inline-size: 0; }
.narrow .table-scroll { padding: 0 0 var(--space-3); }
.plan-table { table-layout: fixed; min-inline-size: 40rem; color: var(--ink); }
.plan-table :is(th, td):first-child { padding-inline-start: 22px; }
.plan-table tr:last-child > * { border-block-end: 0; }
.plan-table thead th:first-child { inline-size: 30%; }
.plan-table th { font: 600 0.95rem / 1.4 var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.plan-table tbody th { background: var(--card); }
.plan-table :is(thead th:first-child, tbody th) { position: sticky; inset-inline-start: 0; }
.plan-table small { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--ink-2); }
/* The plan's name inside each cell shows only on a phone, where the header row is out of view. */
.plan-table__plan { display: none; }
/* On a phone each row is a grid: the feature and its note across the full width, then the four
   plans two by two, each cell with its plan's name. A fourth of a phone is too narrow for Finnish
   words (stage 4 spec 8). The template's roles keep it a table for a screen reader, and the names
   in the cells are hidden from it, since the header row already names each column. */
@media (max-width: 40rem) {
  .plan-table { min-inline-size: 0; font-size: var(--text-sm); }
  .plan-table, .plan-table :is(thead, tbody) { display: block; }
  .plan-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .plan-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-table :is(th, td) { padding-inline: 12px; overflow-wrap: break-word; }
  .plan-table tbody th:first-child { grid-column: 1 / -1; position: static; border-block-end: 0; padding: var(--space-3) 12px var(--space-1); }
  .plan-table.compare td { padding-block: var(--space-2); text-align: start; }
  .plan-table td:nth-last-child(n+3) { border-block-end: 0; }
  .plan-table__plan { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
  .plan-table th { font-size: 0.8rem; }
}