/* Options Course landing page.
   Page-specific pieces only. Everything structural (pg-band, pg-card, pg-btn,
   pg-pipe, pg-eyebrow, pg-h2 …) comes from /analyst/assets/program.css, which
   scopes every rule under #ao-gate, so these do too. */

#ao-gate .oc-hero { padding: 76px 0 56px; }
#ao-gate .oc-hero .pg-wrap { text-align: left; }

#ao-gate .oc-hero__grid {
  display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 48px; align-items: center;
}
#ao-gate .oc-hero__h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 800; margin: 0 0 20px; color: #fff;
}
#ao-gate .oc-hero .pg-hero__lead {
  font-size: 1.06rem; line-height: 1.7; color: var(--pg-muted); max-width: 60ch; margin: 0 0 26px;
}
#ao-gate .oc-hero .pg-hero__lead strong { color: #fff; font-weight: 700; }
#ao-gate .oc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
#ao-gate .oc-hero__vat { font-size: 0.82rem; color: var(--pg-muted); margin: 0; }

#ao-gate .oc-hero__pic { position: relative; }
#ao-gate .oc-hero__pic img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.06);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
#ao-gate .oc-hero__badge {
  position: absolute; left: 0; bottom: 8px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--pg-line);
  border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(6px);
}
#ao-gate .oc-hero__badge img { width: auto; height: 16px; filter: none; mask-image: none; -webkit-mask-image: none; }
#ao-gate .oc-hero__badge span { font-size: 0.76rem; color: var(--pg-muted); white-space: nowrap; }

/* headline stats strip */
#ao-gate .oc-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 52px; border-top: 1px solid var(--pg-line); padding-top: 26px;
}
#ao-gate .oc-stats > div { text-align: center; border-left: 1px solid var(--pg-line-soft); padding: 4px 8px; }
#ao-gate .oc-stats > div:first-child { border-left: 0; }
#ao-gate .oc-stats b { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
#ao-gate .oc-stats span { display: block; font-size: 0.76rem; color: var(--pg-muted); margin-top: 3px; }

/* curriculum ------------------------------------------------------------- */
#ao-gate .oc-curric { margin-top: 34px; display: grid; gap: 14px; }
#ao-gate .oc-part {
  border: 1px solid var(--pg-line); border-radius: var(--pg-r);
  background: var(--pg-surface); overflow: hidden;
}
#ao-gate .oc-part > summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center;
}
#ao-gate .oc-part > summary::-webkit-details-marker { display: none; }
#ao-gate .oc-part__n {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(232,99,90,0.14); color: var(--pg-red-br); font-weight: 800; font-size: 0.95rem;
}
#ao-gate .oc-part__t { font-size: 1.08rem; font-weight: 700; color: #fff; margin: 0; }
#ao-gate .oc-part__m { font-size: 0.8rem; color: var(--pg-muted); margin: 3px 0 0; }
#ao-gate .oc-part__time {
  font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--pg-muted);
  border: 1px solid var(--pg-line); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
#ao-gate .oc-part__body { padding: 0 22px 20px 82px; }
#ao-gate .oc-part__blurb { color: var(--pg-muted); font-size: 0.92rem; line-height: 1.65; margin: 0 0 16px; max-width: 72ch; }
#ao-gate .oc-chaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
#ao-gate .oc-chaps li {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--pg-line-soft); font-size: 0.9rem;
}
#ao-gate .oc-chaps li:first-child { border-top: 0; }
#ao-gate .oc-chaps time { font-variant-numeric: tabular-nums; color: var(--pg-red-br); font-weight: 600; font-size: 0.82rem; }
#ao-gate .oc-chaps span { color: #e6dcda; }

/* teacher ---------------------------------------------------------------- */
#ao-gate .oc-teach { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; margin-top: 30px; }
#ao-gate .oc-teach__pic img {
  width: 100%; height: auto; display: block; border-radius: var(--pg-r);
  background: linear-gradient(180deg, #f3eeec, #e7dedb); filter: grayscale(1);
}
#ao-gate .oc-teach__body .pg-lead { margin-bottom: 16px; }
#ao-gate .oc-cv { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
#ao-gate .oc-cv li {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center;
  border: 1px solid var(--pg-line-l); border-radius: 12px; padding: 11px 14px; background: #fff;
}
/* All four marks are dark-on-transparent, so they sit straight on the white
   card with no plate behind them. Cboe ships as SVG and scales cleanly. */
#ao-gate .oc-cv__logo { width: 62px; height: 30px; display: grid; place-items: center; }
#ao-gate .oc-cv__logo img { max-width: 100%; max-height: 22px; width: auto; height: auto; }
#ao-gate .oc-cv b { display: block; font-size: 0.92rem; color: var(--pg-ink-l); }
#ao-gate .oc-cv span { display: block; font-size: 0.8rem; color: var(--pg-muted-l); margin-top: 1px; }
#ao-gate .oc-teach__note { font-size: 0.8rem; color: var(--pg-muted-l); margin: 20px 0 0; font-style: italic; }

/* who it is for ---------------------------------------------------------- */
#ao-gate .oc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
#ao-gate .oc-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
#ao-gate .oc-list li {
  position: relative; padding-left: 30px; font-size: 0.95rem; line-height: 1.6; color: #33302f;
}
#ao-gate .oc-list li::before {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800;
}
#ao-gate .oc-list--yes li::before { content: "✓"; background: #e8f3ec; color: #1c7a45; }
#ao-gate .oc-list--no  li::before { content: "×"; background: #f7e9e8; color: #ae1f19; }

/* buy -------------------------------------------------------------------- */
#ao-gate .oc-buy {
  margin-top: 40px; display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: center;
  border: 1px solid var(--pg-line); border-radius: var(--pg-r);
  background: var(--pg-surface); padding: 30px 32px;
}
#ao-gate .oc-buy__price b { display: block; font-size: 2.9rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; }
#ao-gate .oc-buy__price span { display: block; font-size: 0.8rem; color: var(--pg-muted); margin-top: 8px; }
#ao-gate .oc-buy__meta p { color: var(--pg-muted); font-size: 0.94rem; line-height: 1.6; margin: 0 0 16px; max-width: 56ch; }
#ao-gate .oc-buy__fine { font-size: 0.8rem !important; margin: 14px 0 0 !important; }

/* faq -------------------------------------------------------------------- */
#ao-gate .oc-faq { margin-top: 26px; display: grid; gap: 0; }
#ao-gate .oc-faq details { border-bottom: 1px solid var(--pg-line-l); }
#ao-gate .oc-faq summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-weight: 650; font-size: 0.98rem; color: var(--pg-ink-l);
}
#ao-gate .oc-faq summary::-webkit-details-marker { display: none; }
#ao-gate .oc-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.2rem; color: var(--pg-muted-l); font-weight: 400;
}
#ao-gate .oc-faq details[open] summary::after { content: "–"; }
#ao-gate .oc-faq p { margin: 0 0 18px; font-size: 0.93rem; line-height: 1.65; color: #4b4441; max-width: 78ch; }
#ao-gate .oc-disclaimer {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--pg-line-l);
  font-size: 0.76rem; line-height: 1.6; color: var(--pg-muted-l); max-width: 92ch;
}

/* ------------------------------------------------------------------ small */
@media (max-width: 900px) {
  #ao-gate .oc-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  #ao-gate .oc-hero__pic { max-width: 260px; }
  #ao-gate .oc-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; border-top: 0; }
  #ao-gate .oc-stats > div:nth-child(odd) { border-left: 0; }
  #ao-gate .oc-teach { grid-template-columns: 1fr; gap: 26px; }
  #ao-gate .oc-teach__pic { max-width: 240px; }
  #ao-gate .oc-two { grid-template-columns: 1fr; gap: 34px; }
  #ao-gate .oc-buy { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  #ao-gate .oc-part > summary { grid-template-columns: 36px 1fr; padding: 16px; }
  #ao-gate .oc-part__time { grid-column: 2; justify-self: start; }
  #ao-gate .oc-part__body { padding: 0 16px 18px; }
  #ao-gate .oc-chaps li { grid-template-columns: 62px 1fr; gap: 8px; }
}

/* ═══════════════════════════════════════════ motion + new sections ═══ */

/* hero: slow drifting aurora behind the type, plus a fine grid.
   Both are decorative and are killed under prefers-reduced-motion. */
#ao-gate .oc-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 150%;
  background:
    radial-gradient(38% 44% at 18% 26%, rgba(174,31,25,.34), transparent 62%),
    radial-gradient(32% 40% at 78% 18%, rgba(232,99,90,.20), transparent 66%),
    radial-gradient(40% 46% at 60% 78%, rgba(120,20,16,.24), transparent 68%);
  filter: blur(26px); opacity: .85; pointer-events: none;
  animation: oc-drift 26s ease-in-out infinite alternate;
}
@keyframes oc-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -1.5%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
#ao-gate .oc-hero .pg-wrap { position: relative; z-index: 1; }

#ao-gate .oc-hero__h1 {
  background: linear-gradient(96deg, #fff 22%, #ffd9d5 52%, #fff 78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: oc-sheen 9s ease-in-out infinite;
}
@keyframes oc-sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

#ao-gate .oc-hero__pic img { animation: oc-float 7s ease-in-out infinite; }
@keyframes oc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* primary CTA gets a travelling highlight */
#ao-gate .oc-hero__cta .pg-btn--primary,
#ao-gate .oc-buy .pg-btn--primary { position: relative; overflow: hidden; }
#ao-gate .oc-hero__cta .pg-btn--primary::after,
#ao-gate .oc-buy .pg-btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-18deg); animation: oc-shine 3.6s ease-in-out infinite;
}
@keyframes oc-shine { 0% { left: -55%; } 55%,100% { left: 125%; } }

/* stat counters */
#ao-gate .oc-stats b { font-variant-numeric: tabular-nums; }

