/* Company pages (package G): about, contact, pricing, the legal pages and the
   thank-you page. Tokens only; no hex codes. Linked from each template's
   head block after site.css. */

/* Any page that sets the solid nav: the body already carries the nav offset
   (body.nav-solid), so an article hero drops its own. (The legal and
   thank-you pages now use the overlay nav, like every other navy hero.) */
.nav-solid .hero--article { padding-top: var(--space-7); }
:is(.page-legal, .page-pricing, .page-about) :is(h2, h3)[id],
.page-company [id="prices"] { scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }

/* ---- Legal body --------------------------------------------------------- */
.band.legal { padding-top: var(--space-8); }
.legal__body > ol:first-of-type {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 1.6em);
  margin-bottom: var(--space-7);
}
.legal__body h2 { margin-top: 1.9em; }
.legal__body h3 { font-size: var(--fs-h4); margin-top: 1.6em; }
.legal__body td code, .legal__body th code { white-space: nowrap; }
.legal__consent { margin-top: var(--space-6); }

/* ---- Stacked tables on phones: label above value, left aligned ---------- */
@media (max-width: 575.98px) {
  .page-company .table-stack td { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
  .page-company .table-stack tbody th { display: block; width: 100%; border: 0; padding: 8px 0 4px; }
  .legal__body .table-stack { margin-top: var(--space-5); }
}

/* ---- Price table --------------------------------------------------------- */
.price-table { margin-bottom: 0; }
.price-table > :not(caption) > * > * { padding: var(--space-4) var(--space-4) var(--space-4) 0; vertical-align: baseline; }
.price-table > :not(caption) > * > :last-child { padding-right: 0; }
.price-table tbody th { font-weight: 600; color: var(--color-text-heading); min-width: 11rem; }
.price-table tbody th a { color: inherit; text-decoration: underline; text-decoration-color: var(--df-navy-300); }
.price-table tbody th a:hover { text-decoration-color: currentColor; }
/* flex, not table: a table box inside the collapsed-border table ignores padding */
.price-table tbody th .badge { display: flex; width: fit-content; margin: 6px 0 0; }
.price-table__what { color: var(--color-text); }
.price-table__price { text-align: right; white-space: nowrap; }
td.price-table__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-weight: 500; font-size: 1.125rem; color: var(--color-text-heading); }
td.price-table__price--text { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; }
@media (min-width: 992px) { .price-table thead .price-table__price { min-width: 14rem; } }
/* The one gold "start here" row (SITE-SPEC §7.4): gold fill, Navy 900 text. */
.price-table tr.is-start { --bs-table-bg: var(--color-accent); --bs-table-color: var(--df-navy-900); --bs-table-hover-bg: var(--color-accent); }
.price-table tr.is-start > * { color: var(--df-navy-900); border-bottom-color: transparent; }
.price-table tr.is-start > :first-child { padding-left: var(--space-4); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.price-table tr.is-start > :last-child { padding-right: var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.price-table tr.is-start .badge { background: var(--color-surface); color: var(--df-navy-900); }
.price-table__foot { margin-top: var(--space-5); }
.price-table__foot p { margin-bottom: var(--space-2); }
@media (max-width: 575.98px) {
  .price-table tr { padding: var(--space-3) var(--space-4); }
  .price-table > :not(caption) > * > * { padding: 6px 0; }
  /* Stacked, the start row would be a quarter-screen gold card: it stays white
     with a navy border, and the gold goes on its "Start here" badge only. */
  .price-table tr.is-start { --bs-table-bg: var(--color-surface); --bs-table-hover-bg: var(--color-surface); background: var(--color-surface); border: 2px solid var(--color-brand); }
  .price-table tr.is-start .badge { background: var(--color-accent); color: var(--df-navy-900); }
  .price-table tr.is-start > :first-child,
  .price-table tr.is-start > :last-child { padding-left: 0; padding-right: 0; border-radius: 0; }
  .price-table__price, td.price-table__price--text { white-space: normal; min-width: 0; }
  .price-table tbody th { min-width: 0; }
  .price-table tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- About -------------------------------------------------------------- */
.company-split { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .company-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }
.company-split__head h2 { margin-bottom: 0; }
.company-split__body > p:first-child { font-size: var(--fs-lead); color: var(--color-text-heading); }
@media (min-width: 992px) { .company-split__body { padding-top: var(--space-6); } }
.company-story__image { margin-top: var(--space-7); }
.company-people { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .company-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.company-people .portrait__photo { max-width: 160px; }
@media (min-width: 576px) {
  .company-people .portrait { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: var(--space-5); align-content: start; }
  .company-people .portrait__photo { grid-row: 1 / span 3; margin-bottom: 0; max-width: none; }
  .company-people .portrait > :not(.portrait__photo) { grid-column: 2; }
}
@media (min-width: 1200px) { .company-people .portrait { grid-template-columns: 168px minmax(0, 1fr); } }
.company-people .portrait__text { margin-bottom: 0; }

.company-facts { max-width: 880px; }
.company-facts__list { margin: 0; }
.company-facts__row { display: grid; gap: 4px; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.company-facts__row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) { .company-facts__row { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-5); } }
.company-facts__row dt { color: var(--color-text-muted); padding-top: 3px; }
.company-facts__row dd { margin: 0; color: var(--color-text-heading); }
.company-facts__source { margin-top: var(--space-5); font-size: var(--fs-small); }

/* ---- Contact ------------------------------------------------------------ */
.company-contact__grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .company-contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; } }
.company-contact__form .section-head { margin-bottom: var(--space-5); }
.company-contact__side { display: flex; flex-direction: column; gap: var(--space-6); }
.company-contact__side h2 { margin-bottom: var(--space-4); }
.company-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.company-steps li { position: relative; padding-left: 44px; margin-bottom: var(--space-4); counter-increment: step; }
.company-steps li:last-child { margin-bottom: 0; }
.company-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-weight: 500; font-size: .9375rem;
  color: var(--df-navy-800);
}
.company-contact__list { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: baseline; }
.company-contact__list dt { color: var(--color-text-muted); }
.company-contact__list dd { margin: 0; overflow-wrap: anywhere; }
.company-contact__list dd a { display: inline-flex; align-items: center; min-height: 44px; }
.company-offices__address { font-style: normal; margin-bottom: var(--space-4); }
.company-offices .card__foot .btn-link { padding-left: 0; }
.company-offices__legal { margin: var(--space-6) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }