/* APXCG Capital Group — Public Website Structural Styles */
/* All values resolve through spec/design/generated/theme-vars.css custom properties */
/* No hardcoded hex/px values here — every visual decision via tokens. */

/* ===================================================================
   Fonts
   =================================================================== */

@font-face {
  font-family: Spectral;
  font-style: normal;
  font-weight: 300;
  src: url('/assets/prime_web/fonts/Spectral-Light.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: Spectral;
  font-style: normal;
  font-weight: 400;
  src: url('/assets/prime_web/fonts/Spectral-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: Chivo;
  font-style: normal;
  font-weight: 400;
  src: url('/assets/prime_web/fonts/Chivo-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: Chivo;
  font-style: normal;
  font-weight: 500;
  src: url('/assets/prime_web/fonts/Chivo-Medium.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/prime_web/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/prime_web/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-display: swap;
}

/* ===================================================================
   Reset & base
   =================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-ink-deep);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
}

/* ===================================================================
   Site wrapper — fixed 1440px per design
   =================================================================== */

.site-wrapper {
  max-width: var(--width-full);
  margin: 0 auto;
}

/* ===================================================================
   Navigation bar
   =================================================================== */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--spacing-site-gutter, 56px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-ink-deep);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-big, 48px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 24px);
  font-size: var(--text-sm, 13px);
}

.nav-links a {
  padding: var(--spacing-xs, 8px) 0;
  color: var(--color-text-muted, #A9B8C4);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--color-text, #E9EEF4);
}

.nav-links a.active {
  color: var(--color-accent, #EFC552);
  font-weight: 500;
}

/* ===================================================================
   Footer
   =================================================================== */

.footer {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.footer-top {
  display: flex;
  gap: var(--spacing-huge);
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 280px;
}

.footer-brand p {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-dim);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  gap: var(--spacing-lg);
  font-size: var(--text-sm);
  line-height: var(--line-height-link);
  color: var(--color-text-tertiary);
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
  margin-bottom: var(--spacing-xs);
}

.footer-col a {
  display: block;
  color: var(--color-text-tertiary);
}

.footer-col a:hover {
  color: var(--color-text);
}

.footer-risk {
  font-size: var(--text-xs);
  line-height: var(--line-height-sm);
  color: var(--color-text-faint);
  text-wrap: pretty;
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-registration {
  font-size: var(--text-xs);
  line-height: var(--line-height-sm);
  color: var(--color-text-faint);
  text-wrap: pretty;
}

/* ===================================================================
   Page content
   =================================================================== */

.page-content {
  min-height: 60vh;
}

/* ===================================================================
   Logo variants
   =================================================================== */

.logo {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.logo:hover {
  text-decoration: none;
}

.logo-accent-bar {
  width: var(--logo-bar-width);
  background: var(--color-accent);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  align-items: stretch;
  width: fit-content;
}

.logo-main {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text);
}

.logo-main .letter {
  display: inline;
}

.logo-sub {
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Size: nav (default) */
.logo-nav .logo-accent-bar {
  width: 4px;
}

.logo-nav .logo-main {
  font-size: 36px;
  line-height: 0.98;
}

.logo-nav .logo-sub {
  font-size: 7.6px;
}

/* Size: footer */
.logo-footer .logo-accent-bar {
  width: 3px;
}

.logo-footer .logo-main {
  font-size: 30px;
  line-height: 0.98;
}

.logo-footer .logo-sub {
  font-size: 6.3px;
}

/* ===================================================================
    Macro-driven component styles (AC-4: all values via tokens)
    All structural constants (gap: 1px, border-width: thin)
    are defined here and referenced in macros via var().
    =================================================================== */

/* Hairline grid — spec/design/spec.md §6: background:border-color + gap: 1px */
.apx-grid {
  display: grid;
  background: var(--color-border);
  gap: var(--apx-hairline-gap);
}

.apx-grid-tile {
  background: var(--color-surface);
}

.apx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.apx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.apx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.apx-grid-6 { grid-template-columns: repeat(6, 1fr); }

.apx-grid-header {
  display: grid;
  background: var(--color-ink);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

/* KPI strip tiles — label + value + sub */
.apx-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--apx-kpi-tile-gap);
  padding: var(--apx-kpi-tile-pad);
}

.apx-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--apx-kpi-label-size);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.apx-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--apx-kpi-value-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.apx-kpi-value--accent { color: var(--color-accent); }
.apx-kpi-value--positive { color: var(--color-positive); }
.apx-kpi-value--negative { color: var(--color-negative); }
.apx-kpi-value--flat { color: var(--color-flat); }

.apx-kpi-sub {
  font-family: var(--font-mono);
  font-size: var(--apx-kpi-sub-size);
  color: var(--color-flat);
}

/* Data table — hairline-grid rows with border-top dividers */
.apx-data-table {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.apx-data-table__title {
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.apx-data-table__header {
  display: grid;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.apx-data-table__row {
  display: grid;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-sm);
  background: var(--color-ink);
  font-size: var(--text-sm);
  border-top: var(--apx-table-divider) solid var(--color-border);
}

/* Section head — eyebrow + heading + body */
.apx-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--apx-section-head-gap);
  max-width: var(--width-wide);
}

.apx-section-head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--apx-section-head-eyebrow-size);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

.apx-section-head__heading {
  font-family: var(--font-display);
  font-size: var(--apx-section-head-heading-size);
  font-weight: 300;
  line-height: var(--line-height-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.apx-section-head__body {
  font-size: var(--apx-section-head-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  max-width: var(--width-narrow);
  text-wrap: pretty;
}

/* CTA band — gold accent bar + heading + buttons */
.apx-cta-band {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
}

.apx-cta-band__inner {
  display: flex;
  gap: var(--spacing-md);
}

.apx-cta-band__accent {
  width: var(--apx-cta-bar-width);
  background: var(--color-accent);
  flex-shrink: 0;
}

.apx-cta-band__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.apx-cta-band__heading {
  font-family: var(--font-display);
  font-size: var(--apx-cta-heading-size);
  font-weight: 300;
  line-height: var(--line-height-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.apx-cta-band__body {
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  max-width: var(--width-narrow);
  text-wrap: pretty;
}

.apx-cta-band__actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.apx-cta-band__btn {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--apx-cta-btn-pad);
  cursor: pointer;
}

.apx-cta-band__btn--primary {
  background: var(--color-accent);
  color: var(--color-ink);
}

.apx-cta-band__btn--primary:hover {
  background: var(--color-accent-hover);
}

.apx-cta-band__btn--secondary {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  background: transparent;
}

.apx-cta-band__btn--secondary:hover {
  border-color: var(--color-text-muted);
}

/* ===================================================================
    Custom tokens for macro-driven components
    Structural constants not in spec/design tokens.
    =================================================================== */

:root {
   /* Hairline grid gap: 1px — structural constant per spec §6. */
   --apx-hairline-gap: 1px;

   /* Semantic color aliases */
   --color-text-muted: var(--color-text-2, #A9B8C4);
   --color-text-secondary: var(--color-text-2, #A9B8C4);
   --color-text-tertiary: var(--color-text-3, #93A2B2);
   --color-border-strong: var(--color-border-2, #1B2A3B);
   --color-border-interactive: var(--color-border-3, #22344A);
   --color-border-hover: var(--color-border-3, #22344A);
   --color-surface-raised: var(--color-raised, #101C29);
   --color-accent-label: var(--color-gold-label, #241A05);
   --color-accent-ink: #4A3A0F;
   --font-mono: var(--font-mono-label, 'IBM Plex Mono', monospace);
   --font-serif: var(--font-display, 'Spectral', Georgia, serif);

   /* Typography sizes */
   --text-xs: 11px;
   --text-sm: 13px;
   --text-base: 14px;
   --text-md: 16px;
   --text-lg: 18px;
   --text-xl: 20px;
   --text-xl-plus: 26px;
   --text-2xl: 24px;
   --text-3xl: 32px;

   /* KPI strip sizing. */
   --apx-kpi-tile-pad: 24px;
   --apx-kpi-tile-gap: var(--spacing-xxs);
   --apx-kpi-label-size: var(--text-xs);
   --apx-kpi-value-size: var(--text-2xl);
   --apx-kpi-sub-size: var(--text-xs);

   /* Data table border width. */
   --apx-table-divider: thin;

   /* Section head sizing. */
   --apx-section-head-gap: var(--spacing-sm);
   --apx-section-head-eyebrow-size: var(--text-sm);
   --apx-section-head-heading-size: var(--text-2xl);
   --apx-section-head-body-size: var(--text-base);

   /* CTA band sizing. */
   --apx-cta-bar-width: var(--spacing-xxs);
   --apx-cta-btn-pad: var(--spacing-md) var(--spacing-xl);
   --apx-cta-heading-size: var(--text-2xl);

   /* Line-height tokens (not in spec/design tokens). */
   --line-height-sm: 1.4;
   --line-height-md: 1.2;
   --line-height-body: 1.6;
   --line-height-lg: 1.02;
   --line-height-link: 1.5;

   /* Width tokens (not in spec/design tokens). */
   --width-full: 1440px;
   --width-narrow: 540px;
   --width-wide: 720px;

   /* Spacing tokens (not in spec/design tokens). */
   --spacing-xxs: 4px;
   --spacing-xs: 8px;
   --spacing-sm: 12px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 56px;
   --spacing-big: 48px;
   --spacing-mid: 20px;
   --spacing-huge: 80px;

   /* Letter-spacing tokens. */
   --tracking-wide: 0.1em;
   --tracking-tight: -0.02em;

    /* Additional spacing for page layouts. */
     --spacing-photo: 340px;
     --spacing-sidebar: 440px;
     --spacing-sidebar-alt: 420px;
     --spacing-sidebar-reg: 320px;

    /* Sub-pixel spacing for fine-grained layouts (not in core tokens). */
     --spacing-3xs: 4px;
     --spacing-4: 32px;

    /* Additional text sizes not in core tokens. */
    --text-md: 16px;
    --text-xl-plus: 26px;

    /* Additional spacing for home page sections. */
    --spacing-xl-plus: 76px;
    --spacing-xxl: 60px;
    --spacing-hero-img: 420px;
    --spacing-platform-img-w: 620px;
    --spacing-platform-img-h: 400px;
}

/* ===================================================================
     About-cluster page layouts (AC-3: section order matches design)
     Dark theme: about-us, careers
     Light theme: regulation, legal-documents
     =================================================================== */

/* Page top border accent */
.page-accent-bar {
  border-top: var(--spacing-xxs) solid var(--color-ink-deep);
}

/* Sub-navigation tabs (underline style) */
.page-sub-nav {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-xl) 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.page-sub-nav__tab {
  padding-bottom: var(--spacing-md);
}

.page-sub-nav__tab--active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: calc(var(--spacing-md) - 2px);
}

/* Dark page content wrapper */
.page-dark {
  padding: var(--spacing-big) var(--spacing-xl) 0;
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
}

.page-dark--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-dark--sidebar {
  width: 420px;
}

/* Hero eyebrow (uppercase mono label) */
.page-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Hero heading (display serif) */
.page-hero-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-display);
  line-height: var(--line-height-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Hero body copy */
.page-hero-body {
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  max-width: var(--width-narrow);
  text-wrap: pretty;
}

/* Light page content wrapper */
.page-light {
  background: var(--color-light-bg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

/* Light-themed hero eyebrow */
.page-light .page-hero-eyebrow {
  color: var(--color-accent-ink);
}

/* Light-themed hero heading */
.page-light .page-hero-heading {
  color: var(--color-light-text);
}

/* Light-themed hero body */
.page-light .page-hero-body {
  color: var(--color-light-text-secondary);
}

/* Split layout (content + sidebar) */
.page-split {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-end;
}

.page-split__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-split__sidebar {
  width: 320px;
}

/* Info card (light theme) */
.page-info-card {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-info-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.page-info-card__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--line-height-md);
  color: var(--color-light-text);
}

.page-info-card__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-light-text-tertiary);
}

/* Regulation/compliance grid */
.page-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-3);
}

.page-compliance-card {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-compliance-card__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-ink);
}

.page-compliance-card__heading {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-light-text);
}

.page-compliance-card__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-light-text-tertiary);
}

/* Timeline rows (dark theme, hairline grid) */
.page-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-timeline__row {
  background: var(--color-surface);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  gap: var(--spacing-lg);
  align-items: baseline;
}

.page-timeline__year {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  width: 44px;
  flex-shrink: 0;
}

.page-timeline__text {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

/* Office list rows (dark theme, hairline grid) */
.page-office-list {
  display: flex;
  flex-direction: column;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-office-row {
  background: var(--color-surface);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-office-row__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.page-office-row__address {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
}

/* Leaders grid (dark theme, hairline grid) */
.page-leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-leader-card {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.page-leader-photo {
  height: 190px;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-xs);
}

.page-leader-photo__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.page-leader-info {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-leader-info__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.page-leader-info__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Benefits list (dark theme, hairline grid) */
.page-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-benefit-row {
  background: var(--color-surface);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.page-benefit-row__label {
  color: var(--color-text-muted);
}

.page-benefit-row__value {
  color: var(--color-text);
}

/* Open roles table */
.page-roles-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.page-roles-table__header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.page-roles-table__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.page-roles-table__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.page-roles-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.page-roles-table__role {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.page-roles-table__dept {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.page-roles-table__location {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.page-roles-table__apply {
  color: var(--color-accent);
  font-size: var(--text-sm);
  text-align: right;
}

/* Light table (regulation / legal documents) */
.page-light-table {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
}

.page-light-table__header {
  display: grid;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-light-head);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-light-table__row {
  display: grid;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-light-border-subtle);
}

.page-light-table__cell {
  font-size: var(--text-sm);
  color: var(--color-light-text);
}

.page-light-table__cell--mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-light-text-tertiary);
}

.page-light-table__cell--accent {
  color: var(--color-accent-ink);
}

.page-light-table__cell--link {
  text-align: right;
}

.page-light-table__footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--color-light-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Legal / compliance note */
.page-note {
  font-size: var(--text-xs);
  line-height: var(--line-height-body);
  color: var(--color-light-text-tertiary);
  text-wrap: pretty;
}

/* Page text (dark theme) */
.page-text-muted {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  max-width: var(--width-narrow);
  text-wrap: pretty;
}

.page-text-body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
}

/* Page content bottom padding */
.page-content-section {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.page-content-section--bottom {
  padding: 0 var(--spacing-xl) var(--spacing-5);
}

/* Photo placeholder */
.photo-placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-raised) 0 var(--spacing-1),
    var(--color-surface) var(--spacing-1) var(--spacing-2)
  );
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-xs);
}

.photo-placeholder__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* CTA / action buttons */
.page-btn-outline {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
}

.page-btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--spacing-md) 0;
  text-align: center;
  cursor: pointer;
}

.page-btn-link {
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.page-btn-text {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
}

/* Additional page heading sizes. */
.page-heading-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl-plus);
  color: var(--color-text);
}

/* Photo placeholder tall variant. */
.page-photo-tall {
  height: var(--spacing-photo);
}

/* Lead note / placeholder text. */
.page-lead-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Split layout with large gap (about-us timeline + offices). */
.page-split-lg {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
}

.page-split-lg__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-split-lg__sidebar {
  width: var(--spacing-sidebar);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Content section flex column. */
.page-flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .page-split {
    flex-direction: column;
  }
  .page-split__sidebar {
    width: 100%;
  }
  .page-compliance-grid,
  .page-leaders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-roles-table__row {
    grid-template-columns: 2fr 1fr;
  }
}

@media (max-width: 768px) {
  .page-compliance-grid,
  .page-leaders-grid {
    grid-template-columns: 1fr;
  }
  .page-dark {
    padding: var(--spacing-lg) var(--spacing-md) 0;
    flex-direction: column;
  }
  .page-light {
    padding: var(--spacing-lg);
  }
  .page-sub-nav {
    padding: var(--spacing-md) var(--spacing-md) 0;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  .page-roles-table__row {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
}

/* ===================================================================
     Utility
     =================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===================================================================
     Support page — Help Centre (AC-3: section order matches design)
     =================================================================== */

/* Support page hero — eyebrow + heading + body */
.page-support-hero {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
}

.page-support-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-support-hero--sidebar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  width: 420px;
}

/* Support KPI tiles (dark background) */
.page-support-kpi-tile {
  background: var(--color-surface);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-support-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-support-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.page-support-kpi-value--accent {
  color: var(--color-accent);
}

/* Support channel cards — 4-column hairline grid */
.page-support-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  padding: 0 var(--spacing-xl);
}

.page-support-channel {
  background: var(--color-surface);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.page-support-channel__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.page-support-channel__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
}

.page-support-channel__btn {
  margin-top: auto;
  text-align: center;
  font-size: var(--text-sm);
  padding: var(--spacing-xs) 0;
}

/* FAQ section */
.page-support-faq-section {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-6);
  align-items: flex-start;
}

.page-support-faq {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.page-support-faq__header {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-text);
}

.page-support-faq__item {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.page-support-faq__question {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.page-support-faq__toggle {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
}

.page-support-faq__toggle--active {
  color: var(--color-accent);
}

.page-support-faq__answer {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  max-width: var(--width-wide);
  text-wrap: pretty;
}

/* Desk hours sidebar */
.page-support-desk-hours {
  width: 300px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-support-desk-hours__header {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.page-support-desk-hours__row {
  padding: var(--spacing-xs) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
}

.page-support-desk-hours__label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.page-support-desk-hours__value {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-text);
}

.page-support-desk-hours__value--accent {
  color: var(--color-accent);
}

.page-support-desk-hours__body {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--text-xs);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 1100px) {
  .page-support-hero {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-support-hero--sidebar {
    width: 100%;
  }
  .page-support-channels {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--spacing-lg);
  }
  .page-support-faq-section {
    flex-direction: column;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }
  .page-support-desk-hours {
    width: 100%;
  }
}

/* ===================================================================
     Home page — Homepage screen (AC-3: section order matches design)
     =================================================================== */

/* Hero — wide layout with image on the right */
.page-home-hero {
  padding: var(--spacing-xl-plus) var(--spacing-xl) var(--spacing-xxl);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
}

.page-home-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Eyebrow in hero — reused from page-hero-eyebrow */

/* Three-tile KPI strip — hairline grid */
.page-home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border-subtle);
  margin-top: var(--spacing-sm);
  max-width: 560px;
}

/* Quote strip — six-column bar across the page */
.page-quote-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ===================================================================
     Why APXCG — three-column value cards
     =================================================================== */

/* Hairline-grid tiles with numbering */
.page-value-card {
  background: var(--color-surface);
  padding: var(--spacing-xl-plus) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-value-card__number {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.page-value-card__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

.page-value-card__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  text-wrap: pretty;
}

/* ===================================================================
     Platform — image left, content right
     =================================================================== */

.page-platform {
  background: var(--color-surface);
  padding: var(--spacing-xl-plus) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-7);
  align-items: center;
}

.page-platform__image {
  width: var(--spacing-platform-img-w);
  height: var(--spacing-platform-img-h);
}

.page-platform__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.page-platform__specs {
  display: flex;
  flex-direction: column;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  max-width: 440px;
}

.page-platform__spec-row {
  background: var(--color-ink);
  padding: var(--spacing-xs) var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.page-platform__spec-label {
  color: var(--color-text-muted);
}

.page-platform__spec-value {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.page-platform__spec-value--accent {
  color: var(--color-accent);
}

/* ===================================================================
     Accounts — two-column account cards
     =================================================================== */

.page-account-card {
  background: var(--color-surface);
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-account-card--highlight {
  border-top: 2px solid var(--color-accent);
}

.page-account-card__name-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-account-card__name-row--inline {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.page-account-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.page-account-card__conditions {
  display: flex;
  flex-direction: column;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-account-card__condition {
  background: var(--color-ink);
  padding: var(--spacing-xs) var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.page-account-card__condition-label {
  color: var(--color-text-muted);
}

.page-account-card__condition-value {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.page-account-card__condition-value--accent {
  color: var(--color-accent);
}

/* ===================================================================
     Funding — light-themed payment cards
     =================================================================== */

.page-funding {
  background: var(--color-light-bg);
  padding: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
}

.page-funding__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.page-funding__cards {
  width: 640px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.page-funding-card {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-funding-card__currency {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-ink);
}

.page-funding-card__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-light-text);
}

.page-funding-card__detail {
  font-size: var(--text-xs);
  line-height: var(--line-height-body);
  color: var(--color-light-text-tertiary);
}

/* ===================================================================
      Funding page — standalone light-themed page
      =================================================================== */

/* Full-width content section on light background. */
.page-light--section {
  background: var(--color-light-bg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  color: var(--color-light-text);
}

/* Hero typography overrides for light-themed pages. */
.page-light--section .page-hero-eyebrow {
  color: var(--color-accent-ink);
}

.page-light--section .page-hero-heading {
  color: var(--color-light-text);
}

.page-light--section .page-hero-body {
  color: var(--color-light-text-secondary);
}

/* Hero section: content left, KPI sidebar right. */
.page-light--hero {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-end;
}

.page-light--hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.page-light--hero__content p {
  font-size: var(--text-md);
  line-height: var(--line-height-body);
  color: var(--color-light-text-secondary);
  max-width: 520px;
  text-wrap: pretty;
}

.page-light--hero__sidebar {
  width: var(--spacing-sidebar-reg);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-light-border);
}

.page-light-kpi-tile {
  background: var(--color-light-surface);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.page-light-kpi-label {
  color: var(--color-light-text-tertiary);
}

.page-light-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-light-text);
}

.page-light-kpi-value--accent {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-ink);
}

/* Light-themed data table (reused by funding page methods table). */
.page-light-table-wrapper {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
}

.page-light-table-wrapper__header {
  display: grid;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-light-head);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-light-table-wrapper__row {
  display: grid;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-light-border-subtle);
}

.page-light-table-wrapper__cell {
  font-size: var(--text-sm);
  color: var(--color-light-text-tertiary);
}

.page-light-table-wrapper__cell--method {
  font-size: var(--text-base);
  color: var(--color-light-text);
}

/* Content block with gold accent bar + ruled rules + info card. */
.page-light--rules {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
}

.page-light--rules__top {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
  padding: var(--spacing-xl);
}

.page-light--rules__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-light--rules__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl-plus);
  color: var(--color-light-text);
}

.page-light--rules--ruled {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-light-border);
}

.page-light--rules--ruled__item {
  background: var(--color-light-surface);
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-md);
}

.page-light--rules--ruled__number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-ink);
  padding-top: var(--spacing-xs);
}

.page-light--rules--ruled__text {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-light-text-secondary);
  text-wrap: pretty;
}