/* ── pedigree logo strip ──────────────────────────────────────────────── */
#ao-gate .oc-logos {
  background: var(--pg-ink-2); border-top: 1px solid var(--pg-line-soft);
  border-bottom: 1px solid var(--pg-line-soft); padding: 30px 0 34px;
}
#ao-gate .oc-logos__lbl {
  text-align: center; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pg-muted); margin: 0 0 22px; opacity: .8;
}
#ao-gate .oc-logos__row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(30px, 7vw, 82px); flex-wrap: wrap;
}
#ao-gate .oc-logos__i {
  display: grid; place-items: center; height: 34px;
  opacity: .62; filter: grayscale(1);
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
#ao-gate .oc-logos__i img { max-height: 30px; width: auto; display: block; }
#ao-gate .oc-logos__i--hc img { max-height: 34px; }
#ao-gate .oc-logos__i:hover { opacity: 1; filter: grayscale(0); transform: translateY(-3px); }

/* ── slide filmstrip ──────────────────────────────────────────────────── */
#ao-gate .oc-strip {
  position: relative; overflow: hidden; background: var(--pg-ink);
  padding: 26px 0; border-bottom: 1px solid var(--pg-line-soft);
}
#ao-gate .oc-strip__track {
  display: flex; gap: 14px; width: max-content;
  animation: oc-marquee 70s linear infinite;
}
#ao-gate .oc-strip:hover .oc-strip__track { animation-play-state: paused; }
@keyframes oc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#ao-gate .oc-strip img {
  height: 122px; width: auto; border-radius: 8px; display: block;
  border: 1px solid var(--pg-line); box-shadow: 0 6px 20px rgba(0,0,0,.4);
  opacity: .78; transition: opacity .3s ease, transform .3s ease;
}
#ao-gate .oc-strip img:hover { opacity: 1; transform: translateY(-4px) scale(1.03); }
#ao-gate .oc-strip__fade {
  position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; z-index: 2;
}
#ao-gate .oc-strip__fade--l { left: 0;  background: linear-gradient(90deg, var(--pg-ink), transparent); }
#ao-gate .oc-strip__fade--r { right: 0; background: linear-gradient(270deg, var(--pg-ink), transparent); }

/* ── certificate ──────────────────────────────────────────────────────── */
#ao-gate .oc-certband { overflow: hidden; }
#ao-gate .oc-cert {
  display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 54px; align-items: center;
}
#ao-gate .oc-certlist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
#ao-gate .oc-certlist li {
  position: relative; padding-left: 26px; font-size: 0.93rem; line-height: 1.6; color: var(--pg-muted);
}
#ao-gate .oc-certlist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; color: var(--pg-red-br); font-weight: 800; font-size: 0.85rem;
}
#ao-gate .oc-certlist b { color: #fff; font-weight: 650; }
#ao-gate .oc-cert__pic { margin: 0; perspective: 1400px; }
#ao-gate .oc-cert__pic img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotateY(-8deg) rotateX(2.5deg) translateZ(0);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), box-shadow .7s ease;
}
#ao-gate .oc-cert__pic:hover img {
  transform: rotateY(0deg) rotateX(0deg) scale(1.015);
  box-shadow: 0 38px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.14);
}
#ao-gate .oc-cert__pic figcaption {
  margin-top: 16px; text-align: center; font-size: 0.78rem; color: var(--pg-muted); font-style: italic;
}

/* cards lift on hover */
#ao-gate .pg-card { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
#ao-gate .pg-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.10); }
#ao-gate .pg-band--dark .pg-card:hover { box-shadow: 0 18px 44px rgba(0,0,0,.42); }

/* curriculum rows reveal a rule on hover */
#ao-gate .oc-part { transition: border-color .3s ease, background .3s ease; }
#ao-gate .oc-part:hover { border-color: rgba(232,99,90,.34); background: rgba(255,255,255,.06); }
#ao-gate .oc-part[open] { border-color: rgba(232,99,90,.28); }

@media (max-width: 900px) {
  #ao-gate .oc-cert { grid-template-columns: 1fr; gap: 30px; }
  #ao-gate .oc-cert__pic img { transform: none; }
  #ao-gate .oc-strip img { height: 88px; }
  #ao-gate .oc-logos__row { gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  #ao-gate .oc-hero::before,
  #ao-gate .oc-hero__h1,
  #ao-gate .oc-hero__pic img,
  #ao-gate .oc-strip__track,
  #ao-gate .oc-hero__cta .pg-btn--primary::after,
  #ao-gate .oc-buy .pg-btn--primary::after { animation: none !important; }
  #ao-gate .oc-hero__h1 { -webkit-text-fill-color: #fff; }
}

/* ── video preview still ─────────────────────────────────────────────── */
#ao-gate .oc-prev { background: var(--pg-ink); padding: 54px 0 40px; }
#ao-gate .oc-prev__frame {
  position: relative; margin: 0 auto; max-width: 940px; border-radius: 14px;
  overflow: hidden; border: 1px solid var(--pg-line);
  box-shadow: 0 34px 80px rgba(0,0,0,.55);
}
#ao-gate .oc-prev__frame img { width: 100%; height: auto; display: block; }
#ao-gate .oc-prev__frame::after {           /* darken so the play mark reads */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* The poster is light now, so this is a whisper: the old .46 edge turned the
     cream muddy, and the red play mark reads on cream without any help. */
  background: radial-gradient(62% 62% at 50% 46%, rgba(0,0,0,.02), rgba(20,5,3,.14));
}
#ao-gate .oc-prev__play {
  /* Low, not centred: the poster's own headline owns the middle of the frame. */
  position: absolute; left: 50%; top: 72%; transform: translate(-50%,-50%);
  width: 82px; height: 82px; border-radius: 50%; z-index: 3;
  background: rgba(174,31,25,.94); box-shadow: 0 0 0 0 rgba(174,31,25,.55);
  animation: oc-pulse 2.6s ease-out infinite;
  border: 0; padding: 0; cursor: pointer; appearance: none;
}
#ao-gate .oc-prev__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Once it is playing, the poster treatment gets out of the player's way. */
#ao-gate .oc-prev__frame video { width: 100%; height: auto; display: block; background: #000; }
#ao-gate .oc-prev__frame.is-playing::after,
#ao-gate .oc-prev__frame.is-playing .oc-prev__play,
#ao-gate .oc-prev__frame.is-playing .oc-prev__chip,
#ao-gate .oc-prev__frame.is-playing figcaption { display: none; }
#ao-gate .oc-prev__play::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
@keyframes oc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(174,31,25,.55); }
  70%  { box-shadow: 0 0 0 26px rgba(174,31,25,0); }
  100% { box-shadow: 0 0 0 0 rgba(174,31,25,0); }
}
#ao-gate .oc-prev__chip {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  background: rgba(0,0,0,.66); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px);
}
#ao-gate .oc-prev__frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 18px 14px; text-align: center; font-size: 0.78rem; color: #4a332f;
  /* Light scrim, to sit on the cream poster rather than band it with black. */
  background: linear-gradient(transparent, rgba(250,247,245,.92));
}
@media (prefers-reduced-motion: reduce) { #ao-gate .oc-prev__play { animation: none; } }
@media (max-width: 900px) {
  #ao-gate .oc-prev { padding: 34px 0 26px; }
  #ao-gate .oc-prev__play { width: 60px; height: 60px; }
  #ao-gate .oc-prev__play::before { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
}

/* ═══════════════════════════════════════════ what's inside + clips ═══
   Deep-black, floating, generous negative space. Same register as the Solana
   deck: things hover rather than sit, with a faint chart texture behind. */

#ao-gate .oc-inside,
#ao-gate .oc-clips {
  position: relative; background: #070201; padding: 92px 0 96px; overflow: hidden;
}
#ao-gate .oc-inside::before,
#ao-gate .oc-clips::before {          /* soft off-centre glow, drifting */
  content: ""; position: absolute; inset: -30% -20% auto -20%; height: 160%;
  background:
    radial-gradient(34% 40% at 22% 24%, rgba(174,31,25,.24), transparent 64%),
    radial-gradient(30% 36% at 80% 68%, rgba(232,99,90,.16), transparent 66%);
  filter: blur(40px); pointer-events: none;
  animation: oc-drift 34s ease-in-out infinite alternate;
}
#ao-gate .oc-inside .pg-wrap,
#ao-gate .oc-clips .pg-wrap { position: relative; z-index: 1; }

#ao-gate .oc-inside__h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.02em; color: #fff; margin: 0 0 16px;
}
#ao-gate .oc-inside__lead {
  color: var(--pg-muted); font-size: 1rem; line-height: 1.7;
  max-width: 62ch; margin: 0 auto 56px;
}

#ao-gate .oc-inside__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch;
}
#ao-gate .oc-tile {
  border: 1px solid var(--pg-line); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 34px 32px 30px; backdrop-filter: blur(4px);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .5s ease, box-shadow .5s ease;
}
#ao-gate .oc-tile:hover {
  transform: translateY(-6px); border-color: rgba(232,99,90,.34);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
#ao-gate .oc-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pg-red-br);
  background: rgba(232,99,90,.13); border: 1px solid rgba(232,99,90,.24);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
#ao-gate .oc-tile__h { font-size: 1.18rem; font-weight: 750; color: #fff; margin: 0 0 10px; }
#ao-gate .oc-tile__body p { color: var(--pg-muted); font-size: 0.94rem; line-height: 1.68; margin: 0; }

/* fanned slides, floating */
#ao-gate .oc-fan { position: relative; height: 244px; margin: -34px -30px 26px; perspective: 1000px; overflow: visible; }
#ao-gate .oc-fan__c {
  position: absolute; left: 50%; top: 8px; width: 61%; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 22px 50px rgba(0,0,0,.6);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
#ao-gate .oc-fan__c--3 { transform: translateX(-50%) translate(-96px, 16px) rotate(-9deg); animation: oc-hover3 9s ease-in-out infinite; }
#ao-gate .oc-fan__c--2 { transform: translateX(-50%) translate(0, 0) rotate(0deg);          animation: oc-hover2 8s ease-in-out infinite; }
#ao-gate .oc-fan__c--1 { transform: translateX(-50%) translate(96px, 16px) rotate(9deg);    animation: oc-hover1 10s ease-in-out infinite; z-index: 2; }
@keyframes oc-hover1 { 0%,100%{ transform: translateX(-50%) translate(96px,16px) rotate(9deg);}  50%{ transform: translateX(-50%) translate(96px,4px) rotate(7.5deg);} }
@keyframes oc-hover2 { 0%,100%{ transform: translateX(-50%) translate(0,0) rotate(0deg);}        50%{ transform: translateX(-50%) translate(0,-11px) rotate(0deg);} }
@keyframes oc-hover3 { 0%,100%{ transform: translateX(-50%) translate(-96px,16px) rotate(-9deg);} 50%{ transform: translateX(-50%) translate(-96px,5px) rotate(-7.5deg);} }
#ao-gate .oc-tile:hover .oc-fan__c--3 { transform: translateX(-50%) translate(-126px, 12px) rotate(-13deg); animation: none; }
#ao-gate .oc-tile:hover .oc-fan__c--2 { transform: translateX(-50%) translate(0, -8px) rotate(0deg);        animation: none; }
#ao-gate .oc-tile:hover .oc-fan__c--1 { transform: translateX(-50%) translate(126px, 12px) rotate(13deg);   animation: none; }

