/* Shared styles for sub-pages (partners, staff, migration, firms, security, privacy).
 * Builds on marketing.css. All classes prefixed .pg-* to avoid colliding with site sections. */

/* Nav active state */
.nav .links a.active { color: var(--ink); }
.nav .links a.active::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--ochre);
  margin-top: 4px;
}
/* The dropdown trigger is an inline-flex row (label + chevron), so the
   underline above would sit BESIDE the label instead of under it. Let it
   wrap onto its own full-width line. Inside the dropdown card the active
   item is marked by its background instead — an underline reads as noise
   in a padded menu row. */
.nav .links .has-menu > a { flex-wrap: wrap; }
.nav .links .has-menu > a.active::after { flex-basis: 100%; }
.nav .links .menu-card a.active { background: var(--linen); }
.nav .links .menu-card a.active::after { display: none; }

/* ===== Page hero (lighter than home hero) ===== */
.pg-hero {
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--mid);
}
.pg-hero .eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ochre);
}
.pg-hero h1 {
  font: 300 72px/0.98 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 18px;
  max-width: 980px;
  text-wrap: balance;
}
.pg-hero h1 i { font-style: italic; }
.pg-hero .sub {
  font: 400 21px/1.5 var(--font-body);
  color: var(--slate);
  margin-top: 28px;
  max-width: 720px;
  text-wrap: pretty;
}
/* Matches the link treatment in .pg-block p / .pg-checklist below. */
.pg-hero .sub a {
  color: var(--ochre-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Reuse stat band; let pages declare a .pg-stats wrapper for slightly tighter rhythm */
.pg-stats {
  padding: 80px 0;
  border-bottom: 1px solid var(--mid);
  background: var(--cream);
}
.pg-stats .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.pg-stats .stat .val {
  font: 300 64px/0.95 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pg-stats .stat .val .mono {
  font: 400 64px/0.95 var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.pg-stats .stat .val .unit {
  font: 400 28px var(--font-display);
  color: var(--slate-2);
  margin-left: 4px;
  letter-spacing: -0.01em;
}
.pg-stats .stat .label {
  font: 500 15px/1.55 var(--font-body);
  color: var(--slate);
  margin-top: 14px;
  max-width: 320px;
}

/* ===== Generic content block ===== */
.pg-block { padding: 96px 0; border-bottom: 1px solid var(--mid); }
.pg-block p a,
.pg-block .pg-checklist a,
.pg-block .pg-address a {
  color: var(--ochre-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-block.ink p a { color: var(--ochre-soft); }
.pg-block.tight { padding: 64px 0; }
.pg-block.linen { background: var(--linen); }
.pg-block.ink { background: var(--ink); color: var(--on-ink); }
.pg-block.ink h2 { color: var(--on-ink); }
.pg-block.ink h2 i { color: var(--ochre-soft); }
.pg-block.ink p, .pg-block.ink li, .pg-block.ink .pg-body { color: var(--on-ink-2); }
.pg-block .eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ochre);
}
.pg-block.ink .eyebrow { color: var(--ochre-soft); }
.pg-block h2 {
  font: 300 44px/1.12 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 16px;
  max-width: 880px;
  text-wrap: pretty;
}
.pg-block h2 i { font-style: italic; }
.pg-block .lede {
  font: 400 19px/1.55 var(--font-body);
  color: var(--slate);
  margin-top: 22px;
  max-width: 680px;
  text-wrap: pretty;
}

/* Two-column block layout: heading column + content column */
.pg-2col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 1000px) {
  .pg-2col { grid-template-columns: 1fr; gap: 40px; }
}

/* ===== Feature list (stacked) ===== */
.pg-flist { display: flex; flex-direction: column; }
.pg-flist .item {
  padding: 28px 0;
  border-top: 1px solid var(--mid);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: baseline;
}
.pg-flist .item:last-child { border-bottom: 1px solid var(--mid); }

/* Two-column variant. The single-column list closes itself with a
   border-bottom on :last-child; in a 2-up grid that would leave the
   second-to-last item's row open, so the whole final row gets the edge. */
.pg-flist.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.pg-flist.two .item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--mid); }
.pg-block.ink .pg-flist.two .item:nth-last-child(-n + 2) { border-color: rgba(195, 184, 158, 0.18); }
.pg-flist.two .item p { max-width: none; }
@media (max-width: 900px) {
  .pg-flist.two { grid-template-columns: 1fr; }
  .pg-flist.two .item:nth-last-child(-n + 2) { border-bottom: 0; }
  .pg-flist.two .item:last-child { border-bottom: 1px solid var(--mid); }
}
.pg-block.ink .pg-flist .item { border-color: rgba(195, 184, 158, 0.18); }
.pg-flist .num {
  font: 400 16px/1 var(--font-mono);
  color: var(--ochre);
  letter-spacing: 0.04em;
}
.pg-block.ink .pg-flist .num { color: var(--ochre-soft); }
.pg-flist .item h3 {
  font: 500 22px/1.25 var(--font-body);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pg-block.ink .pg-flist .item h3 { color: var(--on-ink); }
.pg-flist .item p {
  font: 400 16px/1.55 var(--font-body);
  color: var(--slate);
  margin-top: 8px;
  max-width: 640px;
}
.pg-block.ink .pg-flist .item p { color: var(--on-ink-2); }

/* ===== Checklist (em-dash items, dense) ===== */
.pg-checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.pg-checklist li {
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink);
  padding-left: 28px;
  position: relative;
}
.pg-checklist li::before {
  content: "—";
  color: var(--ochre);
  position: absolute;
  left: 0;
  font-weight: 500;
}
.pg-checklist li strong { font-weight: 600; }
.pg-block.ink .pg-checklist li { color: var(--on-ink); }
.pg-block.ink .pg-checklist li::before { color: var(--ochre-soft); }

/* ===== NOT-list (used for "what you do NOT need") ===== */
.pg-notlist { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pg-notlist li {
  font: 400 16px/1.5 var(--font-body);
  color: var(--slate);
  padding-left: 28px;
  position: relative;
}
.pg-notlist li::before {
  content: "×";
  color: var(--slate-2);
  position: absolute;
  left: 0;
  font: 500 18px/1.4 var(--font-body);
}

/* ===== Quote block ===== */
.pg-quote {
  background: var(--linen);
  border: 1px solid var(--mid);
  border-radius: var(--radius-lg);
  padding: 48px 48px 40px;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}
.pg-quote::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: 32px;
  font: 300 96px/1 var(--font-display);
  color: var(--ochre);
  opacity: 0.5;
}
.pg-quote blockquote {
  font: 300 28px/1.4 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.pg-quote blockquote i { font-style: italic; }
.pg-quote .attr {
  margin-top: 24px;
  font: 500 14px var(--font-body);
  color: var(--slate);
}
.pg-quote .attr strong { color: var(--ink); font-weight: 600; }
.pg-quote .attr a {
  color: var(--ochre-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-quote.placeholder {
  background: repeating-linear-gradient(
    -45deg,
    var(--linen) 0 12px,
    var(--sand) 12px 13px
  );
  border-style: dashed;
}
.pg-quote.placeholder::before { content: ""; }
.pg-quote.placeholder blockquote {
  font: var(--mono);
  font-size: 13px;
  color: var(--slate-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pg-quote.placeholder .attr { display: none; }

/* ===== CTA pair (inline buttons in section flow) ===== */
.pg-ctapair {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.pg-ctapair .sep {
  color: var(--slate-3);
  font: var(--body);
}

/* ===== Two-pane Before / With ===== */
.pg-beforewith {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.pg-beforewith .pane {
  background: var(--cream);
  border: 1px solid var(--mid);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pg-beforewith .pane.with {
  background: var(--linen);
  border-color: var(--ochre);
}
.pg-beforewith .pane .label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.pg-beforewith .pane.with .label { color: var(--ochre-deep); }
.pg-beforewith .pane h3 {
  font: 400 22px/1.25 var(--font-display);
  color: var(--ink);
  margin-bottom: 16px;
}
.pg-beforewith .pane ol {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pg-beforewith .pane ol li {
  counter-increment: step;
  font: 400 15px/1.5 var(--font-body);
  color: var(--slate);
  padding-left: 32px;
  position: relative;
}
.pg-beforewith .pane ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  font: 500 11px/22px var(--font-mono);
  text-align: center;
}
.pg-beforewith .pane.with ol li::before {
  background: var(--ochre);
  color: #FAF6EE;
}
.pg-beforewith .pane ol li.quote {
  padding-left: 28px;
  font: italic 400 15px/1.5 var(--font-display);
  color: var(--ink);
  font-size: 16px;
}
.pg-beforewith .pane ol li.quote::before {
  content: "“";
  background: transparent;
  color: var(--ochre);
  font: 300 28px/0.8 var(--font-display);
  width: auto;
  height: auto;
  top: 4px;
}

/* ===== Timeline (day-by-day) ===== */
.pg-timeline {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--mid);
}
.pg-timeline .day {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--mid);
  align-items: start;
}
.pg-timeline .day .when {
  font: 400 14px var(--font-mono);
  color: var(--ochre-deep);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pg-timeline .day .when strong {
  display: block;
  font: 400 32px/1.05 var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 4px;
  font-style: italic;
}
.pg-timeline .day h3 {
  font: 500 20px/1.25 var(--font-body);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pg-timeline .day p {
  font: 400 16px/1.55 var(--font-body);
  color: var(--slate);
  margin-top: 8px;
  max-width: 680px;
}

/* ===== FAQ ===== */
.pg-faq { display: flex; flex-direction: column; }
.pg-faq .qa {
  padding: 28px 0;
  border-top: 1px solid var(--mid);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 56px;
  align-items: baseline;
}
.pg-faq .qa:last-child { border-bottom: 1px solid var(--mid); }
.pg-faq .q {
  font: 500 18px/1.35 var(--font-body);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pg-faq .a {
  font: 400 16px/1.6 var(--font-body);
  color: var(--slate);
}

/* ===== Prompt examples (ask / result pairs) ===== */
.pg-prompts { display: flex; flex-direction: column; border-top: 1px solid var(--mid); margin-top: 24px; }
.pg-prompts .ex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--mid);
  align-items: start;
}
.pg-prompts .label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 10px;
}
.pg-prompts .ask .label { color: var(--ochre-deep); }
.pg-prompts .ask p {
  font: italic 400 18px/1.5 var(--font-display);
  color: var(--ink);
  text-wrap: pretty;
}
.pg-prompts .result p {
  font: 400 16px/1.6 var(--font-body);
  color: var(--slate);
}
.pg-block.linen .pg-prompts .ex { border-bottom-color: var(--sand); }

/* ===== Note callout (small inline aside) ===== */
.pg-note {
  border-left: 2px solid var(--ochre);
  background: var(--cream);
  padding: 20px 24px;
  margin-top: 24px;
  max-width: 760px;
}
.pg-block.linen .pg-note { background: var(--linen); }
.pg-note p {
  font: 400 15px/1.6 var(--font-body);
  color: var(--slate);
}
.pg-note strong { color: var(--ink); font-weight: 600; }

/* ===== Pill row / Compliance row ===== */
.pg-pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.pg-pillrow .pill {
  border: 1px solid var(--mid);
  border-radius: 6px;
  padding: 6px 12px;
  font: 500 13px var(--font-body);
  color: var(--ink);
  background: var(--cream);
}
.pg-block.ink .pg-pillrow .pill {
  background: rgba(242, 235, 220, 0.04);
  border-color: rgba(195, 184, 158, 0.32);
  color: var(--on-ink-2);
}

/* ===== Definitions grid (4-up) ===== */
.pg-defs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--mid);
  border: 1px solid var(--mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pg-defs.three { grid-template-columns: repeat(3, 1fr); }
.pg-defs.one   { grid-template-columns: 1fr; }
.pg-defs .def a {
  color: var(--ochre-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-defs .def {
  background: var(--cream);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}
.pg-block.linen .pg-defs .def { background: var(--linen); }
.pg-defs .def h3 {
  font: 400 24px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pg-defs .def p {
  font: 400 15px/1.55 var(--font-body);
  color: var(--slate);
  margin-top: 4px;
}

/* ===== Section eyebrow (large display number, used in privacy) ===== */
.pg-legal .pg-block { padding: 56px 0; }
.pg-legal .pg-block.no-num h2::before { content: none; }
.pg-legal h2 {
  font: 400 28px/1.25 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 0;
  max-width: none;
}
.pg-legal h2 .num {
  font: 400 14px/1 var(--font-mono);
  color: var(--ochre);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 14px;
}
.pg-legal .pg-body {
  font: 400 16px/1.7 var(--font-body);
  color: var(--slate);
  max-width: 720px;
  margin-top: 18px;
}
.pg-legal .pg-body.wide { max-width: 980px; }
.pg-legal .pg-body p + p { margin-top: 14px; }
.pg-legal .pg-body p + h3,
.pg-legal .pg-body div + h3 { margin-top: 24px; }
.pg-legal .pg-body h3 {
  font: 600 16px/1.4 var(--font-body);
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.pg-legal .pg-body strong { color: var(--ink); font-weight: 600; }
.pg-legal .pg-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.pg-legal .pg-body ul li {
  padding-left: 24px;
  position: relative;
}
.pg-legal .pg-body ul li::before {
  content: "—";
  color: var(--ochre);
  position: absolute;
  left: 0;
}

.pg-legal-banner {
  background: var(--ochre-wash);
  border: 1px solid var(--ochre);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 28px;
  max-width: 720px;
}
.pg-legal-banner .label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.pg-legal-banner p {
  font: 500 14px/1.6 var(--font-body);
  color: var(--ink);
  margin-top: 6px;
}

/* ===== Compact CTA section ===== */
.pg-cta {
  background: var(--ink);
  color: var(--on-ink);
  padding: 96px 0;
  text-align: center;
}
.pg-cta h2 {
  font: 300 48px/1.1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--on-ink);
  max-width: 760px;
  margin: 0 auto;
  text-wrap: balance;
}
.pg-cta h2 i { font-style: italic; color: var(--ochre-soft); }
.pg-cta p {
  font: 400 18px/1.55 var(--font-body);
  color: var(--on-ink-2);
  max-width: 560px;
  margin: 18px auto 0;
}
.pg-cta .row {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 36px; flex-wrap: wrap;
}
.pg-cta .ghost-on-ink {
  color: var(--on-ink) !important;
  border: 1px solid rgba(195, 184, 158, 0.32);
}
.pg-cta .ghost-on-ink:hover {
  background: rgba(242, 235, 220, 0.06);
}

/* ===== TOC for legal/security pages ===== */
.pg-toc {
  position: sticky;
  top: 88px;
  align-self: start;
}
.pg-toc h4 {
  font: 600 11px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 16px;
}
.pg-toc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pg-toc a {
  font: 500 14px var(--font-body);
  color: var(--slate);
  text-decoration: none;
  padding: 2px 0;
}
.pg-toc a:hover { color: var(--ink); }
.pg-toc a.active { color: var(--ochre); }

.pg-page-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
}

/* ===== Legal-page table ===== */
.pg-table-wrap {
  margin-top: 20px;
  border: 1px solid var(--mid);
  border-radius: var(--radius-md);
  background: var(--cream);
  overflow: hidden;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/1.55 var(--font-body);
  color: var(--ink);
}
.pg-table thead th {
  background: var(--linen);
  text-align: left;
  padding: 14px 16px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-2);
  border-bottom: 1px solid var(--mid);
  vertical-align: top;
}
.pg-table td {
  padding: 16px;
  border-top: 1px solid var(--mid);
  vertical-align: top;
  color: var(--slate);
}
.pg-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}
.pg-table td strong { color: var(--ink); font-weight: 600; }
.pg-table.compact td:first-child { width: 30%; }

/* ===== Glance list ===== */
.pg-glance {
  background: var(--linen);
  border: 1px solid var(--mid);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
}
.pg-glance .label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.pg-glance p {
  font: 400 16px/1.55 var(--font-body);
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.pg-glance p::before {
  content: "—";
  color: var(--ochre);
  position: absolute;
  left: 0;
  font-weight: 500;
}
.pg-glance p strong { font-weight: 600; }
.pg-glance a, .pg-legal a { color: var(--ochre-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pg-glance a:hover, .pg-legal a:hover { color: var(--ink); }

/* ===== Address block ===== */
.pg-address {
  font: 400 16px/1.7 var(--font-body);
  color: var(--ink);
}
.pg-address strong { font-weight: 600; }

/* ===== Definition row (Q/A-like, for retention etc.) ===== */
.pg-keyrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--mid);
  font: 400 15px/1.55 var(--font-body);
  color: var(--slate);
}
.pg-keyrow:last-child { border-bottom: 1px solid var(--mid); }
.pg-keyrow .k { font-weight: 600; color: var(--ink); }

/* ─── Mobile (≤768px) — inner pages ────────────────────────────────── */
@media (max-width: 768px) {
  /* Block padding 96px → 56px so the page isn't 95% vertical air */
  .pg-block       { padding: 56px 0; }
  .pg-block.tight { padding: 40px 0; }

  /* Stack every multi-column grid */
  .pg-stats .grid,
  .pg-2col,
  .pg-beforewith,
  .pg-defs,
  .pg-defs.three,
  .pg-prompts .ex {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  /* Key-row uses 200px label column; collapse to stacked on phones */
  .pg-keyrow { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }

  /* Hero typography */
  .pg-hero       { padding: 64px 0 48px; }
  .pg-hero h1    { font-size: clamp(32px, 8vw, 48px); line-height: 1.1; }

  /* h2 / h3 in pg-block — long policy headings overflow at desktop sizes */
  .pg-block h2   { font-size: clamp(26px, 6.5vw, 34px); line-height: 1.15; }
  .pg-block h3   { font-size: 19px; }

  /* Tables (Privacy data flows / international transfers): horizontal
     scroll instead of squishing into unreadable widths. The wrapper
     already has overflow: hidden — switch to auto + nowrap on cells. */
  .pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pg-table { min-width: 640px; font-size: 13px; }
  .pg-table thead th,
  .pg-table td { padding: 10px 12px; }
  .pg-table td:first-child { width: auto; }

  /* .stack tables (e.g. the vs-QuickBooks comparison) become one card per row
     on phones, so every column is visible without sideways scrolling. Each
     value cell prints its column header via data-label. Scoped to .stack so
     the dense Privacy tables keep the horizontal-scroll behaviour above. */
  .pg-table.stack { min-width: 0; font-size: 14px; }
  .pg-table.stack thead { display: none; }
  .pg-table.stack, .pg-table.stack tbody, .pg-table.stack tr, .pg-table.stack td { display: block; width: auto; }
  .pg-table.stack tr { border: 1px solid var(--mid); border-radius: 12px; padding: 4px 16px; margin-bottom: 12px; }
  .pg-table.stack td { border: 0; padding: 10px 0; }
  .pg-table.stack td:first-child { font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: 2px; }
  .pg-table.stack td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate-2);
    font-weight: 600;
    margin-bottom: 3px;
  }

  /* Definition rows (def title + body) tighter on phones */
  .pg-defs .def h3 { font-size: 19px; }

  /* CTA section padding */
  .pg-cta { padding: 56px 0; }
}

/* ─── Phone-only (≤480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pg-hero h1  { font-size: clamp(28px, 9vw, 38px); }
  .pg-block h2 { font-size: clamp(24px, 7vw, 30px); }
}

/* ===== Long-form prose inside a block =====================================
   A bare <p> child of PgBlock had no rule at all. It fell back to the browser
   default: 16px, no measure limit (so article copy ran the full 1116px
   container) and collapsed margins, which is why consecutive paragraphs butted
   straight into each other. Every other element in a block sets its own type;
   these article pages are the first to carry real body copy, so the gap only
   showed up now. Scoped to direct children of the block's content wrapper so
   it cannot reach paragraphs owned by pg-defs / pg-flist / pg-note / pg-faq. */
.pg-block > .container > div > p {
  font: 400 18px/1.7 var(--font-body);
  color: var(--slate);
  max-width: 680px;
  text-wrap: pretty;
}
.pg-block > .container > div > p + p { margin-top: 22px; }
.pg-block > .container > div > *:not(p) + p { margin-top: 32px; }
.pg-block > .container > div > p strong { color: var(--ink); font-weight: 600; }
.pg-block > .container > div > p em { font-style: italic; }
.pg-block.ink > .container > div > p { color: var(--on-ink-2); }
.pg-block.ink > .container > div > p strong { color: var(--on-ink); }

@media (max-width: 768px) {
  /* Keep the 680px measure: at 768px the container is still wider than a
     comfortable line, and below ~740px the container caps it anyway. */
  .pg-block > .container > div > p { font-size: 17px; }

  /* PgDefs draws its dividers as a 1px grid gap over a --mid background. The
     shared stacking rule above widens every grid gap to 24px, which turns
     those hairlines into thick tan bands. The 200px min-height that keeps a
     3-up row even also leaves a pool of dead air once cards are full width. */
  .pg-defs, .pg-defs.three, .pg-defs.one { gap: 1px; }
  .pg-defs .def { min-height: 0; padding: 24px 22px; }
}