/* QuantVault firm OA pages — shared component styles (extracted from inline; v1) */
.ssg-oa { max-width: 900px; margin: 0 auto; padding: 8px 18px 40px; }
  .ssg-oa__crumb { font-size: .82rem; color: var(--text-secondary,#6b7280); margin: 10px 0 18px; }
  .ssg-oa__crumb a { color: var(--text-secondary,#6b7280); text-decoration: none; }
  .ssg-oa__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
  .ssg-oa__logo { height: 70px; width: auto; max-width: 200px; object-fit: contain; margin-top: 8px; }
  [data-theme="dark"] .ssg-oa__logo { filter: brightness(0) invert(1); }
  .ssg-oa h1 { font-size: clamp(1.7rem,3vw,2.4rem); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 12px; color: var(--text-bright,#111827); }
  .ssg-oa__lede { font-size: 1.02rem; color: var(--text-secondary,#4b5563); line-height: 1.6; max-width: 60ch; margin: 0 0 18px; }
  .ssg-oa__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
  .ssg-oa__sec { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color,#e5e7eb); }
  .ssg-oa__sec h2 { font-size: 1.2rem; margin: 0 0 4px; color: var(--text-primary,#111827); }
  .ssg-oa__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
  .ssg-oa__chip { font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-color,#e5e7eb); color: var(--text-secondary,#6b7280); }
  .ssg-oa__sum { font-size: .94rem; line-height: 1.6; color: var(--text-secondary,#4b5563); margin: 0 0 10px; }
  .ssg-oa__list { list-style: none; margin: 0; padding: 0; }
  .ssg-oa__list li { padding: 8px 2px; border-bottom: 1px solid var(--border-color,#f1f2f4); font-size: .93rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .ssg-oa__list a { color: var(--text-primary,#1f2937); text-decoration: none; font-weight: 600; }
  .ssg-oa__list a:hover { color: #4c5fd5; }
  .ssg-oa__pm { color: var(--text-secondary,#9ca3af); font-size: .78rem; white-space: nowrap; }
  .ssg-oa__free { color: #1f9d63; }
  .ssg-oa__faq { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border-color,#e5e7eb); }
  .ssg-oa__faq h2 { font-size: 1.25rem; margin: 0 0 14px; }
  .ssg-oa__faq h3 { font-size: 1rem; margin: 16px 0 5px; color: var(--text-primary,#111827); }
  .ssg-oa__faq p { font-size: .92rem; line-height: 1.6; color: var(--text-secondary,#6b7280); margin: 0; }
  /* at-a-glance fact strip */
  .ssg-oa__glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-color,#e5e7eb); border: 1px solid var(--border-color,#e5e7eb); border-radius: 10px; overflow: hidden; margin: 4px 0 18px; }
  .ssg-oa__glance > div { background: var(--bg-primary,#fff); padding: 11px 14px; }
  .ssg-oa__glance dt { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary,#9ca3af); margin: 0 0 3px; }
  .ssg-oa__glance dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--text-primary,#1f2937); line-height: 1.35; }
  @media (max-width: 640px) { .ssg-oa__glance { grid-template-columns: repeat(2, 1fr); } }
  /* sub-answer below H2 */
  .ssg-oa__lead { font-size: .96rem; line-height: 1.6; color: var(--text-secondary,#4b5563); margin: 0 0 12px; }
  .ssg-oa__lead b, .ssg-oa__sum b, .ssg-oa__faq p b { color: var(--text-primary,#1f2937); }
  /* what's-tested table */
  .ssg-oa__tablewrap { overflow-x: auto; margin: 6px 0 4px; }
  table.ssg-oa__table { width: 100%; border-collapse: collapse; font-size: .89rem; }
  table.ssg-oa__table th, table.ssg-oa__table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-color,#f1f2f4); vertical-align: top; line-height: 1.5; }
  table.ssg-oa__table th { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary,#6b7280); border-bottom: 1.5px solid var(--border-color,#e5e7eb); }
  table.ssg-oa__table td:first-child { font-weight: 600; color: var(--text-primary,#1f2937); white-space: nowrap; }
  /* callout box */
  .ssg-oa__callout { border: 1px solid var(--border-color,#e5e7eb); border-left: 3px solid #d9822b; border-radius: 8px; padding: 12px 15px; margin: 16px 0; background: var(--bg-secondary,#fafafa); }
  .ssg-oa__callout strong { display: block; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: #b5671f; margin: 0 0 4px; }
  .ssg-oa__callout p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-secondary,#4b5563); }
  [data-theme="dark"] .ssg-oa__callout strong { color: #e0a060; }
  /* numbered prep plan */
  ol.ssg-oa__plan { margin: 6px 0 4px; padding: 0; list-style: none; counter-reset: prep; }
  ol.ssg-oa__plan li { position: relative; padding: 0 0 14px 42px; counter-increment: prep; font-size: .92rem; line-height: 1.55; color: var(--text-secondary,#4b5563); }
  ol.ssg-oa__plan li::before { content: counter(prep); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--accent-primary,#4c5fd5); color: #fff; font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  ol.ssg-oa__plan li b { color: var(--text-primary,#1f2937); }
  @media (max-width: 640px) { .ssg-oa__head { flex-direction: column-reverse; } .ssg-oa__logo { height: 48px; margin-top: 0; } }
  /* E-E-A-T stamp + funnel bridge */
  .ssg-oa__stamp { font-size: .78rem; color: var(--text-secondary,#9ca3af); margin: 0 0 14px; line-height: 1.5; }
  .ssg-oa__stamp b { color: var(--text-secondary,#6b7280); font-weight: 600; }
  .ssg-oa__bridge { font-size: .9rem; line-height: 1.55; color: var(--text-secondary,#4b5563); background: var(--bg-secondary,#fafafa); border: 1px solid var(--border-color,#e5e7eb); border-radius: 8px; padding: 11px 14px; margin: 0 0 18px; }
  .ssg-oa__bridge a { color: #4c5fd5; font-weight: 600; text-decoration: none; }
  /* mini table of contents */
  .ssg-oa__toc { margin: 4px 0 8px; padding: 12px 16px; border: 1px solid var(--border-color,#e5e7eb); border-radius: 10px; background: var(--bg-secondary,#fafafa); }
  .ssg-oa__toc h2 { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary,#9ca3af); margin: 0 0 8px; border: 0; padding: 0; }
  .ssg-oa__toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .ssg-oa__toc a { font-size: .88rem; color: #4c5fd5; text-decoration: none; font-weight: 500; }
  .ssg-oa__toc a:hover { text-decoration: underline; }
  /* standing disclaimer */
  .ssg-oa__note { font-size: .85rem; line-height: 1.55; color: var(--text-secondary,#6b7280); border-left: 3px solid var(--border-color,#d1d5db); padding: 2px 0 2px 12px; margin: 12px 0 0; }
  /* track comparison cards */
  .ssg-oa__tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 4px; }
  @media (max-width: 640px) { .ssg-oa__tracks { grid-template-columns: 1fr; } }
  .ssg-oa__track { border: 1px solid var(--border-color,#e5e7eb); border-top: 3px solid var(--tk,#4c5fd5); border-radius: 10px; padding: 13px 15px; background: var(--bg-primary,#fff); }
  .ssg-oa__track h3 { font-size: 1rem; margin: 0 0 8px; color: var(--text-primary,#111827); display: flex; align-items: center; gap: 7px; }
  .ssg-oa__track h3 .ssg-oa__glyph { font-size: .9rem; }
  .ssg-oa__track dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; }
  .ssg-oa__track dt { font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary,#9ca3af); padding-top: 2px; }
  .ssg-oa__track dd { margin: 0; font-size: .87rem; line-height: 1.45; color: var(--text-secondary,#4b5563); }
  /* worked micro-example */
  .ssg-oa__worked { border: 1px solid var(--border-color,#e5e7eb); border-radius: 10px; padding: 14px 16px; margin: 8px 0 4px; background: var(--bg-secondary,#fafafa); }
  .ssg-oa__worked p { font-size: .9rem; line-height: 1.6; color: var(--text-secondary,#4b5563); margin: 0 0 8px; overflow-x: auto; overflow-y: hidden; }
  .ssg-oa__key { overflow-x: auto; }
  .ssg-oa__worked .katex-display { margin: 6px 0; overflow-x: auto; overflow-y: hidden; }
  .ssg-oa__worked p:last-child { margin-bottom: 0; }
  .ssg-oa__worked b { color: var(--text-primary,#1f2937); }
  .ssg-oa__tldr { font-size: .88rem; line-height: 1.55; color: var(--text-primary,#1f2937); background: rgba(76,95,213,.07); border-radius: 6px; padding: 7px 11px; margin: 0 0 10px; }
  [data-theme="dark"] .ssg-oa__tldr { background: rgba(120,140,255,.12); }
  /* problem list: chip row beneath title */
  .ssg-oa__list li { display: block; }
  .ssg-oa__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 0; }
  .ssg-oa__chips span { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-secondary,#f3f4f6); color: var(--text-secondary,#6b7280); }
  .ssg-oa__chips .ssg-oa__free { background: rgba(31,157,99,.12); color: #1f9d63; }
  .ssg-oa__list--qr { border-left: 3px solid #4c5fd5; padding-left: 13px; }
  .ssg-oa__list--swe { border-left: 3px solid #d9822b; padding-left: 13px; }
  /* stacked-card fallback for what's-tested table on narrow screens */
  @media (max-width: 600px) {
    table.ssg-oa__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.ssg-oa__table, table.ssg-oa__table tbody, table.ssg-oa__table tr, table.ssg-oa__table td { display: block; width: 100%; }
    table.ssg-oa__table tr { border: 1px solid var(--border-color,#e5e7eb); border-radius: 8px; margin: 0 0 10px; padding: 4px 2px; }
    table.ssg-oa__table td { border: 0; padding: 4px 12px; }
    table.ssg-oa__table td:first-child { white-space: normal; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-primary,#4c5fd5); }
  }
  .ssg-oa__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* difficulty group sub-headers inside problem lists */
  .ssg-oa__grp { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary,#9ca3af); margin: 14px 0 4px; }
  .ssg-oa__grp:first-child { margin-top: 4px; }
  .ssg-oa__chips .ssg-oa__hard { background: rgba(217,130,43,.14); color: #b5671f; }
  [data-theme="dark"] .ssg-oa__chips .ssg-oa__hard { color: #e0a060; }
  /* inline key-insight one-liner */
  .ssg-oa__key { border-left: 3px solid var(--accent-primary,#4c5fd5); background: var(--bg-secondary,#fafafa); border-radius: 0; padding: 8px 13px; margin: 12px 0 4px; font-size: .9rem; line-height: 1.55; color: var(--text-secondary,#4b5563); }
  .ssg-oa__key b { color: var(--text-primary,#1f2937); }
  .ssg-oa__scroll { overflow-x: auto; }

.ssg-oa__track-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent,#ff6a00); margin: 0 0 8px; }

.ssg-oa__table-wrap { overflow-x: auto; margin: 6px 0 10px; }

.ssg-oa__diff--med { color: #b8860b; border: 1px solid #b8860b; }

.ssg-oa__pmchip { font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-color,#e5e7eb); color: var(--text-secondary,#9ca3af); }

.ssg-oa__closer { font-size: .9rem; font-weight: 700; color: var(--text-primary,#111827); margin: 8px 0 0; }

.ssg-oa__math { overflow-x: auto; margin: 6px 0; }

.ssg-oa__diff { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

.ssg-oa__takeaway { font-size: .9rem; color: var(--text-primary,#111827); font-weight: 600; margin: 0 0 8px; }

.ssg-oa__byline { font-size: .8rem; color: var(--text-secondary,#9ca3af); margin: 8px 0 14px; }

.ssg-oa__diff--easy { color: #1f9d63; border: 1px solid #1f9d63; }

.ssg-oa__diff--hard { color: #c0392b; border: 1px solid #c0392b; }

.ssg-oa__callout-title { font-weight: 700; font-size: .9rem; color: var(--text-primary,#111827); margin: 0 0 6px; }

.ssg-oa__strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }

.ssg-oa__tbl { border-collapse: collapse; width: 100%; font-size: .9rem; }

.ssg-oa__toc-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-secondary,#9ca3af); margin: 0 0 6px; }

.ssg-oa__factchip { font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 10px; border: 1px solid var(--border-color,#e5e7eb); color: var(--text-secondary,#4b5563); background: var(--surface-2,#f9fafb); }

.ssg-oa__work { border: 1px solid var(--border-color,#e5e7eb); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }

.ssg-oa__prep { margin: 6px 0 10px; padding-left: 22px; font-size: .94rem; line-height: 1.6; color: var(--text-secondary,#4b5563); }

/* =====================================================================
   v2 DESIGN-SYSTEM UPLIFT (shared, generalizable — lifts all firm OA pages)
   Targets: section pacing, heading hierarchy, reading measure, table polish,
   mobile reflow, accent discipline, body contrast. Overrides + additions only;
   no existing selector is renamed or removed.
   ===================================================================== */
.ssg-oa {
  /* tunables used throughout this block */
  --oa-measure: 68ch;        /* reading width for running prose */
  --oa-gutter: clamp(16px, 4vw, 26px);
  --oa-accent: var(--accent-primary, var(--accent, #4c5fd5));
  /* concrete tints (no color-mix — must work on older render engines).
     Cool blue-gray keyed to the accent family; reads cleanly under any firm accent. */
  --oa-tint: rgba(76, 110, 220, .055);
  --oa-tint-soft: rgba(76, 110, 220, .032);
  --oa-tint-border: rgba(76, 110, 220, .14);
  --oa-body: var(--text-secondary, #3f4756);
  --oa-strong: var(--text-primary, #1f2937);
  max-width: 940px;
  padding-left: var(--oa-gutter);
  padding-right: var(--oa-gutter);
  /* slightly darker, calmer body baseline so prose stops reading gray */
  color: var(--oa-body);
  line-height: 1.62;
}

/* ---- SECTION PACING: big space ABOVE headings, clear inter > intra ----
   Stronger divider + generous top margin so each section reads as a block,
   not a continuation of the prior wall of text. */
.ssg-oa__sec,
.ssg-oa__faq {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--border-color, #e5e7eb);
}
/* alternating subtle tinted bands: every 2nd content section gets a soft
   full-width wash so the lower half stops being one flat gray column.
   Implemented with a pseudo full-bleed so it ignores the reading measure. */
.ssg-oa__sec:nth-of-type(even) {
  position: relative;
  isolation: isolate;
}
.ssg-oa__sec:nth-of-type(even)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: calc(-1 * clamp(34px, 5vw, 56px));
  left: calc(-1 * var(--oa-gutter));
  right: calc(-1 * var(--oa-gutter));
  background: var(--oa-tint-soft);
  border-top: 1px solid var(--oa-tint-border);
}

/* ---- HEADING HIERARCHY: H2 jumps clearly above body, with eyebrow accent ---- */
.ssg-oa__sec h2,
.ssg-oa__faq h2 {
  font-size: clamp(1.45rem, 1rem + 1.4vw, 1.9rem);
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -.018em;
  color: var(--text-bright, #0f172a);
  margin: 0 0 12px;
  padding-top: 6px;
  position: relative;
}
/* small accent kicker bar above each section heading */
.ssg-oa__sec > h2::before,
.ssg-oa__faq > h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  margin: 0 0 12px;
  background: var(--oa-accent);
  opacity: .9;
}
.ssg-oa__sec h3,
.ssg-oa__faq h3 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--oa-strong);
  margin: 22px 0 6px;
}
/* TOC/eyebrow-style h2s must NOT pick up the big heading treatment */
.ssg-oa__toc h2::before { content: none; }
.ssg-oa__toc h2 { font-size: .72rem; }

/* ---- READING MEASURE: never edge-to-edge for running prose ---- */
.ssg-oa__lede,
.ssg-oa__lead,
.ssg-oa__sum,
.ssg-oa__sec > p,
.ssg-oa__faq p,
.ssg-oa__note,
.ssg-oa__bridge,
.ssg-oa__stamp,
.ssg-oa__byline,
.ssg-oa__prep,
ol.ssg-oa__plan {
  max-width: var(--oa-measure);
}
/* darken + relax running prose so it isn't faint gray */
.ssg-oa__lead,
.ssg-oa__sum,
.ssg-oa__sec > p,
.ssg-oa__faq p {
  color: var(--oa-body);
  line-height: 1.66;
  font-size: .96rem;
}
.ssg-oa__lede { font-size: 1.06rem; line-height: 1.62; color: var(--text-secondary, #3f4756); }

/* ---- ACCENT DISCIPLINE: reserve saturated accent for CTAs + key callouts.
   Quiet inline links to a calmer hue; emphasise on hover only. ---- */
.ssg-oa__faq a,
.ssg-oa__lead a,
.ssg-oa__sum a,
.ssg-oa__sec > p a,
.ssg-oa__note a,
.ssg-oa__list a {
  color: #3f5bb0;                       /* calmer than the saturated CTA accent */
  text-decoration-color: rgba(76, 110, 220, .4);
}
.ssg-oa__faq a:hover,
.ssg-oa__lead a:hover,
.ssg-oa__sum a:hover,
.ssg-oa__sec > p a:hover { color: var(--oa-accent); }

/* ---- TABLE POLISH (both conventions): filled header, zebra, soft border,
   capped width, comfortable padding. ---- */
.ssg-oa__tablewrap,
.ssg-oa__table-wrap {
  max-width: 100%;
  margin: 10px 0 6px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;            /* clip rounded corners; overflow-x set below */
  overflow-x: auto;
}
table.ssg-oa__table,
table.ssg-oa__tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .92rem;
  background: var(--bg-primary, #fff);
}
table.ssg-oa__table thead th,
table.ssg-oa__tbl thead th {
  background: var(--oa-tint);
  color: var(--oa-strong);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1.5px solid var(--oa-tint-border);
}
table.ssg-oa__table tbody td,
table.ssg-oa__tbl tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color, #f1f2f4);
  vertical-align: top;
  line-height: 1.55;
  color: var(--oa-body);
}
table.ssg-oa__table tbody tr:nth-child(even) td,
table.ssg-oa__tbl tbody tr:nth-child(even) td {
  background: var(--oa-tint-soft);
}
table.ssg-oa__table tbody tr:last-child td,
table.ssg-oa__tbl tbody tr:last-child td { border-bottom: 0; }
table.ssg-oa__table tbody td:first-child,
table.ssg-oa__tbl tbody td:first-child {
  font-weight: 650;
  color: var(--oa-strong);
}

/* ---- COMPONENT WARMTH: lift callouts/cards a touch so they read as product,
   not docs. Generalizable to existing component classes only. ---- */
.ssg-oa__callout { border-radius: 10px; padding: 14px 17px; }
.ssg-oa__work,
.ssg-oa__worked,
.ssg-oa__track,
.ssg-oa__bridge,
.ssg-oa__toc { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.ssg-oa__key { border-radius: 8px; }

/* ---- MOBILE (<=480px): comfortable rhythm, full-width stacks, no overflow ---- */
@media (max-width: 480px) {
  .ssg-oa {
    --oa-gutter: 16px;
    line-height: 1.7;
  }
  .ssg-oa__sec,
  .ssg-oa__faq {
    margin-top: 30px;
    padding-top: 22px;
  }
  .ssg-oa__sec h2,
  .ssg-oa__faq h2 { font-size: 1.42rem; }
  .ssg-oa__lead,
  .ssg-oa__sum,
  .ssg-oa__sec > p,
  .ssg-oa__faq p { font-size: .98rem; line-height: 1.72; }
  /* CTA + chip rows go full-width stacks */
  .ssg-oa__ctas { flex-direction: column; align-items: stretch; }
  .ssg-oa__ctas > * { width: 100%; text-align: center; justify-content: center; }
  .ssg-oa__strip,
  .ssg-oa__meta { gap: 7px; }
  .ssg-oa__strip > * { flex: 1 1 100%; }
  /* wide .ssg-oa__tbl reflows to scroll wrapper if not already stacked */
  .ssg-oa__table-wrap,
  .ssg-oa__tablewrap { -webkit-overflow-scrolling: touch; }
  /* never let a child force horizontal overflow at 390px */
  .ssg-oa__math,
  .ssg-oa__key,
  .ssg-oa__worked p,
  .ssg-oa__work p { max-width: 100%; }
}
/* belt-and-suspenders: nothing in the page may break the viewport width */
.ssg-oa, .ssg-oa * { min-width: 0; }

/* =====================================================================
   v3 DESIGN-SYSTEM UPLIFT (shared, generalizable — all 3 firm OA pages)
   Goals from visual-panel feedback:
   - kill the "single narrow column wall of text": use a sticky TOC side
     rail on desktop so the wide margins do real work and the eye can
     chunk the long scroll;
   - constrain prose to a true reading measure (~700px) so body copy
     breathes instead of running edge-to-edge;
   - stronger section anchors (heavier H2, hairline divider, more air);
   - polished worked-examples (boxed result lines, resting points);
   - calmer body color + warmer cards so it reads as product, not docs.
   CSS-only; relies on the shared markup order every page uses:
   .ssg-oa > [crumb, head, strip, bridge, byline, ctas, nav.__toc, sections…]
   No selector renamed or removed.
   ===================================================================== */
.ssg-oa {
  --oa-measure: 44rem;          /* ~704px true reading measure for prose */
  --oa-rail: 16rem;             /* sticky TOC side-rail width (desktop) */
  --oa-rail-gap: clamp(28px, 4vw, 56px);
  max-width: 1140px;            /* room for prose column + side rail + air */
}

/* ---------- DESKTOP: sticky TOC side rail + capped prose column ----------
   The TOC <nav> is a single direct child sitting just before the first
   section on every page. Float it into a right rail and make it sticky.
   Every section then RESERVES that right band via padding-right, so no
   block (incl. wide tables) can ever slide under the rail — the float
   alone is not reliable for full-width block boxes, the reserved padding
   is what guarantees the two-column read. */
@media (min-width: 1000px) {
  /* Gate the whole rail layout on a TOC actually being present, so any
     oa.css page WITHOUT a .ssg-oa__toc never gets a dead right gutter.
     :has() is supported by every engine that renders these pages. */
  .ssg-oa:has(> .ssg-oa__toc) { position: relative; }
  .ssg-oa:has(> .ssg-oa__toc) > .ssg-oa__toc {
    float: right;
    width: var(--oa-rail);
    margin: 4px 0 8px 0;
    position: sticky;
    top: 84px;
    z-index: 1;
    background: var(--bg-secondary, #fafafa);
  }
  .ssg-oa > .ssg-oa__toc ul,
  .ssg-oa > .ssg-oa__toc ol {
    display: block;          /* vertical link list reads as a real nav */
    margin: 0;
    padding: 0;
  }
  .ssg-oa > .ssg-oa__toc li { margin: 0; }
  .ssg-oa > .ssg-oa__toc a,
  .ssg-oa > .ssg-oa__toc li > a {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 2px solid transparent;
    line-height: 1.35;
  }
  .ssg-oa > .ssg-oa__toc a:hover,
  .ssg-oa > .ssg-oa__toc li > a:hover {
    border-left-color: var(--oa-accent);
    text-decoration: none;
  }
  /* reserve the rail band on every full-width content block so the prose
     column lives entirely to the LEFT of the sticky rail — only when a
     TOC rail exists to fill it. */
  .ssg-oa:has(> .ssg-oa__toc) .ssg-oa__sec,
  .ssg-oa:has(> .ssg-oa__toc) .ssg-oa__faq {
    clear: none;
    padding-right: calc(var(--oa-rail) + var(--oa-rail-gap));
  }
  /* keep running content from sliding under the rail at the very top */
  .ssg-oa:has(> .ssg-oa__toc) .ssg-oa__sec:first-of-type { margin-top: clamp(30px, 4vw, 44px); }
  /* the section-tint full-bleed band must not run under the rail either */
  .ssg-oa:has(> .ssg-oa__toc) .ssg-oa__sec:nth-of-type(even)::before {
    right: calc(-1 * var(--oa-gutter) + var(--oa-rail) + var(--oa-rail-gap));
  }
}
/* numbered TOC default (ordered list) shouldn't show raw markers in rail */
.ssg-oa__toc ol { list-style: none; }

/* ---------- PROSE MEASURE: cap the column, not the cards ----------
   Apply the measure to text-bearing blocks inside sections so headings,
   paragraphs and lists share one comfortable line length while wide
   components (tables, grids of cards) can still use full width. */
.ssg-oa__sec > h2,
.ssg-oa__sec > h3,
.ssg-oa__sec > p,
.ssg-oa__sec > ul:not(.ssg-oa__list),
.ssg-oa__sec > ol:not(.ssg-oa__plan),
.ssg-oa__faq > h2,
.ssg-oa__faq > h3,
.ssg-oa__faq > p {
  max-width: var(--oa-measure);
}

/* ---------- SECTION ANCHORS: heavier, more air, hairline divider ----------
   Make H2s read as clear chapter starts so the long scroll chunks. */
.ssg-oa__sec,
.ssg-oa__faq {
  margin-top: clamp(40px, 5.5vw, 64px);
  padding-top: clamp(26px, 3.4vw, 38px);
}
.ssg-oa__sec > h2,
.ssg-oa__faq > h2 {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
/* eyebrow kicker: a touch longer + brighter so it registers as an accent */
.ssg-oa__sec > h2::before,
.ssg-oa__faq > h2::before {
  width: 40px;
  height: 3px;
  margin-bottom: 14px;
  opacity: 1;
}

/* ---------- LEDE / LEAD type scale: clearer than body ---------- */
.ssg-oa__lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.18rem);
  line-height: 1.58;
  color: var(--text-secondary, #374151);
  max-width: var(--oa-measure);
}
.ssg-oa__lead {
  font-weight: 500;
  color: var(--text-secondary, #374151);
}

/* ---------- WORKED EXAMPLES: resting points, boxed result lines ----------
   The densest block on every page. Add internal rhythm + a tinted accent
   rail and lift the takeaway/closer lines so the eye gets a place to land. */
.ssg-oa__work,
.ssg-oa__worked {
  border-left: 3px solid var(--oa-accent);
  padding: 16px 18px;
  margin: 14px 0;
  background: var(--oa-tint-soft);
}
.ssg-oa__work + .ssg-oa__work,
.ssg-oa__worked + .ssg-oa__worked { margin-top: 18px; }
.ssg-oa__takeaway {
  display: inline-block;
  background: var(--oa-tint);
  border-radius: 8px;
  padding: 8px 13px;
  margin: 4px 0 12px;
  color: var(--oa-strong);
  max-width: var(--oa-measure);
}
/* the bolded result line at the end of a worked example reads as a chip */
.ssg-oa__closer {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-secondary, #f6f7f9);
  border: 1px solid var(--border-color, #e5e7eb);
  border-left: 3px solid var(--oa-accent);
  font-weight: 700;
  color: var(--oa-strong);
  max-width: var(--oa-measure);
}
.ssg-oa__track-label {
  color: var(--oa-accent);
  margin-bottom: 10px;
}

/* ---------- CALLOUTS / BRIDGE: more interior air, brand-tinted title --- */
.ssg-oa__callout { padding: 15px 18px; margin: 18px 0; max-width: var(--oa-measure); }
.ssg-oa__callout-title { color: var(--oa-accent); }
.ssg-oa__bridge { padding: 13px 16px; max-width: var(--oa-measure); }
.ssg-oa__key { padding: 10px 15px; max-width: var(--oa-measure); }
.ssg-oa__note { max-width: var(--oa-measure); }

/* ---------- FACT STRIP: turn the inline chips into a tidy capped row ---- */
.ssg-oa__strip { max-width: var(--oa-measure); }
.ssg-oa__factchip { padding: 6px 13px; }

/* ---------- TABLES: a hair more padding + rounded header corners ------- */
table.ssg-oa__table thead th,
table.ssg-oa__tbl thead th { padding: 12px 16px; }
table.ssg-oa__table tbody td,
table.ssg-oa__tbl tbody td { padding: 12px 16px; }

/* ---------- MOBILE (<=480px): rail collapses back to inline TOC -------- */
@media (max-width: 999px) {
  .ssg-oa > .ssg-oa__toc { float: none; width: auto; position: static; }
}
@media (max-width: 480px) {
  .ssg-oa__sec > h2,
  .ssg-oa__faq > h2 { font-size: 1.46rem; }
  .ssg-oa__work,
  .ssg-oa__worked { padding: 14px 15px; }
  .ssg-oa__closer { font-size: .9rem; }
  /* generous cell padding on small screens so cells stop feeling cramped */
  table.ssg-oa__table tbody td,
  table.ssg-oa__tbl tbody td { padding: 11px 14px; }
  .ssg-oa__callout,
  .ssg-oa__bridge,
  .ssg-oa__key,
  .ssg-oa__takeaway,
  .ssg-oa__closer { max-width: 100%; }
}

/* =====================================================================
   v4 DESIGN-SYSTEM UPLIFT (shared, generalizable — lifts ALL 3 firm OA pages)
   Visual-panel feedback addressed this pass:
   - Jane Street: flat hierarchy (hero/headings/body near-uniform), hero CTAs
     read as plain links, low-contrast metadata pills, sections separated only
     by thin dividers -> wrap rounds/FAQ as scannable cards.
   - Optiver: paragraph-dense walls, weak intra-section hierarchy, monochrome
     teal-on-white -> introduce a second accent tone, pull-quote + icon-bullet
     affordances, light section bands, tighter mobile table density.
   Pure CSS, additions + overrides only. No selector renamed or removed.
   Both class conventions (.ssg-oa__table/__chip/… AND .ssg-oa__tbl/__strip/…)
   are improved together so every page benefits equally.
   ===================================================================== */
.ssg-oa {
  /* a second, warmer accent used sparingly for variety (pull-quotes, alt
     callouts) so monochrome pages gain a little tonal range without a
     per-firm hack. Stays in the same value family on every theme. */
  --oa-accent-2: #d9822b;
  --oa-accent-2-tint: rgba(217, 130, 43, .08);
  --oa-accent-2-border: rgba(217, 130, 43, .28);
  --oa-card-bg: var(--bg-primary, #fff);
  --oa-card-border: var(--border-color, #e7e9ee);
  --oa-card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .03);
}

/* ---------- HERO: make the H1 truly dominant; lede as clear 2nd tier ----------
   The single biggest "flat hierarchy" lever — give the page one obvious
   focal point at the top so the eye has somewhere to land before the scroll. */
.ssg-oa h1 {
  font-size: clamp(2.05rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 850;
  letter-spacing: -.032em;
  line-height: 1.05;
  color: var(--text-bright, #0b1220);
  margin: 0 0 14px;
}
.ssg-oa__lede {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.28rem);
  line-height: 1.55;
  font-weight: 420;
  color: var(--text-secondary, #475067);
}
.ssg-oa__lede br { display: none; }   /* let the lede wrap naturally to the measure */

/* ---------- HERO CTAs: solid primary + outline secondary, never bare links ----------
   In the shared markup the first CTA is .btn.btn--primary (solid, from
   components.css) and the rest are bare .btn (no fill/border -> they read as
   plain underlined links, exactly the panel complaint). Give every non-primary
   .btn inside the CTA row a real outline-button shell so the action group
   reads as buttons and the primary clearly leads. Scoped to .ssg-oa__ctas so
   nothing else on the site is touched. */
.ssg-oa__ctas { gap: 12px 14px; margin: 20px 0 6px; align-items: stretch; }
.ssg-oa__ctas .btn {
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 650;
  font-size: .95rem;
  line-height: 1.2;
}
/* secondary = any CTA that isn't the primary: outline shell + hover lift */
.ssg-oa__ctas .btn:not(.btn--primary) {
  background: var(--oa-card-bg);
  color: var(--oa-strong);
  border: 1.5px solid var(--oa-card-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  text-decoration: none;
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.ssg-oa__ctas .btn:not(.btn--primary):hover {
  border-color: var(--oa-accent);
  color: var(--oa-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
}
/* make the primary read a notch stronger so it anchors the group */
.ssg-oa__ctas .btn--primary {
  padding: 11px 22px;
  box-shadow: 0 2px 10px rgba(76, 110, 220, .28);
}
.ssg-oa__ctas .btn--primary:hover { transform: translateY(-1px); }

/* ---------- METADATA PILLS / CHIPS: more contrast, subtle fill, more air ----------
   The pill rows were faint gray text on white. Give them a soft filled chip
   with a hairline border and darker label so the tag rows register. Covers
   BOTH chip conventions. ---- */
.ssg-oa__chip,
.ssg-oa__pmchip {
  background: var(--bg-secondary, #f4f5f8);
  color: var(--text-secondary, #4b5563);
  border: 1px solid var(--oa-card-border);
  padding: 4px 11px;
  font-weight: 650;
}
.ssg-oa__chips span {
  background: var(--bg-secondary, #eef0f4);
  color: var(--text-secondary, #4b5563);
  font-weight: 650;
  padding: 3px 9px;
}
.ssg-oa__factchip {
  background: var(--oa-tint);
  color: var(--oa-strong);
  border-color: var(--oa-tint-border);
  font-weight: 650;
}
/* keep the green "free" / amber "hard" accents legible against the new fills */
.ssg-oa__chips .ssg-oa__free,
.ssg-oa__free { color: #15824f; }
.ssg-oa__chips .ssg-oa__hard { color: #b5671f; }

/* ---------- DIFFICULTY tags: a touch more presence (Optiver uses these a lot) */
.ssg-oa__diff { padding: 2px 9px; letter-spacing: .01em; }

/* ---------- SECTION SEPARATION: wrap FAQ Q&A and round bodies as soft cards ----------
   The round/FAQ blocks relied on thin dividers + whitespace and read as one
   undifferentiated scroll. Group each FAQ question with its answer in a light
   surface card so they become distinct, scannable blocks. We target the
   <h3>+<p> pairs the FAQ uses by giving each FAQ h3 a card shell that also
   visually owns the paragraph that follows. ---- */
.ssg-oa__faq h3 {
  margin-top: 14px;
  margin-bottom: 0;
  padding: 16px 18px 4px;
  background: var(--oa-card-bg);
  border: 1px solid var(--oa-card-border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--oa-card-shadow);
  font-size: 1.04rem;
  font-weight: 720;
  color: var(--oa-strong);
}
.ssg-oa__faq h3 + p {
  margin: 0 0 4px;
  padding: 6px 18px 16px;
  background: var(--oa-card-bg);
  border: 1px solid var(--oa-card-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--oa-card-shadow);
  max-width: none;          /* let the card span the prose column fully */
}
/* the FAQ section heading itself stays a plain big H2 (not carded) */
.ssg-oa__faq > h2 { box-shadow: none; }

/* ---------- "ROUND"/content sections: light surface bands for rhythm ----------
   Reinforce the existing alternating tint so the long scroll chunks visibly
   into modules instead of one airy column. Slightly stronger wash + a left
   accent edge on the tinted bands. Generalizable (drives off nth-of-type). */
.ssg-oa__sec:nth-of-type(even)::before {
  background: var(--oa-tint-soft);
  border-top: 1px solid var(--oa-tint-border);
}

/* ---------- PULL-QUOTE / KEY-INSIGHT: break paragraph walls (Optiver) ----------
   Promote the inline key-insight line into a real pull-quote with the SECOND
   accent so dense teal-on-white prose gets tonal variety and a visual rest. */
.ssg-oa__key {
  border-left: 4px solid var(--oa-accent-2);
  background: var(--oa-accent-2-tint);
  font-size: .98rem;
  line-height: 1.6;
  padding: 12px 16px;
}
.ssg-oa__key b { color: var(--oa-strong); }
/* the worked-example takeaway keeps the primary accent; the closer (final
   result) gets the warm accent so the two resting points read distinctly. */
.ssg-oa__closer {
  border-left-color: var(--oa-accent-2);
  background: var(--oa-accent-2-tint);
}

/* ---------- ICON-LED BULLET AFFORDANCE: scannable lists in dense sections ----
   Give plain prose <ul>s inside sections a tidy accent marker so bullet rows
   read as quick-scan rows rather than more running text. Excludes the special
   problem/plan lists which have their own styling. ---- */
.ssg-oa__sec > ul:not(.ssg-oa__list) {
  list-style: none;
  padding-left: 4px;
  margin: 10px 0;
}
.ssg-oa__sec > ul:not(.ssg-oa__list) > li {
  position: relative;
  padding: 3px 0 3px 26px;
  line-height: 1.6;
}
.ssg-oa__sec > ul:not(.ssg-oa__list) > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--oa-accent);
  transform: rotate(45deg);
}

/* ---------- WORKED EXAMPLE: a hair more polish + warm secondary edge option */
.ssg-oa__work,
.ssg-oa__worked { box-shadow: var(--oa-card-shadow); border-radius: 0 10px 10px 0; }
.ssg-oa__work + .ssg-oa__work,
.ssg-oa__worked + .ssg-oa__worked { margin-top: 20px; }

/* ---------- BRIDGE / CALLOUT: clearer surface so they pop off the page ---- */
.ssg-oa__bridge {
  background: var(--oa-tint);
  border-color: var(--oa-tint-border);
}
.ssg-oa__callout { box-shadow: var(--oa-card-shadow); }

/* ---------- TABLE: stronger header band, clearer separation (both kinds) ---- */
table.ssg-oa__table thead th,
table.ssg-oa__tbl thead th {
  background: var(--oa-tint);
  color: var(--oa-strong);
  border-bottom: 2px solid var(--oa-tint-border);
}
.ssg-oa__tablewrap,
.ssg-oa__table-wrap { box-shadow: var(--oa-card-shadow); }

/* ---------- GLANCE STRIP: a bit more presence as a hero stat block --------- */
.ssg-oa__glance { border-color: var(--oa-card-border); box-shadow: var(--oa-card-shadow); }
.ssg-oa__glance dt { color: var(--oa-accent); }

/* ---------- MOBILE (<=480px): more breathing room, tighter table cells ------ */
@media (max-width: 480px) {
  .ssg-oa h1 { font-size: clamp(1.85rem, 7vw, 2.3rem); }
  .ssg-oa__lede { font-size: 1.06rem; }
  /* FAQ cards: a touch less inner padding so they don't feel boxy on a phone */
  .ssg-oa__faq h3 { padding: 14px 15px 4px; }
  .ssg-oa__faq h3 + p { padding: 6px 15px 14px; }
  /* tighten table cell density so compressed tables stop feeling cramped */
  table.ssg-oa__table tbody td,
  table.ssg-oa__tbl tbody td { padding: 10px 12px; font-size: .9rem; }
  table.ssg-oa__table thead th,
  table.ssg-oa__tbl thead th { padding: 10px 12px; }
  /* CTA buttons full-width + centered already; ensure consistent height */
  .ssg-oa__ctas .btn { padding: 13px 18px; }
  /* more vertical air between dense modules on phones */
  .ssg-oa__work,
  .ssg-oa__worked,
  .ssg-oa__callout,
  .ssg-oa__key { margin-top: 16px; margin-bottom: 16px; }
}