/* locked PDFs */
#ao-gate .oc-locked { position: relative; height: 244px; margin: -34px -30px 26px; overflow: visible; }
#ao-gate .oc-locked__p {
  position: absolute; left: 50%; top: 6px; height: 188px; width: auto; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 50px rgba(0,0,0,.62);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
#ao-gate .oc-locked__p--b { transform: translateX(-50%) translate(-56px, 14px) rotate(-7deg); animation: oc-hover3 11s ease-in-out infinite; }
#ao-gate .oc-locked__p--a { transform: translateX(-50%) translate(56px, 0)     rotate(6deg);  animation: oc-hover2 9s ease-in-out infinite; }
#ao-gate .oc-tile:hover .oc-locked__p--b { transform: translateX(-50%) translate(-76px, 10px) rotate(-10deg); animation: none; }
#ao-gate .oc-tile:hover .oc-locked__p--a { transform: translateX(-50%) translate(76px, -6px)  rotate(9deg);   animation: none; }
#ao-gate .oc-locked__lock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12,4,3,.86); border: 1px solid rgba(255,255,255,.2); color: #fff;
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
}

/* clips */
#ao-gate .oc-clips { padding-top: 0; }
#ao-gate .oc-clips__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
#ao-gate .oc-clip { margin: 0; }
#ao-gate .oc-clip video {
  width: 100%; display: block; border-radius: 14px; background: #000;
  border: 1px solid var(--pg-line); box-shadow: 0 22px 54px rgba(0,0,0,.52);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
#ao-gate .oc-clip:hover video { transform: translateY(-5px); box-shadow: 0 30px 68px rgba(0,0,0,.62); }
#ao-gate .oc-clip figcaption { margin-top: 14px; }
#ao-gate .oc-clip figcaption b { display: block; color: #fff; font-size: 0.95rem; font-weight: 700; }
#ao-gate .oc-clip figcaption span { display: block; color: var(--pg-muted); font-size: 0.82rem; margin-top: 4px; line-height: 1.5; }

@media (max-width: 900px) {
  #ao-gate .oc-inside, #ao-gate .oc-clips { padding: 56px 0 60px; }
  #ao-gate .oc-inside__grid { grid-template-columns: 1fr; gap: 22px; }
  #ao-gate .oc-clips__grid { grid-template-columns: 1fr; gap: 22px; }
  #ao-gate .oc-fan, #ao-gate .oc-locked { height: 172px; }
  #ao-gate .oc-fan__c--3 { transform: translateX(-50%) translate(-68px,14px) rotate(-9deg); }
  #ao-gate .oc-fan__c--1 { transform: translateX(-50%) translate(68px,14px) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  #ao-gate .oc-inside::before, #ao-gate .oc-clips::before,
  #ao-gate .oc-fan__c, #ao-gate .oc-locked__p { animation: none !important; }
}

/* Cboe ships as a colour SVG with no white variant, so it is inverted to read
   on the dark pedigree strip. The CV card version stays colour on white. */
#ao-gate .oc-logos__i--cboe img { max-height: 24px; filter: invert(1) brightness(1.9); }
#ao-gate .oc-logos__i--cboe:hover img { filter: invert(1) brightness(2.1); }

/* ── pedigree strip, emphasised ──────────────────────────────────────────
   Down to the three firms he traded and taught at, so each one gets more
   room and reads at a glance instead of being a faint row of marks. */
#ao-gate .oc-logos { padding: 40px 0 46px; }
#ao-gate .oc-logos__lbl { margin-bottom: 30px; opacity: 1; color: #b9a7a4; }
#ao-gate .oc-logos__row { gap: clamp(38px, 9vw, 108px); }
#ao-gate .oc-logos__i { height: 54px; opacity: .82; }
#ao-gate .oc-logos__i img { max-height: 46px; }
#ao-gate .oc-logos__i--optiver img { max-height: 60px; }   /* wordmark runs small */
#ao-gate .oc-logos__i--maven img   { max-height: 52px; }
#ao-gate .oc-logos__i--cboe img    { max-height: 34px; }
#ao-gate .oc-logos__i:hover { opacity: 1; transform: translateY(-4px); }

/* Hubens Capital under the portrait: his own brand, not a former employer */
#ao-gate .oc-hero__mark {
  margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#ao-gate .oc-hero__mark img {
  height: 34px; width: auto; opacity: .95;
  filter: none; -webkit-mask-image: none; mask-image: none; animation: none;
}
#ao-gate .oc-hero__mark span {
  font-size: 0.7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pg-muted); font-weight: 700;
}
#ao-gate .oc-hero__mark > a:first-child { display: block; line-height: 0; }
#ao-gate .oc-hero__mark > a:first-child:hover img { opacity: 1; }
#ao-gate .oc-hero__li {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--pg-muted); text-decoration: none;
  border: 1px solid var(--pg-line); border-radius: 999px; padding: 6px 13px;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
#ao-gate .oc-hero__li svg { width: 14px; height: 14px; flex: none; }
#ao-gate .oc-hero__li:hover { color: #fff; border-color: rgba(232,99,90,.45); background: rgba(232,99,90,.1); }

@media (max-width: 900px) {
  #ao-gate .oc-logos__i { height: 42px; }
  #ao-gate .oc-logos__i--optiver img { max-height: 46px; }
  #ao-gate .oc-logos__i--maven img   { max-height: 40px; }
  #ao-gate .oc-logos__i--cboe img    { max-height: 26px; }
}

/* ── tiles: let the art break the box ────────────────────────────────────
   The fan and the PDF pair are pulled out past the tile edge on both sides and
   above it, so they read as floating over the section rather than parked in a
   panel. The tile keeps overflow visible; the extra container height is what
   stops them landing on the copy. */
#ao-gate .oc-tile { overflow: visible; padding-top: 52px; }
#ao-gate .oc-fan__c--3 { transform: translateX(-50%) translate(-138px, 22px) rotate(-12deg); }
#ao-gate .oc-fan__c--2 { transform: translateX(-50%) translate(0, -6px) rotate(0deg); }
#ao-gate .oc-fan__c--1 { transform: translateX(-50%) translate(138px, 22px) rotate(12deg); }
@keyframes oc-hover1 { 0%,100%{ transform: translateX(-50%) translate(138px,22px) rotate(12deg);}  50%{ transform: translateX(-50%) translate(138px,8px) rotate(10deg);} }
@keyframes oc-hover2 { 0%,100%{ transform: translateX(-50%) translate(0,-6px) rotate(0deg);}       50%{ transform: translateX(-50%) translate(0,-19px) rotate(0deg);} }
@keyframes oc-hover3 { 0%,100%{ transform: translateX(-50%) translate(-138px,22px) rotate(-12deg);} 50%{ transform: translateX(-50%) translate(-138px,10px) rotate(-10deg);} }
#ao-gate .oc-tile:hover .oc-fan__c--3 { transform: translateX(-50%) translate(-176px, 16px) rotate(-16deg); }
#ao-gate .oc-tile:hover .oc-fan__c--2 { transform: translateX(-50%) translate(0, -16px) rotate(0deg); }
#ao-gate .oc-tile:hover .oc-fan__c--1 { transform: translateX(-50%) translate(176px, 16px) rotate(16deg); }
#ao-gate .oc-fan__c { width: 56%; }
#ao-gate .oc-locked__p { height: 212px; top: 10px; }
#ao-gate .oc-locked__p--b { transform: translateX(-50%) translate(-84px, 12px) rotate(-9deg); }
#ao-gate .oc-locked__p--a { transform: translateX(-50%) translate(84px, -4px) rotate(8deg); }
#ao-gate .oc-tile:hover .oc-locked__p--b { transform: translateX(-50%) translate(-112px, 8px) rotate(-12deg); }
#ao-gate .oc-tile:hover .oc-locked__p--a { transform: translateX(-50%) translate(112px, -12px) rotate(11deg); }

/* ── what you get: numbered rows, deliberately not another 4-card grid ── */
#ao-gate .oc-get { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: g; }
#ao-gate .oc-get li {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 26px; align-items: center;
  padding: 26px 4px; border-top: 1px solid var(--pg-line-l);
  transition: background .3s ease, padding .3s ease;
}
#ao-gate .oc-get li:last-child { border-bottom: 1px solid var(--pg-line-l); }
#ao-gate .oc-get li:hover { background: rgba(174,31,25,.035); padding-left: 14px; padding-right: 14px; }
#ao-gate .oc-get__n {
  font-size: 1.5rem; font-weight: 800; color: var(--pg-red); opacity: .34;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
#ao-gate .oc-get h3 { font-size: 1.16rem; font-weight: 750; color: var(--pg-ink-l); margin: 0 0 6px; }
#ao-gate .oc-get p { font-size: .94rem; line-height: 1.65; color: #4b4441; margin: 0; max-width: 68ch; }
#ao-gate .oc-get__k {
  font-size: 1.05rem; font-weight: 800; color: var(--pg-red); white-space: nowrap;
  border: 1px solid rgba(174,31,25,.24); border-radius: 999px; padding: 8px 16px;
  background: rgba(174,31,25,.05);
}

