/* Products page — the grade finder, the grade cards and the comparison table.
 *
 * The rest of the design-system pages carry their styling inline, which is what
 * the pre-rendering left behind. This page is the one that outgrew it: the
 * filter chips, the card spec rows and the responsive comparison table all need
 * state and media queries, and neither fits in a style attribute. Everything
 * here is namespaced `pg-` so it cannot collide with `site-chrome.css`'s `ac-`
 * chrome or with the inline styles still on the page.
 *
 * Tokens come from `_ds/…/colors_and_type.css`, re-declared inline in the page
 * head like every other design-system page.
 */

/* ---------- Hero ---------- */

.pg-hero {
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px 40px 40px;
}

.pg-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0;
}

.pg-hero__title {
  font-family: var(--font-serif);
  /* The shared editorial hero scale from site-chrome.css: 42px at 390px up to
     60px at 1440px, so the headline is readable on a phone without the hero
     pushing the first grade below the fold. */
  font-size: var(--ac-display-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 20px;
  max-width: var(--ac-display-1-measure);
  text-wrap: balance;
}

.pg-hero__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 62ch;
}

.pg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Proof strip ----------
 *
 * Two by two on a phone rather than four stacked rows: the four figures are the
 * reason a technical buyer trusts the page, and stacking them singly pushed the
 * first grade card most of a screen further down.
 */

.pg-proof {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 40px;
}

.pg-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-12);
  border: 1px solid var(--ink-12);
  border-radius: 8px;
  overflow: hidden;
}

.pg-proof__cell {
  background: var(--bone);
  padding: 22px 24px;
  min-width: 0;
}

.pg-proof__value {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.pg-proof__label {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--fg-2);
  margin-top: 8px;
}

.pg-proof__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 14px 0 0;
}

/* ---------- Section furniture ---------- */

.pg-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 48px;
}

.pg-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 24px;
}

.pg-section__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.9vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 12px 0 0;
}

.pg-section__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 10px 0 0;
  max-width: 60ch;
}

/* ---------- Filters ---------- */

.pg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pg-filters__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-right: 4px;
}

.filter-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--ease-tide), border-color 220ms var(--ease-tide),
    color 220ms var(--ease-tide);
}

.filter-chip:hover { background: var(--ink-04); border-color: var(--ink); }

.filter-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.pg-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin: 4px 0 18px;
}

/* ---------- Grade cards ---------- */

.pg-grades { align-items: stretch; }

.pg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: 3px solid var(--pg-accent, var(--ink));
  border-radius: 8px;
  padding: 24px;
  transition: box-shadow 220ms var(--ease-tide), border-color 220ms var(--ease-tide);
}

.pg-card:hover { box-shadow: var(--shadow-2); }

.pg-card--agriculture { --pg-accent: #49613C; }
.pg-card--industrial  { --pg-accent: #0E3540; }
.pg-card--water       { --pg-accent: #2E5D6E; }

.pg-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pg-card__code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.pg-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* #FFFFFF on each of the three accents clears 4.5:1, so the pill is legible
     at this size rather than merely decorative. */
  color: #FFFFFF;
  background: var(--pg-accent, var(--ink));
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.pg-card__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 14px 0 8px;
}

.pg-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 18px;
}

.pg-card__specs {
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pg-card__specs > div + div { margin-top: 12px; }

.pg-card__spec-key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --fg-3 on --paper is 5.06:1; the label is small and tracked, so it is held
     above the 4.5:1 floor rather than at the 3:1 large-text one. */
  color: var(--fg-3);
}

.pg-card__spec-val {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 3px;
}

.pg-card__actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: background 220ms var(--ease-tide), border-color 220ms var(--ease-tide),
    color 220ms var(--ease-tide);
}

.pg-btn--primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--bone);
}

.pg-btn--primary:hover { background: var(--tide); border-color: var(--tide); }

.pg-btn--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
}

.pg-btn--ghost:hover { background: var(--ink-04); border-color: var(--ink); }

.pg-btn__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* ---------- Comparison table ----------
 *
 * Below 780px the table is relabelled rather than scrolled sideways: every cell
 * carries its column name in `data-label` and the header row is taken out of
 * view, so the whole comparison is readable in one column with nothing behind a
 * horizontal scrollbar. The `<table>` semantics are untouched, so a screen
 * reader still hears the real header association.
 */

.pg-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}

.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.pg-table caption {
  caption-side: top;
  padding: 16px 20px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
  background: var(--ink-04);
  border-bottom: 1px solid var(--border);
}

.pg-table th,
.pg-table td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.pg-table thead th {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 0;
}

.pg-table tbody tr:last-child th,
.pg-table tbody tr:last-child td { border-bottom: 0; }