.page-light--rules__sidebar {
  width: var(--spacing-sidebar-alt);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--color-light-surface);
  border-left: 1px solid var(--color-light-border);
}

.page-light--rules__sidebar p {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-light-text-secondary);
  text-wrap: pretty;
}

/* ===================================================================
      Learn — webinar cards with thumbnail
      =================================================================== */

.page-webinar-card {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.page-webinar-card__thumb {
  height: 150px;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-raised) 0 var(--spacing-1),
    var(--color-surface) var(--spacing-1) var(--spacing-2)
  );
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-xs);
}

.page-webinar-card__thumb-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.page-webinar-card__body {
  padding: var(--spacing-lg) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-webinar-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-webinar-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

.page-webinar-card__time {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
}

/* ===================================================================
     Partners — KPI tile grid (IB rebates)
     =================================================================== */

.page-partners {
  background: var(--color-surface);
  padding: var(--spacing-5) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-7);
  align-items: center;
}

.page-partners__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-partners__kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  width: 520px;
}

.page-partners__kpi {
  background: var(--color-ink);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-partners__kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-partners__kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl-plus);
  font-variant-numeric: tabular-nums;
}

.page-partners__kpi-value--accent {
  color: var(--color-accent);
}

/* ===================================================================
      Partners table — rebate tiers (standalone /partners page)
      =================================================================== */