/* ── buy band ───────────────────────────────────────────────────────── */
#ao-gate .oc-buy {
  position: relative; overflow: hidden;
  grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
  padding: 44px 46px; border-radius: 24px;
  border: 1px solid rgba(232,99,90,.30);
  background: linear-gradient(150deg, rgba(174,31,25,.20), rgba(255,255,255,.03) 55%);
}
#ao-gate .oc-buy__glow {
  position: absolute; inset: -60% -30% auto -30%; height: 200%; pointer-events: none;
  background: radial-gradient(38% 42% at 24% 30%, rgba(232,99,90,.34), transparent 66%);
  filter: blur(40px); animation: oc-drift 22s ease-in-out infinite alternate;
}
#ao-gate .oc-buy__l, #ao-gate .oc-buy__r { position: relative; z-index: 1; }
#ao-gate .oc-buy__eyebrow {
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pg-red-br); margin: 0 0 12px;
}
#ao-gate .oc-buy__price b {
  display: block; font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1;
  letter-spacing: -.03em; white-space: nowrap;
}
/* price reads as one number; no raised cents */
#ao-gate .oc-buy__price em { display: block; font-style: normal; font-size: .82rem; color: var(--pg-muted); margin-top: 10px; }
#ao-gate .oc-buy__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 9px; }
#ao-gate .oc-buy__list li {
  position: relative; padding-left: 26px; font-size: .92rem; color: #e3d6d4; line-height: 1.5;
}
#ao-gate .oc-buy__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--pg-red-br); font-weight: 800; font-size: .8rem;
}
#ao-gate .oc-buy__cta { font-size: 1.06rem; padding: 17px 34px; width: 100%; text-align: center; }
#ao-gate .oc-buy__fine { font-size: .8rem; color: var(--pg-muted); margin: 14px 0 0; line-height: 1.55; }
#ao-gate .oc-buy__trust {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--pg-line-soft);
}
#ao-gate .oc-buy__trust span {
  font-size: .72rem; color: var(--pg-muted);
  border: 1px solid var(--pg-line); border-radius: 999px; padding: 5px 11px;
}

@media (max-width: 900px) {
  #ao-gate .oc-tile { padding-top: 40px; }
  #ao-gate .oc-fan, #ao-gate .oc-locked { margin-left: -14px; margin-right: -14px; height: 200px; }
  #ao-gate .oc-fan__c--3 { transform: translateX(-50%) translate(-92px,20px) rotate(-11deg); }
  #ao-gate .oc-fan__c--1 { transform: translateX(-50%) translate(92px,20px) rotate(11deg); }
  #ao-gate .oc-locked__p { height: 172px; }
  #ao-gate .oc-locked__p--b { transform: translateX(-50%) translate(-58px,12px) rotate(-9deg); }
  #ao-gate .oc-locked__p--a { transform: translateX(-50%) translate(58px,-4px) rotate(8deg); }
  #ao-gate .oc-get li { grid-template-columns: 46px 1fr; gap: 14px; }
  #ao-gate .oc-get__k { grid-column: 2; justify-self: start; }
  #ao-gate .oc-buy { grid-template-columns: 1fr; padding: 30px 24px; gap: 26px; }
  #ao-gate .oc-buy__price b { font-size: 3rem; }
}

/* ── the CTA as a block, not a pill ──────────────────────────────────────
   Takes the whole right half of the buy band and reads as a panel you press,
   which at this point in the page is the only thing left to do. */
#ao-gate .oc-buy { grid-template-columns: 1fr 1fr; align-items: stretch; }
#ao-gate .oc-buy__l { display: flex; flex-direction: column; justify-content: center; }
#ao-gate .oc-buy__r { display: flex; flex-direction: column; }

#ao-gate .oc-cta {
  position: relative; overflow: hidden; flex: 1 1 auto;
  display: grid; align-content: center; justify-items: center; gap: 6px;
  min-height: 236px; padding: 34px 26px; border-radius: 20px;
  background: linear-gradient(160deg, #c4241d, #8e1814);
  color: #fff; text-decoration: none; text-align: center;
  box-shadow: 0 20px 50px rgba(174,31,25,.42), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, filter .3s ease;
}
#ao-gate .oc-cta:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 30px 68px rgba(174,31,25,.55), inset 0 1px 0 rgba(255,255,255,.24);
  filter: saturate(1.08);
}
#ao-gate .oc-cta:active { transform: translateY(-1px) scale(.997); }
#ao-gate .oc-cta__t {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
}
#ao-gate .oc-cta__s { font-size: .85rem; color: rgba(255,255,255,.82); font-weight: 500; }
#ao-gate .oc-cta__a {
  margin-top: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.25rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
#ao-gate .oc-cta:hover .oc-cta__a { transform: translateX(5px); background: rgba(255,255,255,.26); }
/* travelling highlight, same idea as the hero button */
#ao-gate .oc-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); animation: oc-shine 4.2s ease-in-out infinite;
}
#ao-gate .oc-buy__r .oc-buy__fine { margin-top: 14px; text-align: center; }
#ao-gate .oc-buy__r .oc-buy__trust { justify-content: center; }

@media (max-width: 900px) {
  #ao-gate .oc-buy { grid-template-columns: 1fr; }
  #ao-gate .oc-cta { min-height: 168px; padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) { #ao-gate .oc-cta::after { animation: none; } }

/* ── tile art, made zoom-proof ────────────────────────────────────────────
   These were absolutely positioned with pixel translates inside a fluid tile,
   so any zoom or width change moved them independently of the box and they
   collided with the copy. Now they are flex children sized as a percentage of
   the tile, overlapped with negative margins, so the whole arrangement scales
   as one thing at any zoom. */
#ao-gate .oc-fan,
#ao-gate .oc-locked {
  height: auto; display: flex; justify-content: center; align-items: flex-start;
  margin: -18px -12px 24px; padding-top: 10px; perspective: none;
}

#ao-gate .oc-fan__c,
#ao-gate .oc-locked__p {
  position: static; left: auto; top: auto; width: auto; height: auto;
  flex: 0 0 auto; animation: none;
}

/* three slides, fanned */
#ao-gate .oc-fan__c { width: 42%; max-width: 190px; }
#ao-gate .oc-fan__c--3 { transform: rotate(-11deg) translateY(12px); margin-right: -9%; z-index: 1; }
#ao-gate .oc-fan__c--2 { transform: rotate(0deg)   translateY(-4px); z-index: 3; }
#ao-gate .oc-fan__c--1 { transform: rotate(11deg)  translateY(12px); margin-left: -9%; z-index: 2; }
#ao-gate .oc-tile:hover .oc-fan__c--3 { transform: rotate(-15deg) translateY(6px)  translateX(-8%); }
#ao-gate .oc-tile:hover .oc-fan__c--2 { transform: rotate(0deg)   translateY(-12px); }
#ao-gate .oc-tile:hover .oc-fan__c--1 { transform: rotate(15deg)  translateY(6px)  translateX(8%); }

/* two documents, portrait */
#ao-gate .oc-locked__p { width: 30%; max-width: 132px; }
#ao-gate .oc-locked__p--b { transform: rotate(-8deg) translateY(8px); margin-right: -7%; z-index: 1; }
#ao-gate .oc-locked__p--a { transform: rotate(7deg)  translateY(-4px); margin-left: -7%; z-index: 2; }
#ao-gate .oc-tile:hover .oc-locked__p--b { transform: rotate(-11deg) translateY(4px)  translateX(-7%); }
#ao-gate .oc-tile:hover .oc-locked__p--a { transform: rotate(10deg)  translateY(-10px) translateX(7%); }

/* the lock sits over the pair, centred on the flex row rather than on a
   hard-coded box height */
#ao-gate .oc-locked { position: relative; }
#ao-gate .oc-locked__lock { top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media (max-width: 900px) {
  #ao-gate .oc-fan, #ao-gate .oc-locked { margin-left: -6px; margin-right: -6px; }
  #ao-gate .oc-fan__c   { width: 40%; }
  #ao-gate .oc-locked__p { width: 29%; }
}

/* Optiver centred and dominant: ten of the years on that strip are his, so it
   carries the row rather than sitting first in a line of equals. */
#ao-gate .oc-logos__i--optiver { height: 76px; opacity: .95; }
#ao-gate .oc-logos__i--optiver img { max-height: 76px; }
#ao-gate .oc-logos__i--maven img { max-height: 44px; }
#ao-gate .oc-logos__i--cboe  img { max-height: 30px; }
#ao-gate .oc-logos__i--maven, #ao-gate .oc-logos__i--cboe { opacity: .68; }
#ao-gate .oc-logos__i--maven:hover, #ao-gate .oc-logos__i--cboe:hover { opacity: 1; }
@media (max-width: 900px) {
  #ao-gate .oc-logos__i--optiver, #ao-gate .oc-logos__i--optiver img { height: 54px; max-height: 54px; }
  #ao-gate .oc-logos__i--maven img { max-height: 34px; }
  #ao-gate .oc-logos__i--cboe  img { max-height: 24px; }
}

/* four stats now, not five */
#ao-gate .oc-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { #ao-gate .oc-stats { grid-template-columns: repeat(2, 1fr); } }

/* numbers in the lead carry the claim, so let them read as numbers */
#ao-gate .pg-hero__lead .num {
  font-style: normal; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, transparent 62%, rgba(232,99,90,.34) 62%);
  padding: 0 2px;
}
#ao-gate .oc-br { display: none; }
@media (min-width: 1100px) { #ao-gate .oc-br { display: inline; } }

/* second lead paragraph: the specifics, set smaller than the claim above it */
#ao-gate .oc-hero__sub {
  font-size: .96rem; line-height: 1.7; color: var(--pg-muted);
  max-width: 58ch; margin: 0 0 26px;
}
#ao-gate .oc-hero__sub .num {
  font-style: normal; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, transparent 62%, rgba(232,99,90,.34) 62%); padding: 0 2px;
}
#ao-gate .oc-hero .pg-hero__lead { margin-bottom: 14px; }

/* tenure on each CV row, since the years are the credential */
#ao-gate .oc-cv li { grid-template-columns: 46px 1fr auto; }
#ao-gate .oc-cv__yrs {
  font-style: normal; font-weight: 800; font-size: .78rem; color: var(--pg-red);
  background: rgba(174,31,25,.07); border: 1px solid rgba(174,31,25,.2);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
@media (max-width: 900px) {
  #ao-gate .oc-cv li { grid-template-columns: 40px 1fr; }
  #ao-gate .oc-cv__yrs { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* the list now lives inside "what it is", so it needs its own breathing room
   and a rule to separate it from the four cards above */
#ao-gate .oc-getintro {
  margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--pg-line-l);
}
#ao-gate .oc-getintro .pg-h2 { margin-bottom: 0; }

