/* The merged site's platform page (src/site/platform.html). Loads after site-b.css and overrides nothing there for
   other pages: everything here is scoped to classes only this page uses (.is-centred hero, pl_*).
   Palette and type: r3/system.css and site.css only. */

/* hero: centred copy above the exploded drawing (the stacked figure below is unchanged) */
.b_hero.is-centred .b_hero-copy { grid-column: 1 / -1; justify-items: center; text-align: center; }
.b_hero.is-centred .b_title { margin-left: auto; margin-right: auto; }
.b_hero.is-centred .b_lede { margin-left: auto; margin-right: auto; max-width: 56ch; }
.b_hero.is-centred .b_actions { justify-content: center; }
.pl_eyebrow { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); }
.pl_eyebrow::before, .pl_eyebrow::after { content: ""; width: var(--space-6); border-top: var(--line-hair) solid var(--color-gold); }

/* white-glove: one ruled panel */
.pl_glove { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; column-gap: var(--space-6); row-gap: var(--space-4); align-items: center; margin-top: var(--space-7); padding: var(--space-6); border: var(--line-hair) solid var(--b-rule-strong); background: var(--wash-gold-08); }
.pl_glove-mark { align-self: start; padding-top: 0.4em; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); }
.pl_glove-body { display: grid; gap: var(--space-3); }
.pl_glove-heading { font-family: var(--font-display); font-stretch: var(--stretch-wide); font-weight: 300; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.pl_compare { margin-top: var(--space-8); }

/* custody: the sub-heading that explains the cadastral sheet */
.pl_subhead { font-family: var(--font-display); font-stretch: var(--stretch-wide); font-weight: 400; font-size: var(--text-lg); padding-top: var(--space-4); border-top: var(--line-hair) solid var(--b-rule); max-width: 40ch; }

/* white label: three short stops */
.pl_route { display: grid; border-top: var(--line-hair) solid var(--b-rule-strong); width: 100%; }
.pl_route li { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: var(--line-hair) solid var(--b-rule); }
.pl_route-title { font-family: var(--font-display); font-stretch: var(--stretch-wide); font-weight: 500; font-size: var(--text-base); }
.pl_route-text { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }

/* the terms, plainly: two ruled columns */
.pl_terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); border-top: var(--line-hair) solid var(--b-rule-strong); }
.pl_term { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--line-hair) solid var(--b-rule); }
.pl_term dt { font-family: var(--font-display); font-stretch: var(--stretch-wide); font-weight: 400; font-size: var(--text-base); color: var(--color-gold); }
.pl_term dd { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--color-text-muted); }
.pl_term-link { display: flex; width: fit-content; min-height: 2.75rem; align-items: center; margin-top: var(--space-1); color: var(--color-paper); }

@media (max-width: 1279px) {
  .pl_terms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .pl_glove { grid-template-columns: minmax(0, 1fr); }
  .pl_glove-action { justify-self: start; }
}
@media (max-width: 767px) {
  .pl_glove { padding: var(--space-5); }
  .pl_term { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* keep "white-glove" whole when the panel heading wraps */
.pl_nowrap { white-space: nowrap; }
.pl_route-text { font-size: var(--text-base); }

/* anchors land below the sticky nav */
main [id] { scroll-margin-top: calc(var(--space-8) + var(--space-4)); }

/* custody: the copy on the left; the engraving and, under it, the cadastral sheet the copy explains on the right
   (the sheet under the copy left ~770px empty under the engraving) */
@media (min-width: 992px) {
  .b_custody-copy { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .b_custody-engraving { grid-column: 8 / -1; grid-row: 1; align-self: start; }
  .b_custody-cadastre { grid-column: 8 / -1; grid-row: 2; align-self: start; }
}
@media (max-width: 991px) {
  .b_key-text, .pl_stack th, .pl_stack td { font-size: var(--text-base); }
  /* white label: heading and copy first, the drawing after */
  .b_figset > figure { order: 1; }
}
@media (max-width: 767px) {
  /* site-b's twelve-column grids outgrow a phone once their eleven gaps are counted: one column */
  .b_hero-grid, .b_head, .b_figset, .b_custody { grid-template-columns: minmax(0, 1fr); }
  /* a calmer hairline grid behind the hero on phones: four columns, not twelve */
  .b_hero.has-grid { background-size: calc((100% - 2 * var(--gutter)) / 4) 100%; }
  .b_key-text { font-size: var(--text-base); }
  .b_custody-cadastre { order: 1; }
  .b_custody-engraving { order: 2; }
  /* the membership sheet's contour lines would run behind its text on a phone */
  .sheet_contours { display: none; }
  /* tables become one block per row, each value labelled */
  .pl_stack, .pl_accounts { min-width: 0; }
  .pl_stack tbody th { width: auto; }
  .pl_stack thead, .pl_accounts thead { display: none; }
  .pl_stack tbody, .pl_stack tr, .pl_stack th, .pl_stack td,
  .pl_accounts tbody, .pl_accounts tr, .pl_accounts th, .pl_accounts td { display: block; width: auto; }
  .pl_stack tr, .pl_accounts tr { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: var(--line-hair) solid var(--b-rule); }
  .pl_stack th, .pl_stack td, .pl_accounts th, .pl_accounts td { padding: 0; border-bottom: 0; font-size: var(--text-base); }
  .pl_stack td::before, .pl_accounts td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-mist); }
  .pl_accounts tbody th { font-size: var(--text-lg); }
  .pl_accounts td { overflow-wrap: anywhere; }
  .pl_accounts caption { text-align: left; }
}

/* hero key: heading and text sit together at the top of each cell; five parts as 3 + 2 below the 1280 base */
.b_key-body { align-content: start; }
@media (min-width: 768px) and (max-width: 1279px) {
  .b_hero-figure .b_key { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* QA 11 Oct (late): body copy never below 16px - the key texts and the stack table read at the base size on every
   width (they were 15px above 991px) */
.b_key-text, .pl_stack th, .pl_stack td { font-size: var(--text-base); }