/* Shared page system, laid out after openai.com: centred statement heroes,
   large square-cornered media, hairline section heads with a quiet link on
   the right, gradient card thumbnails, numbered rows, one gradient band,
   lots of air. Colours and type are the NXT4AP design kit (site.css
   variables, Poppins). Loaded on every page after site.css; prefix px-. */

.px { color: var(--nxt-midnight); }
.px-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.px-wrap-wide { max-width: 1440px; }
.px h1, .px h2, .px h3 { font-weight: 500; }
.px p { margin: 0 0 1em; }

/* ---------- Buttons: OpenAI's pill pair ---------- */
.px-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.px-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.px-btn-dark { background: var(--nxt-midnight); color: #fff; }
.px-btn-dark:hover { background: var(--nxt-cobalt); color: #fff; }
.px-btn-light { background: rgba(16, 22, 77, 0.05); color: var(--nxt-midnight); }
.px-btn-light:hover { background: rgba(16, 22, 77, 0.1); color: var(--nxt-midnight); }

/* A quiet text link with an arrow, as on OpenAI's "View more". */
.px-more { color: var(--nxt-midnight); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.px-more::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform 200ms var(--ease-out); }
.px-more:hover { color: var(--nxt-cobalt); }
.px-more:hover::after { transform: translateX(3px); }

.px-kicker { margin: 0 0 20px !important; font-size: 14px; font-weight: 500; color: var(--nxt-gray); }
.px-kicker-inverse { color: rgba(255, 255, 255, 0.7); }
.px-strong { font-weight: 500; color: var(--nxt-midnight); }

/* ---------- Hero ---------- */
.px-hero { text-align: center; padding: 24px 0 0; }
.px-hero h1 {
  font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.035em;
  color: var(--nxt-midnight); margin: 0 auto 20px; max-width: 14ch;
}
.px-hero-sub { max-width: 34ch; margin: 0 auto 32px !important; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--nxt-graphite); }
.px-hero-media { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; margin-top: 72px; }

.px-three { list-style: none; margin: 0; padding: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: left; }
.px-three li { font-size: 17px; line-height: 1.55; color: var(--nxt-midnight); }
.px-three span { display: block; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-default); font-size: 13px; font-weight: 500; color: var(--nxt-cobalt); letter-spacing: 0.04em; }

/* One calm headline scale by length (site.js marks .px-mid 17-42 characters,
   .px-long longer): short titles 48px max, medium 40px, sentences 32px. */
.px-hero h1.px-mid { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.03em; max-width: 24ch; }
.px-hero h1.px-long { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.02em; max-width: 34ch; }

/* ---------- Sections and their heads ---------- */
.px-section { padding: 128px 0 0; }
.px-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--border-subtle);
}
.px-head h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.px-head-note { margin: 0 !important; font-size: 15px; color: var(--nxt-gray); text-align: right; max-width: 46ch; }
.px-head-gap { margin-top: 112px; }
.px-big { font-size: clamp(19px, 1.7vw, 22px); font-weight: 400 !important; line-height: 1.45; letter-spacing: -0.01em; max-width: 52ch; margin-bottom: 40px !important; }

/* Featured story: big image, big words. */
.px-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.px-feature > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.px-feature-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.px-feature-wide > img { aspect-ratio: 4 / 3; }
.px-feature-body h2 { font-size: clamp(25px, 2.48vw, 33px); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 20px; }
.px-feature-body > p { font-size: 17px; color: var(--nxt-graphite); }
.px-feature-body > .px-statement { font-size: clamp(22px, 2.29vw, 30px); line-height: 1.3; letter-spacing: -0.025em; color: var(--nxt-midnight); margin-bottom: 40px !important; }
.px-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.px-tags li { padding: 8px 16px; border-radius: 999px; background: var(--nxt-ink-50); font-size: 14px; color: var(--nxt-midnight); }
.px-lines li { padding: 16px 0; border-top: 1px solid var(--border-subtle); font-size: 16px; color: var(--nxt-graphite); }
.px-lines li:last-child { border-bottom: 1px solid var(--border-subtle); }