.page-partners__table {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0 var(--spacing-xl) var(--spacing-md);
}

.page-partners__table__title {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
}

.page-partners__table__header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: var(--spacing-xs) var(--spacing-lg);
  background: var(--color-surface-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-partners__table__header--right {
  text-align: right;
}

.page-partners__table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.page-partners__table__accent {
  color: var(--color-accent);
}

/* Partners feature cards (standalone /partners page) */

.page-partners__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  padding: 0 var(--spacing-xl) var(--spacing-5);
}

.page-partners__feature {
  background: var(--color-surface);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-partners__feature__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
}

.page-partners__feature__body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Partners page hero (standalone /partners page) */

.page-partners-hero {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-end;
}

.page-partners-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-partners-hero__kpi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  width: 480px;
}

/* ===================================================================
      Trust — compliance tile grid
      =================================================================== */

.page-trust {
  padding: var(--spacing-5) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-trust__row {
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-end;
}

.page-trust__heading {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  max-width: 560px;
}

.page-trust__body {
  width: 420px;
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  text-wrap: pretty;
}

.page-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-trust__tile {
  background: var(--color-surface);
  padding: var(--spacing-lg) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-trust__tile-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-trust__tile-value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ===================================================================
     Closing CTA — gold bar
     =================================================================== */

.page-home-cta {
  background: var(--color-accent);
  padding: var(--spacing-5) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-5);
  align-items: center;
  justify-content: space-between;
}

.page-home-cta__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 640px;
}