.pg-table tbody th {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

/* `hidden` is a UA-stylesheet rule, and the `display: block` the small-screen
   layout below puts on these rows is an author rule, which beats it. Without
   this a filtered-out row keeps its space on a phone. */
.pg-table tbody tr[hidden] { display: none !important; }

.pg-table td { color: var(--fg-2); }
.pg-table .pg-table__num { font-family: var(--font-mono); color: var(--ink); }
.pg-table__doc { font-family: var(--font-mono); font-size: 13px; }
/* The data-sheet link is the one thing in the table a reader reaches for, and
   at 13px it was a 78x15 target — under WCAG 2.5.8's 24px floor. It is the only
   link in the cell, so it can take the cell's own height without disturbing the
   text around it. */
.pg-table__doc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Procurement band ---------- */

.pg-band {
  background: var(--ink);
  color: var(--bone);
}

.pg-band__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 40px;
}

.pg-band .pg-eyebrow { color: rgba(247, 244, 237, 0.66); }

.pg-band__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.9vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 14px 0 16px;
  max-width: 24ch;
  color: var(--bone);
}

.pg-band__lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247, 244, 237, 0.75);
  margin: 0;
  max-width: 62ch;
}

.pg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 44px;
}

.pg-step { min-width: 0; padding-top: 18px; border-top: 1px solid rgba(247, 244, 237, 0.22); }

.pg-step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sand);
}

.pg-step__title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  margin: 10px 0 6px;
  color: var(--bone);
}

.pg-step__body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247, 244, 237, 0.72);
  margin: 0;
}

/* ---------- Closing call to action ---------- */

.pg-close {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px;
}

.pg-close__inner { max-width: 720px; margin: 0 auto; text-align: center; }

.pg-close__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.9vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 14px 0 18px;
}

.pg-close__lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 auto 28px;
  max-width: 60ch;
}

.pg-close__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pg-close .pg-btn { padding: 0 24px; min-height: 48px; font-size: 15px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pg-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pg-step { margin-top: 24px; }
}

@media (max-width: 780px) {
  /* Relabelling the cells is only half of it. `tr`/`th`/`td` alone leave the
     `<table>` and `<tbody>` in table layout, so the block-level rows are swept
     into a single anonymous table-cell that is sized shrink-to-fit instead of
     to the table's 100%, and the `<caption>` box is measured against that same
     degenerate one-column grid. On a 390px phone that collapsed the caption to
     a ~100px column of one-word lines with the rest of the card left blank, and
     stopped the row rules short of the right edge. Taking the table, its body
     and the caption out of table layout as well is what `.technical-table--stack`
     already does on every other page that stacks a table; this is the same rule
     for the one table that predates it. Chromium keeps the table, row and cell
     roles through it, as it does there, so the header association below is
     unaffected. */
  .pg-table,
  .pg-table tbody,
  .pg-table caption { display: block; width: 100%; }

  .pg-table caption { padding: 14px 16px; }
  /* Taken out of view rather than out of the document: the column headers stay
     in the accessibility tree, so a screen reader still associates each cell
     with its column and the `data-label` below is free to be purely visual.
     The header row and its cells are forced to `display: block` for the same
     reason the industry tables do it — a `table-row` inside the 1px box still
     lays out at its natural width and pushes a phantom 600px box off the right
     edge of a phone. */
  .pg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .pg-table thead tr,
  .pg-table thead th { display: block; width: 100%; }
  .pg-table tbody tr {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .pg-table tbody tr:last-child { border-bottom: 0; }
  .pg-table tbody th,
  .pg-table tbody td {
    display: block;
    border-bottom: 0;
    padding: 8px 16px;
    white-space: normal;
  }
  .pg-table tbody th { padding-top: 14px; font-size: 15px; }
  .pg-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 3px;
  }
}

@media (max-width: 720px) {
  .pg-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-proof__cell { padding: 18px 16px; }
}

@media (max-width: 600px) {
  /* The tracked capitals carry the card's structure — particle size, best fit,
     data sheet — so they are the labels a buyer scans. 10.5px is too small to
     scan on a phone; the extra pixel costs no lines. */
  .pg-card__spec-key,
  .pg-card__tag,
  .pg-table tbody td::before { font-size: 11.5px; }

  .pg-hero { padding: 40px 20px 32px; }
  .pg-proof { padding: 0 20px 32px; }
  .pg-section { padding: 0 20px 40px; }
  .pg-band__inner { padding: 56px 20px; }
  .pg-close { padding: 56px 20px; }
  .pg-hero__title { max-width: none; }
  .pg-hero__actions .pg-btn { flex: 1 1 100%; }
  .pg-close__actions .pg-btn { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  .pg-proof__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip,
  .pg-card,
  .pg-btn { transition: none; }
}