/* Optiver larger again: it is the headline credential on the strip, so let it
   dominate rather than merely lead. The row grows to fit it. */
#ao-gate .oc-logos { padding: 46px 0 52px; }
#ao-gate .oc-logos__row { gap: clamp(30px, 7vw, 84px); }
#ao-gate .oc-logos__i--optiver { height: 108px; opacity: 1; }
#ao-gate .oc-logos__i--optiver img { max-height: 108px; }
#ao-gate .oc-logos__i--maven img { max-height: 40px; }
#ao-gate .oc-logos__i--cboe  img { max-height: 27px; }
@media (max-width: 900px) {
  #ao-gate .oc-logos__i--optiver, #ao-gate .oc-logos__i--optiver img { height: 72px; max-height: 72px; }
  #ao-gate .oc-logos__i--maven img { max-height: 30px; }
  #ao-gate .oc-logos__i--cboe  img { max-height: 21px; }
}

/* Cboe up too: its lockup is wide, so it needs less height for equal presence,
   but it was reading as an afterthought next to the other two. */
#ao-gate .oc-logos__i--cboe img { max-height: 44px; }
#ao-gate .oc-logos__i--maven img { max-height: 52px; }
#ao-gate .oc-logos__i--cboe, #ao-gate .oc-logos__i--maven { opacity: .82; }
@media (max-width: 900px) {
  #ao-gate .oc-logos__i--cboe  img { max-height: 30px; }
  #ao-gate .oc-logos__i--maven img { max-height: 36px; }
}

/* Maven back down: its wordmark is visually heavy, so at equal height it was
   competing with Optiver rather than flanking it. */
#ao-gate .oc-logos__i--maven img { max-height: 40px; }
@media (max-width: 900px) { #ao-gate .oc-logos__i--maven img { max-height: 27px; } }

/* room between the CV rows and the licence line under them */
#ao-gate .oc-cv { margin-bottom: 8px; }
#ao-gate .oc-cv li { padding: 13px 16px; }
#ao-gate .oc-teach__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pg-line-l); }

/* ── CTA block, second pass ──────────────────────────────────────────────
   Reads top to bottom as a single offer rather than a button with a caption. */
#ao-gate .oc-cta {
  gap: 0; padding: 38px 28px; min-height: 300px;
  background:
    radial-gradient(120% 90% at 50% 0%, #d0291f 0%, #a81a14 55%, #7d1310 100%);
}
#ao-gate .oc-cta__k {
  font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 10px;
}
/* The one line the whole block is built around, so it carries the heaviest cut of
   Chivo rather than the browser's synthetic bold. 900 needs the font actually
   loaded — see the Google Fonts link in index.html. */
#ao-gate .oc-cta__t {
  font-family: 'Chivo', var(--aic-font);
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900;
  letter-spacing: -.032em; line-height: 1;
  text-wrap: balance;
}

/* ── owned state ─────────────────────────────────────────────────────────
   "Open the course" is a longer string than "Get access", so it needs a touch
   more room before it wraps, and it is a destination rather than a purchase:
   slightly calmer eyebrow, no price line. */
#ao-gate .oc-cta[data-oc-owned] .oc-cta__t {
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
}
#ao-gate .oc-cta[data-oc-owned] .oc-cta__k { color: rgba(255,255,255,.78); }

/* ── CTA label variants ──────────────────────────────────────────────────
   Three labels live in the markup (data-oc-l = buy / own / wait) and
   <html data-oc> shows one. An inline script in the head sets the attribute
   from localStorage hints before first paint, so a buyer never sees "Get
   access" and a signed-in visitor sees a checking state rather than a label
   that flips a few seconds in. No attribute means buy. */
[data-oc-l] { display: none; }
html:not([data-oc]) [data-oc-l="buy"],
html[data-oc="buy"]  [data-oc-l="buy"]  { display: inline; }
html[data-oc="own"]  [data-oc-l="own"]  { display: inline; }
html[data-oc="wait"] [data-oc-l="wait"] { display: inline; }
/* the owned sizing above keys off the element; give the first paint the same */
html[data-oc="own"] #ao-gate .oc-cta__t { font-size: clamp(1.55rem, 2.7vw, 2.15rem); }
html[data-oc="own"] #ao-gate .oc-cta__k { color: rgba(255,255,255,.78); }
/* checking: a slow breathe on the label, nothing that looks broken */
html[data-oc="wait"] #ao-gate .oc-cta__t,
html[data-oc="wait"] #ao-gate .oc-hero__cta .pg-btn--primary { animation: oc-checking 1.1s ease-in-out infinite alternate; }
@keyframes oc-checking { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  html[data-oc="wait"] #ao-gate .oc-cta__t,
  html[data-oc="wait"] #ao-gate .oc-hero__cta .pg-btn--primary { animation: none; opacity: .8; }
}

/* No price on the button. It is already stated three times on the way down
   (hero sub-line, the buy card beside this button, and step 1 of the pipe), so
   repeating it on the button itself was the fourth. .oc-cta__p is gone with it. */
#ao-gate .oc-cta__a {
  margin-top: 20px; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: #a81a14; border: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
#ao-gate .oc-cta:hover .oc-cta__a { transform: translateX(6px); background: #fff; }
#ao-gate .oc-cta__f {
  margin-top: 18px; font-size: .76rem; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 14px; width: 100%;
}

/* ── measure ─────────────────────────────────────────────────────────────
   Several blocks were capped far below the column they sit in, so they read as
   narrow ribbons inside wide bands. Let them use the width they are given. */
#ao-gate .oc-disclaimer { max-width: none; }
#ao-gate .oc-hero__sub { max-width: 72ch; }
#ao-gate .oc-get p { max-width: none; }
#ao-gate .oc-part__blurb { max-width: none; }
#ao-gate .oc-buy__meta p { max-width: none; }
#ao-gate .pg-band .pg-lead { max-width: 88ch; }
#ao-gate .pg-center .pg-lead { max-width: 88ch; margin-left: auto; margin-right: auto; }
#ao-gate .oc-inside__lead { max-width: 88ch; }
#ao-gate .oc-teach__body .pg-lead { max-width: none; }

/* hero copy: two paragraphs, even rhythm, no forced breaks */
#ao-gate .oc-hero .pg-hero__lead { margin: 0 0 16px; max-width: 68ch; }
#ao-gate .oc-hero__sub { margin: 0 0 28px; max-width: 68ch; }

/* ── floating desk icons ─────────────────────────────────────────────────
   Drifting line art behind the top of the page: the things actually on an
   options desk. Each icon carries its own position, size, delay and duration
   as custom properties, so one keyframe animates all ten out of phase.
   Decorative only, and killed entirely under reduced motion. */
#ao-gate .oc-float {
  position: absolute; inset: 0 0 auto 0; height: 190vh;
  pointer-events: none; overflow: hidden; z-index: 0;
}
#ao-gate .oc-float img {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: auto; opacity: 0;
  /* the art ships white; tint to brand red and let it glow */
  filter: brightness(0) saturate(100%) invert(18%) sepia(72%) saturate(4200%)
          hue-rotate(354deg) brightness(88%) contrast(96%)
          drop-shadow(0 0 12px rgba(232, 99, 90, .55));
  animation: oc-drift-icon var(--t, 24s) ease-in-out var(--d, 0s) infinite;
}
@keyframes oc-drift-icon {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1);      opacity: 0; }
  12%  { opacity: .42; }
  25%  { transform: translate(26px, -46px) rotate(8deg) scale(1.05); opacity: .5; }
  50%  { transform: translate(-18px, -76px) rotate(-6deg) scale(.97); opacity: .38; }
  75%  { transform: translate(20px, -40px) rotate(5deg) scale(1.03);  opacity: .46; }
  88%  { opacity: .3; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1);      opacity: 0; }
}
/* the hero sits above them, and its own aurora still reads */
#ao-gate .oc-hero, #ao-gate .oc-logos, #ao-gate .oc-prev { position: relative; z-index: 1; }
#ao-gate .oc-hero { background: transparent; }

@media (max-width: 900px) {
  /* fewer, smaller: on a phone this is noise rather than atmosphere */
  #ao-gate .oc-float img:nth-child(n+6) { display: none; }
  #ao-gate .oc-float img { width: calc(var(--s) * .66); }
}
@media (prefers-reduced-motion: reduce) { #ao-gate .oc-float { display: none; } }

/* ── floating tokens, second pass ────────────────────────────────────────
   The art is now a rendered dark token on its own black ground rather than
   flat line work, so drop the red tint (it is already red) and composite with
   `screen`: black contributes nothing, the engraving and its glow come
   through, and no square edge shows against the page. The asset keeps its
   background exactly as generated. */
#ao-gate .oc-float img {
  mix-blend-mode: screen;
  filter: none;
  border-radius: 0;
}
#ao-gate .oc-float img { --s-mult: 1.9; width: calc(var(--s) * var(--s-mult)); }
@keyframes oc-drift-icon {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1);           opacity: 0; }
  14%  { opacity: .60; }
  25%  { transform: translate(24px, -44px) rotate(6deg) scale(1.04);  opacity: .72; }
  50%  { transform: translate(-16px, -74px) rotate(-4deg) scale(.98); opacity: .55; }
  75%  { transform: translate(18px, -38px) rotate(4deg) scale(1.02);  opacity: .66; }
  88%  { opacity: .4; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1);           opacity: 0; }
}
@media (max-width: 900px) { #ao-gate .oc-float img { width: calc(var(--s) * 1.2); } }

/* Cboe ships as a light-background logo (navy ink, green accent). Greyscale hid
   that, but hover restored the true colours and it read as inverted on the dark
   strip. It now uses a white cut, so hover only changes opacity, never hue. */
#ao-gate .oc-logos__i--cboe { filter: none; }
#ao-gate .oc-logos__i--cboe:hover { filter: none; }

/* ── float layer, contained ──────────────────────────────────────────────
   It used to be 190vh tall and hung off the page wrapper, so tokens drifted
   past the dark sections and over the cream band. `screen` against a light
   ground turns their black background WHITE, which is where the white squares
   came from. Bounding it to the hero means it can only ever composite against
   dark, which is the one condition `screen` needs. */
#ao-gate .oc-float {
  position: absolute; inset: 0; height: 100%;
  overflow: hidden; z-index: 0; pointer-events: none;
}
#ao-gate .oc-hero { position: relative; overflow: hidden; }
#ao-gate .oc-hero .pg-wrap { position: relative; z-index: 2; }
/* smaller drift, since the box is now one section rather than two screens */
@keyframes oc-drift-icon {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1);          opacity: 0; }
  16%  { opacity: .55; }
  30%  { transform: translate(18px, -26px) rotate(5deg) scale(1.03); opacity: .66; }
  55%  { transform: translate(-12px, -44px) rotate(-4deg) scale(.98); opacity: .5; }
  78%  { transform: translate(14px, -22px) rotate(3deg) scale(1.02);  opacity: .6; }
  90%  { opacity: .35; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1);          opacity: 0; }
}