.page-home-cta__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent-label);
}

.page-home-cta__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-accent-ink);
}

.page-home-cta__actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.page-home-cta-btn-primary {
  background: var(--color-ink);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--spacing-md) var(--spacing-xl);
}

.page-home-cta-btn-secondary {
  border: 1px solid var(--color-accent-label);
  color: var(--color-accent-label);
  font-size: var(--text-sm);
  padding: var(--spacing-md) var(--spacing-xl);
}

/* ===================================================================
     Home page responsive
     =================================================================== */

@media (max-width: 1100px) {
  .page-home-hero {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-quote-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-platform {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-platform__image {
    width: 100%;
    height: auto;
    aspect-ratio: 620 / 400;
  }
  .page-funding {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-funding__cards {
    width: 100%;
  }
  .page-partners {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-partners__kpi-grid {
    width: 100%;
  }
  .page-partners__table__header {
    display: flex;
    flex-wrap: wrap;
  }
  .page-partners__table__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
  }
  .page-partners__features {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--spacing-lg);
  }
  .page-partners-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-4);
  }
  .page-partners-hero__kpi {
    width: 100%;
  }
  .page-trust__row {
    flex-direction: column;
  }
  .page-trust__body {
    width: 100%;
  }
  .page-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-home-cta {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .page-quote-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-account-card {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  .page-trust__grid {
    grid-template-columns: 1fr;
  }
  .page-partners__features {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-md);
  }
  .page-partners-hero {
    padding: var(--spacing-md);
    gap: var(--spacing-4);
  }
}

/* Funding page responsive. */
@media (max-width: 768px) {
  .page-light--hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-light--hero__sidebar {
    width: 100%;
  }
  .page-light--rules__top {
    flex-direction: column;
  }
  .page-light--rules__sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-light-border);
    padding: var(--spacing-xl);
  }
}