/* Logos on soft squares. */
.px-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.px-logos li { background: var(--nxt-ink-50); aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 12px 20px; }
.px-logos img { width: 100%; mix-blend-mode: multiply; }

/* NXT AP intro in two columns. */
.px-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 920px; font-size: 17px; line-height: 1.65; color: var(--nxt-graphite); }

/* Module cards with gradient thumbnails, like OpenAI's story cards. */
.px-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.px-cards h3 { font-size: 17px; letter-spacing: -0.01em; margin: 18px 0 8px; }
.px-cards p { font-size: 14px; line-height: 1.6; color: var(--nxt-graphite); }
.px-card-meta { color: var(--nxt-gray) !important; margin-bottom: 6px !important; }
.px-thumb {
  aspect-ratio: 1; display: flex; align-items: flex-end; padding: 18px; overflow: hidden;
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  transition: transform 400ms var(--ease-out);
}
.px-cards li:hover .px-thumb { transform: scale(0.98); }
.px-thumb-1 { background: radial-gradient(120% 100% at 15% 10%, #4A3EF0 0%, #2027E1 35%, #10164D 100%); }
.px-thumb-2 { background: radial-gradient(120% 100% at 85% 15%, #2027E1 0%, #0C056D 50%, #10164D 100%); }
.px-thumb-3 { background: radial-gradient(130% 110% at 50% 100%, #4A3EF0 0%, #0C056D 55%, #10164D 100%); }
.px-thumb-4 { background: radial-gradient(120% 100% at 10% 90%, #2027E1 0%, #4A3EF0 30%, #10164D 100%); }
.px-thumb-5 { background: var(--nxt-ink-50); color: var(--nxt-midnight); }
.px-fine { margin-top: 40px !important; font-size: 12px; line-height: 1.6; color: var(--nxt-gray); max-width: 900px; }

/* Market numbers. */
.px-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 0 0 56px; }
.px-stats dt { font-size: clamp(37px, 4.67vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--nxt-cobalt); }
.px-stats dd { margin: 14px 0 0; font-size: 16px; color: var(--nxt-gray); }
.px-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; font-size: 16px; line-height: 1.65; color: var(--nxt-graphite); }
.px-split h3, .px-why h3, .px-grid h3 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--nxt-midnight); }

/* Three and six column text grids. */
.px-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.px-why, .px-grid { font-size: 15px; line-height: 1.65; color: var(--nxt-graphite); }
.px-why li { position: relative; padding-left: 18px; margin-bottom: 10px; }
.px-why li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--nxt-cobalt); }
.px-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
.px-grid article { padding-top: 20px; border-top: 1px solid var(--border-default); }

/* Licensing: one dark band in the brand gradient. */
.px-band { margin-top: 128px; padding: 112px 0; background: var(--nxt-gradient); color: #fff; }
.px-band h2 { color: #fff; }
/* A band that ends the page keeps white space below it, so it never runs
   into the dark footer. */
.px > .px-band:last-child { margin-bottom: 128px; }
.px-band-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 16px 0 48px; }
.px-band-facts li { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: 17px; color: rgba(255, 255, 255, 0.82); }
.px-band-facts strong { display: block; font-size: clamp(25px, 2.48vw, 33px); font-weight: 500; letter-spacing: -0.03em; color: #fff; margin-bottom: 4px; }
.px-band-copy { max-width: 60ch; font-size: 15px; color: rgba(255, 255, 255, 0.72); margin: 0 !important; }

/* Closing call. */
.px-close { padding: 160px 0 120px; text-align: center; }
.px-close h2 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -0.035em; max-width: 24ch; margin: 0 auto 36px; }

/* Successor note, quiet. */
.px-note { padding: 48px 0 96px; }
.px-note-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 40px; border-top: 1px solid var(--border-subtle); }
.px-note img { width: 120px; mix-blend-mode: multiply; }
.px-note p { font-size: 14px; line-height: 1.65; color: var(--nxt-gray); max-width: 80ch; }

/* ---------- Extras for other pages ---------- */
/* Product lockup above a hero headline. */
.px-lockup { display: block; height: 40px; width: auto; margin: 0 auto 28px; }
/* Hero without a photo: more air below. */
.px-hero-plain { padding-bottom: 24px; }
/* Long-form text (articles, legal): one readable column, OpenAI's article measure. */
.px-prose { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--nxt-graphite); }
.px-prose h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; margin: 56px 0 16px; }
.px-prose h3 { font-size: 19px; margin: 36px 0 10px; }
.px-prose ul, .px-prose ol { list-style: disc; padding-left: 1.3em; margin: 0 0 1.2em; }
.px-prose ol { list-style: decimal; }
.px-prose li { margin-bottom: 6px; }
.px-prose a { color: var(--nxt-cobalt); }
.px-prose img { margin: 32px 0; }
/* Small grey meta line (dates, "last updated"). */
.px-meta { font-size: 14px; color: var(--nxt-gray); margin: 0 0 32px !important; }