/* ── fixes after screenshotting the live page ────────────────────────────
   1. I set the hero to `background: transparent` while adding the float layer
      so the tokens would show through. That removed the dark ground entirely,
      leaving a white hero, and `screen` against white turns every token into a
      grey square. The hero needs its own dark background; the tokens sit above
      it and composite against that, not against the page.
   2. Cboe was still picking up the strip's greyscale/hover colour handling.
      Pin it hard: the file is already the correct white-on-transparent cut, so
      it must never be filtered. */
#ao-gate .oc-hero.oc-hero {
  background:
    radial-gradient(120% 90% at 50% -10%, #1d0807 0%, #140503 55%, #0e0302 100%);
}
#ao-gate .oc-logos .oc-logos__i--cboe,
#ao-gate .oc-logos .oc-logos__i--cboe:hover,
#ao-gate .oc-logos .oc-logos__i--cboe img,
#ao-gate .oc-logos .oc-logos__i--cboe:hover img {
  filter: none !important;
  mix-blend-mode: normal;
}

/* ── tokens: cut out, not blended ────────────────────────────────────────
   The black square is gone from the assets themselves now (circular alpha),
   so drop `screen` entirely. Normal compositing means they work on any
   background and cannot produce a white or grey box if a section's colour
   ever changes again. */
#ao-gate .oc-float img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 14px rgba(232, 99, 90, .35));
}

/* ── hero checklist ──────────────────────────────────────────────────────
   The second paragraph was doing too much work as prose. As a list it reads
   as an offer: what is in the box, one line each. */
#ao-gate .oc-hero__list {
  list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; max-width: 64ch;
}
#ao-gate .oc-hero__list li {
  position: relative; padding-left: 30px; font-size: .95rem; line-height: 1.55;
  color: var(--pg-muted);
}
#ao-gate .oc-hero__list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(232,99,90,.16); border: 1px solid rgba(232,99,90,.42);
}
#ao-gate .oc-hero__list li::after {
  content: ""; position: absolute; left: 6.5px; top: 8px;
  width: 5px; height: 9px; border: solid var(--pg-red-br);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#ao-gate .oc-hero__list b { color: #fff; font-weight: 700; }
#ao-gate .oc-hero__for {
  font-size: .88rem; line-height: 1.6; color: var(--pg-muted); max-width: 62ch;
  margin: 0 0 26px; padding-top: 14px; border-top: 1px solid var(--pg-line-soft);
}
@media (max-width: 900px) { #ao-gate .oc-hero__list li { font-size: .88rem; } }

/* ── hero checklist as a grid ────────────────────────────────────────────
   Out of the narrow text column and across the full hero: three points on the
   first row, two on the second. Five items in a three-column grid falls that
   way naturally, so no explicit placement is needed. */
#ao-gate .oc-hero__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px 34px; max-width: none; margin: 34px 0 0;
  padding-top: 30px; border-top: 1px solid var(--pg-line);
}
#ao-gate .oc-hero__list li { font-size: .9rem; line-height: 1.55; padding-left: 28px; }
#ao-gate .oc-hero__list li::before { top: 2px; }
#ao-gate .oc-hero__list li::after { top: 7px; }
#ao-gate .oc-stats { margin-top: 34px; }

@media (max-width: 1000px) { #ao-gate .oc-hero__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #ao-gate .oc-hero__list { grid-template-columns: 1fr; } }

/* ── hero checklist: six points, three across ────────────────────────── */
#ao-gate .oc-hero__list { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
/* This unconditional rule sits after the breakpoints above and was beating
   them, so the six points stayed in three columns all the way down to a phone.
   Restate the narrow cases here, where they win. */
@media (max-width: 1000px) { #ao-gate .oc-hero__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { #ao-gate .oc-hero__list { grid-template-columns: 1fr; gap: 12px; } }

/* ── pedigree, now the loudest thing in the hero ──────────────────────────
   It used to be a quiet greyscale band below the fold. Three desks of that
   calibre are the reason anyone buys this, so they get full colour, glass
   plaques and real size, sitting directly under the price.

   Sizes here are the final word: the file above holds several rounds of
   per-logo tuning and this block is appended last on purpose. */
#ao-gate .oc-logos--hero {
  background: none; border: 0; padding: 34px 0 0; margin: 30px 0 0;
  border-top: 1px solid var(--pg-line);
}
#ao-gate .oc-logos--hero .oc-logos__lbl {
  display: flex; align-items: center; gap: 16px;
  font-size: .7rem; letter-spacing: .2em; opacity: 1;
  color: var(--pg-red-br); margin: 0 0 22px;
}
#ao-gate .oc-logos--hero .oc-logos__lbl::before,
#ao-gate .oc-logos--hero .oc-logos__lbl::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,99,90,.42), transparent);
}
#ao-gate .oc-logos--hero .oc-logos__lbl span { flex: 0 0 auto; }

#ao-gate .oc-logos--hero .oc-logos__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
}
#ao-gate .oc-logos--hero .oc-logos__i {
  height: auto; min-height: 118px; padding: 18px 22px;
  opacity: 1; filter: none;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--pg-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
#ao-gate .oc-logos--hero .oc-logos__i:hover {
  transform: translateY(-5px);
  border-color: rgba(232,99,90,.5);
  background: linear-gradient(160deg, rgba(232,99,90,.14), rgba(255,255,255,.02));
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(232,99,90,.22),
              inset 0 1px 0 rgba(255,255,255,.1);
}
#ao-gate .oc-logos--hero .oc-logos__i img { filter: none; width: auto; }
#ao-gate .oc-logos--hero .oc-logos__i--optiver img { max-height: 104px; }
#ao-gate .oc-logos--hero .oc-logos__i--maven img   { max-height: 40px; }
#ao-gate .oc-logos--hero .oc-logos__i--cboe img    { max-height: 42px; }

@media (max-width: 900px) {
  #ao-gate .oc-logos--hero .oc-logos__row { grid-template-columns: 1fr; gap: 12px; }
  #ao-gate .oc-logos--hero .oc-logos__i { min-height: 92px; }
  #ao-gate .oc-logos--hero .oc-logos__i--optiver img { max-height: 74px; }
  #ao-gate .oc-logos--hero .oc-logos__i--maven img   { max-height: 30px; }
  #ao-gate .oc-logos--hero .oc-logos__i--cboe img    { max-height: 30px; }
  #ao-gate .oc-logos--hero .oc-logos__lbl { font-size: .62rem; letter-spacing: .14em; }
}


/* ══════════════════════════════════════════════════ mobile ═══
   The sales page is a left-aligned editorial layout, which reads as ragged on a
   phone where every block is one column wide. Centre it. */
@media (max-width: 760px) {
  #ao-gate .oc-hero__grid { text-align: center; }
  #ao-gate .pg-eyebrow, #ao-gate .oc-hero__h1, #ao-gate .pg-hero__lead,
  #ao-gate .oc-hero__vat { text-align: center; }
  #ao-gate .oc-hero__h1 br { display: none; }
  #ao-gate .pg-hero__lead, #ao-gate .oc-hero__vat { margin-left: auto; margin-right: auto; }
  #ao-gate .oc-hero__cta { justify-content: center; }
  #ao-gate .oc-hero__cta .pg-btn { width: 100%; max-width: 320px; min-height: 52px; }
  #ao-gate .oc-hero__pic { margin: 0 auto; }
  #ao-gate .oc-hero__mark { justify-content: center; }

  /* the checklist keeps its ticks left of the text, but the block is centred */
  #ao-gate .oc-hero__list { max-width: 420px; margin-left: auto; margin-right: auto; }
  #ao-gate .oc-hero__list li { text-align: left; }

  #ao-gate .oc-logos--hero .oc-logos__lbl { justify-content: center; text-align: center; }
  #ao-gate .oc-stats { justify-items: center; text-align: center; }

  #ao-gate .pg-band h2, #ao-gate .pg-band .pg-eyebrow,
  #ao-gate .pg-band > .pg-wrap > p { text-align: center; }
  #ao-gate .pg-band .pg-btn { width: 100%; max-width: 320px; min-height: 52px; margin: 0 auto; }

  #ao-gate .oc-buy { text-align: center; }
  #ao-gate .oc-buy__list { max-width: 340px; margin-left: auto; margin-right: auto; }
  #ao-gate .oc-buy__list li { text-align: left; }
  #ao-gate .oc-buy__price { justify-content: center; }

  #ao-gate .oc-teach, #ao-gate .oc-cert { text-align: center; }
  #ao-gate .oc-certlist { max-width: 380px; margin-left: auto; margin-right: auto; }
  #ao-gate .oc-certlist li { text-align: left; }
}

/* ── phone: centring the pieces that were left ragged ────────────────────
   The hero and the bands were already centred; the portrait, the CV rows and
   the button labels were not. */
@media (max-width: 760px) {
  /* the portrait sat hard left under its heading */
  #ao-gate .oc-teach__pic { max-width: 240px; margin-left: auto; margin-right: auto; }
  #ao-gate .oc-teach__pic img { display: block; margin: 0 auto; }

  /* Experience: logo on its own line, the role centred beneath it. The 900px
     rule above pins the years pill to grid-column 2, which forced an implicit
     second column and stopped the row ever collapsing, so that is reset here
     rather than only overriding justify-self. */
  #ao-gate .oc-cv { max-width: 420px; margin-left: auto; margin-right: auto; }
  #ao-gate .oc-cv li {
    display: grid; grid-template-columns: 1fr; justify-items: center;
    text-align: center; gap: 7px; padding: 16px 14px;
  }
  #ao-gate .oc-cv__logo { width: auto; min-width: 62px; height: 32px; }
  #ao-gate .oc-cv__logo img { max-height: 26px; }
  #ao-gate .oc-cv__yrs { grid-column: 1; justify-self: center; margin-top: 2px; }

  /* button labels: full-width buttons left their text on the baseline start */
  #ao-gate .pg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.25;
  }
}