/* ===================================================================
      Markets Page
      =================================================================== */

/* Hero — split layout with text and sidebar KPI strip */
.page-markets-hero {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-end;
}

.page-markets-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-markets-hero--sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  width: 360px;
}

/* Markets KPI tile — sidebar KPI items */
.page-markets-kpi-tile {
  background: var(--color-surface);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.page-markets-kpi-label {
  color: var(--color-text-muted);
}

.page-markets-kpi-value {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.page-markets-kpi-value--accent {
  color: var(--color-accent);
}

/* Category tabs */
.page-markets-tabs {
  padding: 0 var(--spacing-site-gutter, 56px) 20px;
  display: flex;
  gap: 8px;
}

.page-markets-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 20px;
  color: var(--color-text-tertiary, #93A2B2);
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.page-markets-tab:hover {
  color: var(--color-text, #E9EEF4);
}

.page-markets-tab--active {
  background: var(--color-surface-raised, #101C29);
  border-bottom: 2px solid var(--color-accent, #EFC552);
  color: var(--color-text, #E9EEF4);
}

/* Markets data table */
.page-markets-table {
  background: var(--color-surface, #0B1420);
  border: 1px solid var(--color-border, #16273A);
  margin: 0 var(--spacing-site-gutter, 56px);
  padding: 0;
}

.page-markets-table__header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.9fr;
  padding: 12px 22px;
  background: var(--color-ink, #070E16);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-text-dim, #6C7B8C);
}

.page-markets-table__header--right {
  text-align: right;
}

.page-markets-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.9fr;
  align-items: center;
  padding: 15px 22px;
  border-top: 1px solid var(--color-border, #16273A);
}

.page-markets-table__instrument {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.page-markets-table__name {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  color: var(--color-text, #E9EEF4);
}

.page-markets-table__desc {
  font-size: 11px;
  color: var(--color-text-dim, #6C7B8C);
}

.page-markets-table__price {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary, #A9B8C4);
  text-align: right;
}

.page-markets-table__spread {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent, #EFC552);
  text-align: right;
}

.page-markets-table__swap {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary, #93A2B2);
  text-align: right;
}

.page-markets-table__margin {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  color: var(--color-text-secondary, #A9B8C4);
  text-align: right;
}

/* Markets table footer note */
.page-markets-note {
  margin: 0 var(--spacing-site-gutter, 56px);
  padding: 14px 0 56px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-faint, #5A6876);
}

/* ===================================================================
       Platform page — standalone platform screen (AC-3)
       =================================================================== */

/* Platform page mini-nav — secondary nav below shared site nav */
.page-platform-nav {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-platform-nav__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-big);
}

.page-platform-nav__links {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.page-platform-nav__links a {
  padding: var(--spacing-xs) 0;
}

.page-platform-nav__links a.active {
  color: var(--color-accent);
  font-weight: 500;
}

.page-platform-nav__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Platform page hero — eyebrow + heading + body + CTAs + screenshot */
.page-platform-hero {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-start;
}

.page-platform-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-platform-hero__platform-links {
  display: flex;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-xs);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

/* Platform feature tiles — 3-column hairline grid */
.page-platform-features {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-platform-feature {
  background: var(--color-surface);
  padding: var(--spacing-lg) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.page-platform-feature__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl-plus);
  color: var(--color-text);
}

.page-platform-feature__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  text-wrap: pretty;
}

/* Platform stats row — 4-column hairline grid */
.page-platform-stats {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-platform-stat {
  background: var(--color-surface);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-platform-stat__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-platform-stat__value {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-text);
}

.page-platform-stat__value--accent {
  color: var(--color-accent);
}

/* Platform page responsive */
@media (max-width: 1024px) {
  .page-platform-nav__links {
    display: none;
  }
  .page-platform-hero {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-platform-features {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-lg);
  }
  .page-platform-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .page-platform-nav {
    padding: var(--spacing-md) var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }
  .page-platform-hero {
    padding: var(--spacing-lg);
  }
  .page-platform-stats {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-lg);
  }
}

/* ===================================================================
   Accounts page
   =================================================================== */

/* Accounts hero — dark, heading + body + rule-of-thumb sidebar */
.page-accounts-hero {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-7);
  align-items: flex-end;
}

.page-accounts-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-accounts-hero--sidebar {
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  width: 300px;
  padding: var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Rule of thumb sidebar */
.page-accounts-rule__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.page-accounts-rule__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

/* Comparison grid — 3-column hairline technique (condition | standard | raw) */
.page-accounts-compare-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  padding: 0 var(--spacing-xl);
}

.page-accounts-compare-grid__cell {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Header row cells */
.page-accounts-compare-grid__header {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: flex-end;
}

.page-accounts-compare-grid__header--label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-accounts-compare-grid__header--name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl-plus);
  color: var(--color-text);
}

.page-accounts-compare-grid__header--tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Condition row cells */
.page-accounts-compare-grid__row {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--text-sm);
}

.page-accounts-compare-grid__label {
  color: var(--color-text-muted);
}

.page-accounts-compare-grid__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.page-accounts-compare-grid__value--accent {
  color: var(--color-accent);
}

/* Highlight label column */
.page-accounts-compare-grid__label-col {
  background: var(--color-ink);
}

/* Row with CTA buttons */
.page-accounts-compare-grid__btn-row {
  padding: var(--spacing-md) var(--spacing-lg);
}

.page-accounts-compare-grid__btn {
  text-align: center;
  font-size: var(--text-sm);
  padding: var(--spacing-xs) 0;
}

/* Bottom info tiles — 3-column hairline grid */
.page-accounts-bottom-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.page-accounts-bottom-tile {
  background: var(--color-surface);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-accounts-bottom-tile__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-accounts-bottom-tile__value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Accounts page responsive */
@media (max-width: 1024px) {
  .page-accounts-hero {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-accounts-hero--sidebar {
    width: 100%;
  }
  .page-accounts-compare-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-lg);
  }
  .page-accounts-bottom-tiles {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .page-accounts-hero {
    padding: var(--spacing-lg);
  }
}

/* ===================================================================
       Learn Page
       =================================================================== */

/* Hero — eyebrow + heading + body + morning note sidebar */
.page-learn-hero {
  padding: var(--spacing-6) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-big);
  align-items: flex-start;
}

.page-learn-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-learn-hero--sidebar {
  width: 400px;
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Morning note — meta + italic quote + published note */
.page-morning-note__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.page-morning-note__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

.page-morning-note__publish {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
}

/* Hairline-grid webinar cards — 3 columns with thumbnail */
.page-learn-webinar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
  padding: 0 var(--spacing-xl) var(--spacing-5);
}

/* Webinar card — dark background with image placeholder and body */
.page-learn-webinar-card {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

/* Webinar card thumbnail — striped placeholder */
.page-learn-webinar-card__thumb {
  height: 170px;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-raised) 0 var(--spacing-1),
    var(--color-surface) var(--spacing-1) var(--spacing-2)
  );
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-sm);
}

.page-learn-webinar-card__thumb-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Webinar card body */
.page-learn-webinar-card__body {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Reads section — header + 2-column grid of reads + practising sidebar */
.page-learn-reads {
  padding: 0 var(--spacing-xl) var(--spacing-6);
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.page-learn-reads__left {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.page-learn-reads__header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-text);
}

.page-learn-reads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-learn-reads-row {
  background: var(--color-surface);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.page-learn-reads-row__title {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.page-learn-reads-row__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Practise card — heading + body + CTA */
.page-learn-practise {
  width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.page-learn-practise__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-text);
}

.page-learn-practise__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  text-wrap: pretty;
}

/* Learn page footer note — small legal text */
.page-learn-note {
  padding: 0 var(--spacing-xl) var(--spacing-5);
  font-size: var(--text-xs);
  line-height: var(--line-height-body);
  color: var(--color-text-faint);
  text-wrap: pretty;
}

/* Learn page responsive */
@media (max-width: 1100px) {
  .page-learn-hero {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-learn-hero--sidebar {
    width: 100%;
  }
  .page-learn-webinar-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-lg) var(--spacing-4);
  }
  .page-learn-reads {
    flex-direction: column;
    padding: 0 var(--spacing-lg) var(--spacing-xl);
  }
  .page-learn-reads__left {
    width: 100%;
  }
  .page-learn-reads-grid {
    grid-template-columns: 1fr;
  }
  .page-learn-practise {
    width: 100%;
  }
  .page-learn-note {
    padding: 0 var(--spacing-lg) var(--spacing-4);
  }
}

@media (max-width: 768px) {
  .page-learn-hero {
    padding: var(--spacing-md);
  }
  .page-learn-webinar-grid {
    padding: 0 var(--spacing-md) var(--spacing-4);
  }
  .page-learn-reads {
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }
  .page-learn-note {
    padding: 0 var(--spacing-md) var(--spacing-4);
  }
}

/* ===================================================================
      News Page
      =================================================================== */

/* Hero — eyebrow + heading + body + morning note sidebar */
.page-news-hero {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5);
  display: flex;
  gap: var(--spacing-5);
  align-items: flex-start;
}

.page-news-hero--content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Morning note card — dark background, gold left border */
.page-news-note {
  width: var(--spacing-sidebar-alt);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.page-news-note__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.page-news-note__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

.page-news-note__body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-tertiary);
  text-wrap: pretty;
}

.page-news-note__link {
  color: var(--color-accent);
  font-size: var(--text-sm);
}

/* Article cards — 3-column hairline grid */
.page-news-cards {
  padding: 0 var(--spacing-xl) var(--spacing-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--apx-hairline-gap);
  background: var(--color-border);
}

.page-news-card {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.page-news-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-news-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--line-height-md);
  color: var(--color-text);
}

.page-news-card__body {
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-tertiary);
  text-wrap: pretty;
}

/* Calendar table — dark bordered table with header */
.page-news-calendar {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
}

.page-news-calendar__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.page-news-calendar__header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.page-news-calendar__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.page-news-calendar__tz {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.page-news-calendar__thead {
  display: grid;
  grid-template-columns: 0.7fr 0.6fr 2fr 0.7fr 0.8fr;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-news-calendar__thead-cell--right {
  text-align: right;
}

.page-news-calendar__row {
  display: grid;
  grid-template-columns: 0.7fr 0.6fr 2fr 0.7fr 0.8fr;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.page-news-calendar__row--mono {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

.page-news-calendar__impact--high {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

.page-news-calendar__impact--medium {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-dim);
}

.page-news-calendar__affects {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: right;
}

/* News page responsive */
@media (max-width: 1100px) {
  .page-news-hero {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .page-news-note {
    width: 100%;
  }
  .page-news-cards {
    grid-template-columns: 1fr;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .page-news-hero {
    padding: var(--spacing-md);
  }
  .page-news-cards {
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }
  .page-news-calendar {
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }
  .page-news-calendar__thead,
  .page-news-calendar__row {
    grid-template-columns: 1fr;
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
  }
  .page-news-calendar__thead {
    display: flex;
    flex-wrap: wrap;
  }
}

/* ===================================================================
   Policies & Risk Warning — tabbed legal-document panels
   =================================================================== */

.apx-policy-panel > * {
  margin-bottom: 18px;
}

.apx-policy-panel > *:last-child {
  margin-bottom: 0;
}

.apx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-tertiary);
}

.apx-list li {
  position: relative;
  padding-left: 22px;
}

.apx-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
}

.apx-risk-ruled {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border);
}

.apx-risk-ruled__item {
  background: var(--color-surface);
  padding: 26px 32px;
  display: flex;
  gap: 24px;
}

.apx-risk-ruled__number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  width: 24px;
  flex-shrink: 0;
  padding-top: 2px;
}

.apx-risk-ruled__title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.apx-risk-ruled__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-tertiary);
}

.apx-risk-panel {
  padding: 32px;
}

.apx-risk-panel > * {
  margin-bottom: 18px;
}

.apx-risk-panel > *:last-child {
  margin-bottom: 0;
}