/* ---------- Type: brand headlines, calm text (Pooja, 2026-10-20) ----------
   Poppins throughout (Pooja tried Noto Sans for running text on
   2026-10-20 and preferred Poppins). Running text is a soft slate (Midnight toward white); headings stay
   Midnight, all at medium weight (500), never bold; roomy line spacing. */
:root { --px-slate: color-mix(in srgb, var(--nxt-midnight) 70%, #fff); --px-text-font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* :where() keeps these at zero specificity, so a page's own colour or face
   for a specific element (white text on a dark tile, a display line) wins. */
:where(.px, .ct) :where(p, li, td, th, dd, figcaption, blockquote, small, label),
:where(.px, .ct) :where(.px-kicker, .px-head-note, .px-fine, .px-tags li, .px-meta) {
  font-family: var(--px-text-font);
}
:where(.px, .ct) :where(p, li, td, dd, figcaption, blockquote) {
  color: var(--px-slate);
  line-height: 1.75;
}
/* Poppins is wide: running text one notch down so it stays quiet. */
body .px :is(p, li, td, dd):not(:is(.px-statement, .px-big, .px-hero-sub, .px-band-copy, .ap-values li, .ap-statement, .ap-steps li, .ap-lead, .co-region-name, .co-doc-brand, .co-band-line, .pay-outcome-title, .pay-band-copy, .jb-statement, .co-article-lead, .co-doc-lead, .vid-lead, .edge-steps li, .cu-pull, .cu-pull p, .cu-quotes blockquote p, .px-band *, .px-btn, .px-thumb *)) {
  font-size: min(1em, 15.5px);
}
:where(.px-band, .px-band *) { color: inherit; }
:is(.px, .ct) :is(h1, h2, h3, h4, h5, h6), :is(.px, .ct) :is(h1, h2, h3, h4, h5, h6) strong { font-weight: 500 !important; }
:where(.px, .ct) :where(h1, h2, h3, h4, h5, h6) { color: var(--nxt-midnight); font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
/* Running text never above 17px; bigger lines are display lines (Poppins). */
body .px .ap-agentic p { font-size: 17px; }
:where(.px, .ct) :where(p, li) strong { font-weight: 500; color: var(--nxt-midnight); }
:where(.px) :where(.px-kicker, .px-head-note, .px-fine, .px-meta) { color: var(--nxt-gray); }
/* Display lines stay Poppins: headlines in all but tag. */
.px :is(.px-statement, .px-big, .px-hero-sub, .px-stats dt, .px-band-facts strong, .px-three span,
  .ap-values li, .ap-statement, .ap-steps li, .ap-lead, .co-region-name, .co-doc-brand, .co-band-line,
  .pay-outcome-title, .pay-band-copy, .jb-statement, .co-article-lead, .edge-steps li, .cu-pull, .cu-pull p, .cu-quotes blockquote p),
.ct .ct-sub {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}
.px :is(.px-statement, .px-big):not(.px-band *) { color: var(--nxt-midnight); line-height: 1.3; }
/* One scale for page-specific text roles (pages name them -title, -lead,
   -name), so every page reads the same:
   - card / item titles: Poppins 500, 18px, Midnight
   - display leads and statements: Poppins 400, 18-20px, Midnight
   - section leads under a heading: Noto Sans, 16px, slate
   (body .px … beats the page sheets, which load later at equal weight.) */
body .px :is(.co-news-title, .cr-job-title, .pay-outcome-title) {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--nxt-midnight);
}
body .px :is(.ap-lead, .co-article-lead, .co-doc-lead, .vid-lead, .ap-values li, .ap-statement, .jb-statement) {
  font-size: clamp(18px, 1.5vw, 20px); line-height: 1.45; letter-spacing: -0.01em;
}
body .px .co-region-name { font-size: clamp(19px, 1.7vw, 22px); }
body .px :is(.co-lead, .ap-hero-lead, .edge-hero-lead, .enet-lead, .inx-lead, .jb-lead, .pay-lead) { font-size: 16px; }
/* Small headings, nudged down. */
.px .px-head h2 { font-size: 22px; }
.px :is(.px-grid, .px-why, .px-split, .px-cols) h3 { font-size: 17px; }
.px .px-cards h3 { font-size: 16px; }

/* ---------- Motion (driven by site.js; only with html.px-motion) ---------- */
/* Headline words rise from behind a mask; kicker, sub and buttons follow. */
.px-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.px-motion .px-w > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); }
.px-motion.px-in .px-w > span { transform: none; }
.px-motion .px-hero .px-kicker, .px-motion .px-hero .px-lockup, .px-motion .px-hero-sub, .px-motion .px-hero .px-actions, .px-motion .px-hero .px-meta {
  opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.px-motion .px-hero .px-kicker, .px-motion .px-hero .px-lockup { transition-delay: 0ms; }
.px-motion .px-hero-sub, .px-motion .px-hero .px-meta { transition-delay: 450ms; }
.px-motion .px-hero .px-actions { transition-delay: 600ms; }
.px-motion.px-in .px-hero .px-kicker, .px-motion.px-in .px-hero .px-lockup, .px-motion.px-in .px-hero-sub,
.px-motion.px-in .px-hero .px-actions, .px-motion.px-in .px-hero .px-meta { opacity: 1; transform: none; }

/* Blocks fade up as they scroll in. */
.px-motion .px-r { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.px-motion .px-r.px-on { opacity: 1; transform: none; }
/* Headlines never fade: they are always readable, even where a block can't
   scroll far enough to trigger the reveal (Pooja, 2026-10-21). */
.px-motion :is(h1, h2, h3, h4, .px-head, .px-big, .px-statement).px-r,
.px-motion .px-r :is(h1, h2, h3, h4) { opacity: 1 !important; }
.px-motion :is(h1, h2, h3, h4, .px-big, .px-statement).px-r { transform: none !important; }
.px-motion .px-feature > img.px-r { transition: opacity 900ms var(--ease-out), transform 120ms linear; }
.px-motion .px-hero-media.px-r { transform: none; transition: opacity 1200ms var(--ease-out); }
.px-hero-media { will-change: clip-path; }

/* Section hairlines draw from the left. */
.px-motion .px-head.px-r { transform: none; border-bottom-color: transparent;
  background: linear-gradient(var(--border-default), var(--border-default)) left bottom / 0% 1px no-repeat;
  transition: opacity 700ms var(--ease-out), background-size 1200ms var(--ease-out); }
.px-motion .px-head.px-r.px-on { background-size: 100% 1px; }

/* Gradients breathe slowly. */
.px-thumb-1, .px-thumb-2, .px-thumb-3, .px-thumb-4, .px-band { background-size: 160% 160%; animation: px-drift 14s ease-in-out infinite alternate; }
.px-thumb-2 { animation-duration: 17s; animation-delay: -4s; }
.px-thumb-3 { animation-duration: 15s; animation-delay: -8s; }
.px-thumb-4 { animation-duration: 19s; animation-delay: -2s; }
.px-band { animation-duration: 22s; }
@keyframes px-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.px-cards li:hover .px-thumb { animation-duration: 4s; }

/* Small hover life. */
.px-logos li { transition: background-color 300ms var(--ease-out), transform 300ms var(--ease-out); }
.px-logos li:hover { background: var(--nxt-ink-100); transform: translateY(-3px); }
.px-btn { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.px-btn:hover { transform: translateY(-1px); }
.px-btn:active { transform: scale(0.98); }
.px-cards li h3 { transition: color 200ms var(--ease-out); }
.px-cards li:hover h3 { color: var(--nxt-cobalt); }

/* ---------- Living field (assets/px-field.js, WebGL) ---------- */
.px-hero.has-field, .px-band.has-field { position: relative; isolation: isolate; }
.px-field { position: absolute; left: 0; width: 100%; z-index: -1; display: block; pointer-events: none; opacity: 0; transition: opacity 1600ms var(--ease-out); }
.px-field.is-on { opacity: 1; }
/* Sized to the hero itself (plus the space above it), never taller: a fixed
   height spilled over the content below short heroes and hid it. */
.px-hero .px-field { top: -150px; height: calc(100% + 150px); }
.px-band .px-field { top: 0; height: 100%; }
.px-band.has-field { animation: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1020px) {
  .px-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .px-band-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-feature, .px-feature-wide { gap: 40px; }
}
@media (max-width: 720px) {
  .px-hero .px-field { top: -24px; height: calc(100% + 24px); }
  .px-section { padding-top: 88px; }
  .px-hero-media { aspect-ratio: 4 / 3; margin-top: 48px; }
  .px-three, .px-why, .px-grid, .px-cols, .px-split, .px-stats { grid-template-columns: 1fr; gap: 32px; }
  .px-feature, .px-feature-wide { grid-template-columns: 1fr; }
  .px-feature > img { aspect-ratio: 4 / 3; }
  .px-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .px-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .px-head-note { text-align: left; }
  .px-head-gap { margin-top: 80px; }
  .px-band { margin-top: 88px; padding: 80px 0; }
  .px > .px-band:last-child { margin-bottom: 88px; }
  .px-close { padding: 112px 0 88px; }
  .px-note-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .px-thumb, .px-more::after, .px-btn, .px-logos li { transition: none; }
  .px-thumb-1, .px-thumb-2, .px-thumb-3, .px-thumb-4, .px-band { animation: none; }
}

/* ======================================================================
   TYPE SYSTEM — the single source of truth for every inner page
   (Pooja, 2026-10-21: "100% cohesive"). Seven roles, nothing else:
     H1 page headline   48 / 40 / 32px by length (.px-mid / .px-long), 500
     H2 section title   28px, 500, 1.25
     H3 item title      18px, 500, 1.35   (card titles that are h2 too)
     Statement / quote  24px, 400, 1.4
     Lead / intro       20px, 400, 1.5
     Body               16px, 400, 1.7
     Small              14px, 1.6         (kickers, dates, captions, fine print)
   Display numbers (.px-count, band facts) are the only exception.
   `body .px …` + !important so no page sheet can drift from it.
   ====================================================================== */
body .px, body .ct { --t-body: 16px; }

/* H1 */
body :is(.px, .ct) h1 { font-weight: 500 !important; }
body .px h1:not(.px-mid):not(.px-long), body .ct h1 {
  font-size: clamp(32px, 3.8vw, 48px) !important; line-height: 1.1 !important; letter-spacing: -0.03em !important;
}
body .px h1.px-mid { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; }
body .px h1.px-long { font-size: clamp(26px, 2.4vw, 32px) !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; }

/* H2: section titles */
body .px h2:not(.vid-title):not(.jb-aside-title):not(.legal-toc-title):not(.lg-toc-title) {
  font-size: clamp(22px, 2vw, 28px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important;
}

/* H3: item / card titles (and small titles marked up as h2 or p) */
body .px :is(h3, h4, .vid-title, .jb-aside-title, .legal-toc-title, .lg-toc-title, .pay-outcome-title, .co-news-title, .cr-job-title, .co-region-name) {
  font-size: 18px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: -0.01em !important;
}

/* Statement / quote */
body .px :is(.px-statement, blockquote, blockquote p, .cu-pull, .cu-pull p) {
  font-size: clamp(20px, 1.9vw, 24px) !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: -0.01em !important;
}

/* Lead / intro */
body :is(.px, .ct) :is(.px-hero-sub, p.px-big, .ap-lead, .ap-statement, .ap-values li, .ap-steps li, .edge-steps li,
  .co-article-lead, .co-doc-lead, .co-band-line, .vid-lead, .jb-statement, .cr-statement, .pay-band-copy, .ct-sub) {
  font-size: clamp(18px, 1.6vw, 20px) !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important;
}

/* Body */
body :is(.px, .ct, .ct-follow-row) :is(p, li, td, dd, figcaption):not(:is(.px-hero-sub, p.px-big, .px-statement, .ap-lead, .ap-statement,
  .ap-values li, .ap-steps li, .edge-steps li, .co-article-lead, .co-doc-lead, .co-band-line, .vid-lead, .jb-statement,
  .cr-statement, .pay-band-copy, .ct-sub, .pay-outcome-title, .co-news-title, .cr-job-title, .co-region-name,
  .px-kicker, .px-fine, .px-meta, .px-head-note, .px-tags li, .cu-cite, .co-label, .wp-action, .ct-office-name, .eyebrow,
  .px-thumb *, .px-btn, .px-count, blockquote p, .cu-pull p)) {
  font-size: 16px !important; line-height: 1.7 !important; letter-spacing: 0 !important;
}
body :is(.px, .ct) :is(p, li) strong { font-weight: 500; }

/* Small */
body :is(.px, .ct) :is(.px-kicker, .px-head-note, .px-tags li, .co-label, .eyebrow, .ct-office-name) {
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.6 !important; letter-spacing: 0 !important; text-transform: none !important;
}
body :is(.px, .ct) :is(.px-fine, .px-meta, .cu-cite, .cu-cite span, .wp-action, time, small, .legal td, .lg-body td) {
  font-size: 14px !important; line-height: 1.6 !important; letter-spacing: 0 !important;
}
body .px .px-fine { font-size: 13px !important; }

/* Display numbers keep their size. */
body .px :is(.px-stats dt, .px-band-facts strong) { line-height: 1 !important; }

/* Consistent spacing: headings sit close to the text they introduce. */
body .px :is(h2, h3) + :is(p, ul, ol) { margin-top: 0; }
body .px :is(p, ul, ol) { margin-bottom: 1em; }

/* ---------- Phone rhythm (≤720px) ----------
   Tighter, even spacing so pages don't feel like desktop pages squeezed
   onto a phone; one hairline per break, never two. */
@media (max-width: 720px) {
  body .px .px-section { padding-top: 56px !important; }
  body .px .px-hero { padding-top: 8px; }
  body .px .px-hero-media { margin-top: 32px !important; }
  body .px .px-three { padding-top: 32px; gap: 24px !important; }
  body .px .px-head { margin-bottom: 20px !important; padding-bottom: 14px !important; }
  body .px .px-head-gap { margin-top: 48px !important; }
  body .px .px-band { margin-top: 56px !important; padding: 56px 0 !important; }
  body .px > .px-band:last-child { margin-bottom: 56px !important; }
  body .px .px-close { padding: 72px 0 56px !important; }
  body .px .px-note { padding: 32px 0 56px !important; }
  body .px :is(.px-grid, .px-why, .px-split, .px-cols, .px-stats) { gap: 28px !important; }
  body .px .px-cards { gap: 28px 14px !important; }
  body .px .px-feature { gap: 24px !important; }
  body .px .px-big { margin-bottom: 20px !important; }
  body .px h2 + p, body .px h3 + p { margin-top: 0; }
  body .px .px-actions { gap: 10px; }
  body .px .px-actions .px-btn { min-height: 48px; }
}
/* One hairline per break: a list or grid right under a titled head drops its
   own first top line. */
body .px .px-head + :is(ul, ol) > :first-child { border-top: 0 !important; padding-top: 4px; }
@media (max-width: 720px) {
  body .px .px-head + :is(.px-grid, .px-why, .px-three, div) > :first-child { border-top: 0 !important; padding-top: 0; }
}