/* ── hero outcomes ───────────────────────────────────────────────────────
   Three numbered promises directly under the lead. The hero used to go
   straight from Sven's CV to the price, so the visitor met the credential
   before the reason. This is the reason: what you can do afterwards, one
   line each. Kept to a stacked list rather than three columns, because at
   1.35fr the hero column is too narrow for three readable cards. */
#ao-gate .oc-outcomes {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 10px; max-width: 62ch; counter-reset: none;
}
#ao-gate .oc-outcomes li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(232,99,90,.075), rgba(232,99,90,.025));
  border: 1px solid rgba(232,99,90,.20);
}
#ao-gate .oc-outcomes__n {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: var(--pg-red-br); font-variant-numeric: tabular-nums;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(232,99,90,.14); border: 1px solid rgba(232,99,90,.38);
}
#ao-gate .oc-outcomes b {
  display: block; color: #fff; font-weight: 750; font-size: 1rem;
  line-height: 1.35; margin-bottom: 3px;
}
#ao-gate .oc-outcomes p {
  margin: 0; font-size: .89rem; line-height: 1.55; color: var(--pg-muted);
}

@media (max-width: 600px) {
  #ao-gate .oc-outcomes li { padding: 12px 13px; gap: 11px; }
  #ao-gate .oc-outcomes__n { width: 26px; height: 26px; font-size: .66rem; }
  #ao-gate .oc-outcomes b { font-size: .95rem; }
  #ao-gate .oc-outcomes p { font-size: .85rem; }
}

/* ── experience rows: air between the mark and the role ──────────────────
   The logo column had been cut to 46px with a 16px gutter, which left wide
   wordmarks (Optiver, Maven Securities) touching the job title, so each row
   read as one run of text. Widen the column, widen the gutter, and set the
   two apart with a hairline. box-sizing is border-box globally, so the
   padding and border sit inside the declared width. */
#ao-gate .oc-cv li { grid-template-columns: 96px 1fr auto; gap: 24px; padding: 15px 18px; }
#ao-gate .oc-cv__logo {
  width: 96px; height: 36px; padding-right: 22px;
  border-right: 1px solid var(--pg-line-l);
  justify-items: center;
}
#ao-gate .oc-cv__logo img { max-height: 26px; }

@media (max-width: 900px) {
  #ao-gate .oc-cv li { grid-template-columns: 82px 1fr; gap: 18px; }
  #ao-gate .oc-cv__logo { width: 82px; padding-right: 18px; }
}
@media (max-width: 760px) {
  /* stacked and centred at this width, so the divider would cut the row in half */
  #ao-gate .oc-cv__logo { border-right: 0; padding-right: 0; width: auto; min-width: 82px; }
}

/* ── the price, framed ───────────────────────────────────────────────────
   Sits between "who it is for" and the checkout. Its own red ground so it
   reads as a beat of its own rather than a third white band, and so the
   number arrives before the button rather than on it. */
#ao-gate .oc-value {
  background: radial-gradient(120% 90% at 50% 0%, #1d0807 0%, #140503 58%, #0e0302 100%);
  color: var(--pg-text); padding: 76px 0 68px; position: relative; overflow: hidden;
}
#ao-gate .oc-value::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 140%;
  background:
    radial-gradient(36% 46% at 50% 18%, rgba(174,31,25,.34), transparent 64%),
    radial-gradient(30% 40% at 20% 78%, rgba(232,99,90,.16), transparent 68%);
  filter: blur(30px); pointer-events: none;
}
#ao-gate .oc-value .pg-wrap { position: relative; z-index: 1; }

#ao-gate .oc-value__k {
  font-size: .7rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--pg-red-br); margin: 0 0 6px;
}
#ao-gate .oc-value__p {
  font-size: clamp(3.4rem, 11vw, 6.2rem); font-weight: 800; letter-spacing: -.035em;
  line-height: .95; margin: 0 0 10px; color: #fff;
  background: linear-gradient(96deg, #fff 20%, #ffd9d5 52%, #fff 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* the disclaimer rides directly under the number, where the claim is made */
#ao-gate .oc-value__fine {
  font-size: .74rem; line-height: 1.5; color: var(--pg-muted); opacity: .68;
  max-width: 52ch; margin: 0 auto 24px;
}
#ao-gate .oc-value__sub {
  font-size: clamp(1.05rem, 2vw, 1.34rem); line-height: 1.5; color: var(--pg-text);
  max-width: 42ch; margin: 0 auto 46px; font-weight: 600;
}
#ao-gate .oc-value__sub strong { color: #fff; font-weight: 800; }
#ao-gate .oc-value__arw { color: var(--pg-red-br); font-weight: 800; margin-right: 4px; }

#ao-gate .oc-value__lbl {
  font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pg-muted); opacity: .8; margin: 0 0 18px;
}
#ao-gate .oc-value__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
#ao-gate .oc-value__row li {
  padding: 26px 18px; border-radius: 16px;
  font-size: .97rem; font-weight: 650; line-height: 1.4; color: var(--pg-text);
  /* flex, not grid: as a grid container the <b> became its own grid item and
     broke "0.05% of potential salary" across two rows. One <span> child keeps
     the line intact and still centres in the card. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; min-height: 96px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(232,99,90,.20);
}
/* the token art, same family as the hero float icons */
#ao-gate .oc-value__row img {
  width: 58px; height: 58px; display: block;
  filter: drop-shadow(0 0 12px rgba(232, 99, 90, .35));
}
#ao-gate .oc-value__row b {
  color: var(--pg-red-br); font-weight: 800; font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  #ao-gate .oc-value { padding: 58px 0 52px; }
  #ao-gate .oc-value__row { grid-template-columns: 1fr; gap: 10px; }
  /* side by side once the cards go full width, so three tokens do not add
     three tall rows to the scroll */
  #ao-gate .oc-value__row li {
    min-height: 0; padding: 15px 18px; font-size: .97rem;
    flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px;
  }
  #ao-gate .oc-value__row img { width: 46px; height: 46px; flex: none; }
}

/* ── title-only tiles and rows ───────────────────────────────────────────
   The slide/reference tiles and the four-things rows dropped their body copy:
   the art and the heading already say it, and the paragraph was restating the
   video. Kill the heading's bottom margin when nothing follows it, and pull
   the tile in a little now that the body is one line. */
#ao-gate .oc-tile__h:last-child { margin-bottom: 0; }
#ao-gate .oc-get h3:last-child { margin-bottom: 0; }
#ao-gate .oc-tile { padding-bottom: 26px; }
#ao-gate .oc-get li { padding-top: 22px; padding-bottom: 22px; }

/* The two art blocks have different natural heights (landscape slides against
   portrait PDF pages). With the body copy gone that left the two tags and
   titles on different lines. `margin-top: auto` on the body only moves the
   SHORTER tile's body, which swaps one misalignment for another. Letting the
   art absorb the slack instead settles both bodies at the same y: the tiles
   are equal height and the bodies are equal height, so equal-grown art means
   equal offsets. */
#ao-gate .oc-tile { display: flex; flex-direction: column; }
#ao-gate .oc-fan, #ao-gate .oc-locked { flex: 1 1 auto; align-items: center; }

/* With the row copy gone, dropping the key pill onto its own line under the
   title (the old <=900px rule) left it floating in the middle of the row.
   Keep the three columns and let the title wrap instead. */
@media (max-width: 900px) {
  #ao-gate .oc-get li { grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; }
  #ao-gate .oc-get__k { grid-column: 3; justify-self: end; margin-top: 0; font-size: .92rem; padding: 6px 12px; }
}

/* ── subtitles tile: full width under the two art tiles ────────────────
   A studio still with the caption bar cycling the same sentence through all
   sixteen tracks (2 s each, 32 s loop). Reduced motion holds on English. */
#ao-gate .oc-tile--wide {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px; align-items: center; padding: 30px 32px 30px 30px;
}
#ao-gate .oc-subs {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
#ao-gate .oc-subs img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
#ao-gate .oc-subs__cc {
  position: absolute; top: 12px; left: 12px; font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 5px 10px; backdrop-filter: blur(4px);
}
#ao-gate .oc-subs__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
}
#ao-gate .oc-subs__bar span {
  position: absolute; left: 20px; right: 20px; bottom: 16px; text-align: center;
  color: #fff; font-size: 1rem; line-height: 1.4; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6);
  opacity: 0; animation: oc-subcycle 32s linear infinite; animation-delay: calc(var(--i) * 2s);
}
#ao-gate .oc-subs__bar span i {
  display: block; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pg-red-br); margin-bottom: 6px;
}
#ao-gate .oc-subs__bar span[dir="rtl"] { direction: rtl; }
@keyframes oc-subcycle { 0% { opacity: 0; } 1.2% { opacity: 1; } 5.6% { opacity: 1; } 6.8% { opacity: 0; } 100% { opacity: 0; } }
#ao-gate .oc-langs { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#ao-gate .oc-langs li {
  font-size: .8rem; color: #fff; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  border-radius: 999px; padding: 5px 11px; line-height: 1.3;
}
@media (max-width: 900px) {
  #ao-gate .oc-tile--wide { grid-template-columns: 1fr; gap: 22px; padding: 22px 20px; }
  #ao-gate .oc-subs__bar span { font-size: .9rem; left: 14px; right: 14px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #ao-gate .oc-subs__bar span { animation: none; }
  #ao-gate .oc-subs__bar span:first-child { opacity: 1; }
}

/* ── localized pages + language switcher ────────────────────────────────
   /options-course/<lang>/ are built from strings files by
   Documentation/5. Programs/options course hubens/locales/build_locales.py and
   reuse everything above. The switcher also sits on the English page. */
