/* Index pages: /guides/, /labs/, /tools/, /services/ and /pricing/. They reuse the page head, sections and
   work list from brand/components.css; this file adds the dense reading list (guides and labs), whose
   group heading stays in view while a long list scrolls past it, and the price rows. */
.ix-head { align-content: start; align-self: start; display: grid; gap: var(--wp-3); grid-column: 1; }
.ix-head h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.05; text-wrap: balance; }
.ix-head .intro { color: var(--wp-muted); }
.ix-tool a { display: inline-block; font-weight: 600; margin-block: -10px; padding-block: 10px; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ix-tool a::after { color: var(--wp-rust); content: "→"; content: "→" / ""; margin-left: .4em; }
.ix-section > .ix-list, .page-section > .work-list, .page-section > .px-list, .page-section > .px-free { grid-column: 2; }

.ix-list { counter-reset: ix; list-style: none; margin: 0; padding: 0; }
.ix-list li { border-bottom: var(--wp-rule) solid var(--wp-hair); display: grid; gap: var(--wp-2); padding: var(--wp-4) 0; }
.ix-list li:first-child { padding-top: 0; }
.ix-list h3 { font: 600 1.125rem/1.35 var(--wp-font-body); letter-spacing: 0; text-wrap: pretty; }
.ix-list h3 a { color: var(--wp-ink); display: block; margin-block: -12px; padding-block: 12px; text-decoration: none; }
.ix-list h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ix-list h3 a:focus-visible { outline-offset: 2px; }
.ix-list .ix-line { color: var(--wp-ink); font-size: 1rem; line-height: 1.5; max-width: 40em; }
.ix-list .ix-when { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; }
.ix-list .nb, .ix-page .nb { white-space: nowrap; }

/* Prices: the amount first and largest, then its unit, then the terms that come with it. */
.px-list { list-style: none; margin: 0; padding: 0; }
.px-row { border-bottom: var(--wp-rule) solid var(--wp-hair); display: grid; gap: var(--wp-3); padding: var(--wp-4) 0 var(--wp-6); }
.px-row:first-child { padding-top: 0; }
.px-row h3 { font: 700 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--wp-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.px-row h3 a { color: var(--wp-ink); text-decoration: none; }
.px-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.px-prices { display: flex; flex-wrap: wrap; gap: var(--wp-2) var(--wp-8); list-style: none; margin: 0; padding: 0; }
.px-prices li { align-content: start; display: grid; gap: 2px; }
.px-amount { font: 700 var(--wp-text-price)/1 var(--wp-font-display); letter-spacing: -0.02em; }
.px-unit { color: var(--wp-muted); font-size: var(--wp-text-meta); line-height: 1.35; max-width: 16em; }
.px-terms { color: var(--wp-ink); display: grid; font-size: 1rem; gap: var(--wp-1); line-height: 1.5; margin: 0; max-width: 40em; padding-left: 1.1em; }
.px-row .go { justify-self: start; }
.px-free { display: grid; font-size: 1.0625rem; gap: var(--wp-3); line-height: 1.55; margin: 0; padding-left: 1.1em; }
.px-free a { font-weight: 600; }

@container page (min-width: 53.8125rem) {
  /* Wide screens: the group heading and its tool link stay beside the list while it scrolls. */
  .ix-section .ix-head { position: sticky; top: var(--wp-6); }
}
@container page (max-width: 53.75rem) {
  .ix-head, .ix-section > .ix-list, .page-section > .work-list, .page-section > .px-list, .page-section > .px-free { grid-column: 1; }
}