#ao-gate .oc-switch { margin: 34px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
#ao-gate .oc-switch > span {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-muted);
}
#ao-gate .oc-switch .oc-langs { margin: 0; }
#ao-gate .oc-langs a { color: inherit; text-decoration: none; display: block; }
#ao-gate .oc-langs li:has(a) { padding: 0; }
#ao-gate .oc-langs li a { padding: 5px 11px; }
#ao-gate .oc-langs li:hover { border-color: rgba(232,99,90,.45); }
#ao-gate .oc-langs li.on { background: rgba(232,99,90,.14); border-color: rgba(232,99,90,.4); }
#ao-gate .oc-langs--center { justify-content: center; margin-top: 22px; }
#ao-gate .oc-subsband { padding-top: 0; }
#ao-gate .oc-subsnote { max-width: 60ch; margin: 18px auto 0; color: var(--pg-muted); font-size: .9rem; line-height: 1.6; }
#ao-gate .oc-fullpage { text-align: center; margin: 34px 0 0; }
#ao-gate .oc-fullpage a { color: var(--pg-red); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(174,31,25,.35); }
#ao-gate .oc-fullpage a:hover { border-bottom-color: var(--pg-red); }
/* the locale template renders the curriculum statically; give it the same reveal state */
#ao-gate .oc-locale .oc-curric.in { opacity: 1; transform: none; }
[dir="rtl"] #ao-gate .oc-part__n, [dir="rtl"] #ao-gate .oc-get__n { text-align: center; }

/* ── language dropdown, top right of the hero (replaces the chip switcher) ── */
#ao-gate .oc-langbar { display: flex; justify-content: flex-end; margin: -30px 0 22px; position: relative; z-index: 3; }
#ao-gate .oc-langsel {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--pg-line); background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 14px 8px 13px; color: #fff; font-size: .84rem; font-weight: 600;
  transition: border-color .25s ease, background .25s ease;
}
#ao-gate .oc-langsel:hover { border-color: rgba(232,99,90,.45); background: rgba(232,99,90,.1); }
#ao-gate .oc-langsel > svg { width: 16px; height: 16px; flex: none; color: var(--pg-red-br); }
#ao-gate .oc-langsel select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff;
  font: inherit; padding: 0 22px 0 0; cursor: pointer; outline: none; max-width: 180px;
}
#ao-gate .oc-langsel select option { color: #111; background: #fff; }
#ao-gate .oc-langsel .oc-langsel__c { position: absolute; right: 12px; width: 14px; height: 14px; color: var(--pg-muted); pointer-events: none; }
[dir="rtl"] #ao-gate .oc-langbar { justify-content: flex-start; }
[dir="rtl"] #ao-gate .oc-langsel select { padding: 0 0 0 22px; }
[dir="rtl"] #ao-gate .oc-langsel .oc-langsel__c { right: auto; left: 12px; }
@media (max-width: 900px) { #ao-gate .oc-langbar { margin: -18px 0 18px; } }

/* ── glossary pages (build_glossary.py) ─────────────────────────────────── */
#ao-gate.og .og-hero { padding: 72px 0 44px; }
#ao-gate .og-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: var(--pg-muted); margin: 0 0 18px; }
#ao-gate .og-crumb a { color: var(--pg-muted); text-decoration: none; }
#ao-gate .og-crumb a:hover { color: #fff; }
#ao-gate .og-crumb b { color: #fff; font-weight: 600; }
#ao-gate .og-h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 14px; }
#ao-gate.og .pg-hero__lead { max-width: 64ch; }
#ao-gate .og-body { padding: 56px 0 64px; }
#ao-gate .og-def { font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.55; color: var(--pg-ink-l); max-width: 60ch; margin: 0 0 28px; font-weight: 500; }
#ao-gate .og-formula { display: inline-block; background: #fff; border: 1px solid var(--pg-line-l); border-radius: 14px; padding: 16px 20px; margin: 0 0 30px; }
#ao-gate .og-formula__l { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-red); margin-bottom: 8px; }
#ao-gate .og-formula__eq { font-family: 'Cardo', Georgia, serif; font-size: 1.35rem; color: var(--pg-ink-l); }
#ao-gate .og-incourse { border-left: 3px solid var(--pg-red); padding: 4px 0 4px 18px; margin: 0 0 34px; max-width: 64ch; }
#ao-gate .og-incourse__l, #ao-gate .og-related__l { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-muted-l); margin-bottom: 6px; }
#ao-gate .og-incourse p { margin: 0; color: var(--pg-muted-l); line-height: 1.65; font-size: .98rem; }
#ao-gate .og-incourse a { color: var(--pg-red); font-weight: 700; text-decoration: none; }
#ao-gate .og-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#ao-gate .og-chips li a { display: block; font-size: .84rem; color: var(--pg-ink-l); text-decoration: none; border: 1px solid var(--pg-line-l); background: #fff; border-radius: 999px; padding: 6px 13px; transition: border-color .2s, color .2s; }
#ao-gate .og-chips li a:hover { border-color: var(--pg-red); color: var(--pg-red); }
#ao-gate .og-chips__all a { color: var(--pg-red); font-weight: 700; border-style: dashed; }
#ao-gate .og-chips--parts { margin-top: 22px; }
#ao-gate .og-chips--parts li a { background: rgba(255,255,255,.06); border-color: var(--pg-line); color: #fff; }
#ao-gate .og-chips--parts li a:hover { border-color: rgba(232,99,90,.5); color: #fff; }
#ao-gate .og-related { margin: 0 0 36px; }
#ao-gate .og-nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--pg-line-l); padding-top: 22px; }
#ao-gate .og-nav__a { color: var(--pg-ink-l); text-decoration: none; font-weight: 600; font-size: .92rem; }
#ao-gate .og-nav__a:hover { color: var(--pg-red); }
#ao-gate .og-nav__a--n { text-align: right; }
#ao-gate .og-part { padding: 34px 0 10px; border-top: 1px solid var(--pg-line-l); }
#ao-gate .og-part:first-child { border-top: 0; padding-top: 0; }
#ao-gate .og-part__h { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 14px; }
#ao-gate .og-sec { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-muted-l); margin: 26px 0 10px; }
#ao-gate .og-list { margin: 0; padding: 0; }
#ao-gate .og-list > div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--pg-line-l); }
#ao-gate .og-list dt { margin: 0; font-weight: 700; }
#ao-gate .og-list dt a { color: var(--pg-ink-l); text-decoration: none; }
#ao-gate .og-list dt a:hover { color: var(--pg-red); }
#ao-gate .og-list dd { margin: 0; color: var(--pg-muted-l); line-height: 1.6; font-size: .95rem; }
#ao-gate .og-cta { padding: 64px 0 56px; }
#ao-gate .og-fine { color: var(--pg-muted); font-size: .78rem; margin-top: 22px; opacity: .8; }
/* promo card: Sven with the hero's red glow, facts, price, the three desk marks */
#ao-gate .og-promo {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 24px; align-items: end; border: 1px solid var(--pg-line); border-radius: 24px;
  background: linear-gradient(160deg, rgba(174,31,25,.22), rgba(255,255,255,.03) 55%), #1d0807;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
#ao-gate .og-promo__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 55% at 78% 40%, rgba(232,99,90,.32), transparent 70%); }
#ao-gate .og-promo__ico { position: absolute; width: 74px; height: 74px; opacity: .45; pointer-events: none; filter: drop-shadow(0 0 18px rgba(232,99,90,.3)); }
#ao-gate .og-promo__ico--a { left: 60%; top: 18px; }
#ao-gate .og-promo__ico--b { right: 22px; bottom: 34%; width: 58px; height: 58px; }
#ao-gate .og-promo__copy { position: relative; padding: 42px 8px 42px 40px; }
#ao-gate .og-promo__h { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; color: #fff; margin: 0 0 12px; }
#ao-gate .og-promo__by { color: var(--pg-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 18px; max-width: 52ch; }
#ao-gate .og-promo__facts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
#ao-gate .og-promo__facts li { display: flex; align-items: flex-start; gap: 8px; color: #fff; font-size: .9rem; line-height: 1.45; }
#ao-gate .og-promo__facts svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--pg-red-br); }
#ao-gate .og-promo__row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
#ao-gate .og-promo__price { color: var(--pg-muted); font-size: .88rem; }
#ao-gate .og-promo__logos { display: flex; align-items: center; gap: 26px; margin-top: 24px; opacity: .55; filter: grayscale(1); }
#ao-gate .og-promo__logos img { height: 18px; width: auto; }
#ao-gate .og-promo__logos img[alt=Optiver] { height: 24px; }
#ao-gate .og-promo__logos img[alt=Cboe] { height: 20px; }
#ao-gate .og-promo__pic { position: relative; align-self: end; display: block; text-decoration: none; }
#ao-gate .og-promo__pic > img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto;
  filter: grayscale(1) contrast(1.06); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
#ao-gate .og-promo__mark { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }
#ao-gate .og-promo__mark img { height: 26px; width: auto; opacity: .95; }
/* the whole card is one click target: an overlay anchor sits under the real button and the
   picture link (both kept on top so their own hover and focus still work) and is hidden from
   the accessibility tree, so the course link is not announced a third time */
#ao-gate .og-promo { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
#ao-gate .og-promo__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
#ao-gate .og-promo__row .pg-btn, #ao-gate .og-promo__pic { position: relative; z-index: 2; }
#ao-gate .og-promo:hover { transform: translateY(-3px); box-shadow: 0 36px 80px rgba(0,0,0,.5); border-color: rgba(232,99,90,.45); }
#ao-gate .og-promo:hover .pg-btn--primary { background: #c4241d; box-shadow: 0 16px 40px rgba(174, 31, 25, 0.45); }
@media (max-width: 900px) {
  #ao-gate .og-promo { grid-template-columns: 1fr; gap: 0; }
  #ao-gate .og-promo__copy { padding: 30px 22px 6px; }
  #ao-gate .og-promo__facts { grid-template-columns: 1fr; }
  #ao-gate .og-promo__pic > img { max-width: 260px; }
  #ao-gate .og-promo__ico { display: none; }
}
[dir="rtl"] #ao-gate .og-promo__copy { padding: 42px 40px 42px 8px; }
@media (max-width: 760px) {
  #ao-gate .og-list > div { grid-template-columns: 1fr; gap: 4px; }
  #ao-gate .og-nav { flex-direction: column; }
  #ao-gate .og-nav__a--n { text-align: left; }
}
[dir="rtl"] #ao-gate .og-incourse { border-left: 0; border-right: 3px solid var(--pg-red); padding: 4px 18px 4px 0; }