/* program.css — the public AIC Analyst Program walkthrough (#ao-gate).
   Everything here is scoped under #ao-gate so it can never leak into the
   member portal that shares this document. Structural language borrowed from
   nextgencapitalsummit.com (dark hero, eyebrow/h2/lead rhythm, glass cards,
   marquee, pipeline rail, rise-on-scroll) rendered in the AIC palette:
   red #ae1f19 on a deep maroon-black, with cream light sections between. */

#ao-gate {
  --pg-ink: #140503;
  --pg-ink-2: #1d0807;
  --pg-surface: rgba(255, 255, 255, 0.045);
  --pg-line: rgba(255, 255, 255, 0.12);
  --pg-line-soft: rgba(255, 255, 255, 0.07);
  --pg-red: #ae1f19;
  --pg-red-br: #e8635a;
  --pg-text: #f7f2f1;
  --pg-muted: #c0aeab;
  --pg-cream: #faf7f5;
  --pg-ink-l: #121212;
  --pg-muted-l: #6b7280;
  --pg-line-l: #ebe6e3;
  --pg-r: 18px;

  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16.5px;
  line-height: 1.7;
}

#ao-gate .pg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
#ao-gate .pg-wrap--narrow { max-width: 980px; }

/* ---------------------------------------------------------------- bands */
#ao-gate .pg-band { padding: 92px 0; position: relative; }
#ao-gate .pg-band--dark { background: var(--pg-ink); color: var(--pg-text); }
#ao-gate .pg-band--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 680px at 12% -10%, rgba(174, 31, 25, 0.16), transparent 70%),
    radial-gradient(760px 760px at 88% 112%, rgba(174, 31, 25, 0.12), transparent 72%);
}
#ao-gate .pg-band--cream { background: var(--pg-cream); color: var(--pg-ink-l); }
#ao-gate .pg-band--white { background: #fff; color: var(--pg-ink-l); }
#ao-gate .pg-band--tight { padding: 68px 0; }

#ao-gate .pg-eyebrow {
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 800; margin: 0 0 14px; color: var(--pg-red);
}
#ao-gate .pg-band--dark .pg-eyebrow { color: var(--pg-red-br); }
#ao-gate .pg-h2 {
  font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.08; margin: 0 0 18px; color: inherit;
}
#ao-gate .pg-lead { font-size: 17.5px; line-height: 1.68; max-width: 720px; margin: 0 0 44px; color: var(--pg-muted-l); }
#ao-gate .pg-band--dark .pg-lead { color: var(--pg-muted); }
#ao-gate .pg-center { text-align: center; }
#ao-gate .pg-center .pg-lead { margin-left: auto; margin-right: auto; }
#ao-gate .pg-h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 10px; line-height: 1.25; }

/* ----------------------------------------------------------------- hero */
#ao-gate .pg-hero { position: relative; overflow: hidden; background: var(--pg-ink); color: #fff; padding: 92px 0 76px; }
#ao-gate .pg-hero__photo {
  position: absolute; inset: 0;
  background: url("https://firebasestorage.googleapis.com/v0/b/aic-storage/o/static-images%2F0929-3335-7898%2Fanalyst-cohort-2026-c1.jpg?alt=media&token=a1c0h0rt-2026-c1-analysts-photo") center 62% / cover no-repeat;
  opacity: 0.42; transform: scale(1.06);
  animation: pgKen 26s ease-in-out infinite alternate;
}
@keyframes pgKen { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { #ao-gate .pg-hero__photo { animation: none; } }
#ao-gate .pg-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(168deg, rgba(20, 5, 3, 0.6) 0%, rgba(20, 5, 3, 0.72) 46%, rgba(20, 5, 3, 0.96) 100%);
}
#ao-gate .pg-hero .pg-wrap { text-align: center; }
#ao-gate .pg-pill {
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--pg-line);
  background: var(--pg-surface); border-radius: 999px; padding: 7px 18px; font-size: 12.5px;
  font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.9); margin-bottom: 26px;
}
#ao-gate .pg-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--pg-red-br); box-shadow: 0 0 0 3px rgba(232, 99, 90, 0.18); }
#ao-gate .pg-hero h1 {
  font-size: clamp(36px, 6vw, 68px); font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.02; margin: 0 0 20px; color: #fff;
}
#ao-gate .pg-hero h1 em { font-style: normal; color: var(--pg-red-br); }
#ao-gate .pg-hero__lead { max-width: 680px; margin: 0 auto 34px; font-size: 18px; color: rgba(247, 242, 241, 0.82); }
#ao-gate .pg-cta-row { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
#ao-gate .pg-hero__note { font-size: 13.5px; color: rgba(247, 242, 241, 0.6); margin: 20px 0 0; }

#ao-gate .pg-btn {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 14px 28px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.2s, background 0.18s, border-color 0.18s;
}
#ao-gate .pg-btn--primary { background: var(--pg-red); color: #fff; box-shadow: 0 12px 30px rgba(174, 31, 25, 0.34); }
#ao-gate .pg-btn--primary:hover { background: #c4241d; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(174, 31, 25, 0.45); }
#ao-gate .pg-btn--ghost { border-color: var(--pg-line); color: #fff; background: var(--pg-surface); }
#ao-gate .pg-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
#ao-gate .pg-btn--dark { background: var(--pg-ink-l); color: #fff; }
#ao-gate .pg-btn--dark:hover { background: #000; transform: translateY(-2px); }

#ao-gate .pg-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px;
  max-width: 880px; margin: 58px auto 0; padding-top: 32px; border-top: 1px solid var(--pg-line-soft);
}
#ao-gate .pg-stats b { display: block; font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 7px; letter-spacing: -0.02em; }
#ao-gate .pg-stats span { font-size: 12.5px; color: var(--pg-muted); letter-spacing: 0.02em; line-height: 1.4; display: block; }

/* -------------------------------------------------------------- marquee */
#ao-gate .pg-marquee { border-block: 1px solid var(--pg-line-soft); padding: 17px 0; overflow: hidden; background: #1a0605; }
#ao-gate .pg-marquee__track { display: flex; gap: 46px; width: max-content; animation: pgSlide 42s linear infinite; }
#ao-gate .pg-marquee span {
  font-size: 16px; font-weight: 600; color: rgba(247, 242, 241, 0.42); white-space: nowrap;
  display: flex; align-items: center; gap: 46px;
}
#ao-gate .pg-marquee span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pg-red-br); opacity: 0.75; }
@keyframes pgSlide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #ao-gate .pg-marquee__track { animation: none; } }

/* ------------------------------------------- credibility strip under the hero
   The employer marks are nearly all dark-on-transparent, so this bar sits on
   white rather than the hero's near-black, where they would disappear. */
#ao-gate .pg-cred { background: #fff; border-bottom: 1px solid var(--pg-line-l); padding: 30px 0 34px; }
#ao-gate .pg-cred__t {
  text-align: center; font-size: 13px; letter-spacing: 0.03em; color: var(--pg-muted-l);
  margin: 0 0 22px;
}
#ao-gate .pg-cred__t strong { color: var(--pg-ink-l); font-weight: 800; }
#ao-gate .pg-cred__row {
  display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: wrap;
}
#ao-gate .pg-cred__row img {
  height: 30px; width: auto; max-width: 148px; object-fit: contain; display: block;
  opacity: 0.62; filter: grayscale(1); transition: opacity 0.22s, filter 0.22s;
}
#ao-gate .pg-cred__row img:hover { opacity: 1; filter: none; }
#ao-gate .pg-cred__row img.tall { height: 36px; }
#ao-gate .pg-cred__row img.wide { height: 24px; max-width: 172px; }
/* the Lehman wordmark is ~13:1 — height-capping it makes it a smudge, so give
   it width and let the height fall out */
#ao-gate .pg-cred__row img.xwide { height: auto; width: 196px; max-width: 196px; }

/* ---------------------------------------------------------------- grids */
#ao-gate .pg-grid { display: grid; gap: 20px; }
#ao-gate .pg-g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
#ao-gate .pg-g3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
#ao-gate .pg-g4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

#ao-gate .pg-card {
  position: relative; border-radius: var(--pg-r); padding: 30px 28px; overflow: hidden;
  border: 1px solid var(--pg-line-l); background: #fff; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
#ao-gate .pg-card:hover { border-color: #e2c9c7; box-shadow: 0 14px 36px rgba(20, 5, 3, 0.07); }
#ao-gate .pg-band--dark .pg-card { background: var(--pg-surface); border-color: var(--pg-line); }
#ao-gate .pg-band--dark .pg-card:hover { border-color: rgba(232, 99, 90, 0.34); box-shadow: none; }
#ao-gate .pg-card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--pg-muted-l); }
#ao-gate .pg-band--dark .pg-card p { color: var(--pg-muted); }
#ao-gate .pg-card__n {
  position: absolute; top: 12px; right: 20px; font-size: 58px; font-weight: 800; line-height: 1;
  color: rgba(20, 5, 3, 0.05); pointer-events: none; letter-spacing: -0.04em;
}
#ao-gate .pg-band--dark .pg-card__n { color: rgba(255, 255, 255, 0.055); }
/* keep the heading clear of the ghosted numeral in the top-right corner */
#ao-gate .pg-card__n ~ .pg-h3 { padding-right: 58px; }
#ao-gate .pg-card__ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fdeceb; color: var(--pg-red); margin-bottom: 16px;
}
#ao-gate .pg-band--dark .pg-card__ic { background: rgba(232, 99, 90, 0.14); color: var(--pg-red-br); }
#ao-gate .pg-card__ic svg { width: 20px; height: 20px; }
/* Custom generated icons ship as flat red PNGs, so they carry their own colour
   (unlike the currentColor SVGs) and sit a touch larger to match their weight. */
#ao-gate .pg-card__ic img { width: 23px; height: 23px; object-fit: contain; display: block; }

/* --------------------------------------------------------- pipeline rail */
#ao-gate .pg-pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 8px; position: relative; }
#ao-gate .pg-pipe::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 12px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pg-red), var(--pg-red-br), transparent);
}
#ao-gate .pg-pipe > div { text-align: center; position: relative; }
#ao-gate .pg-pipe b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--pg-ink); border: 2px solid var(--pg-red-br); box-shadow: 0 0 0 5px rgba(174, 31, 25, 0.16);
  font-size: 11.5px; font-weight: 800; color: #fff;
}
#ao-gate .pg-pipe strong { display: block; font-size: 15px; font-weight: 800; margin-bottom: 5px; letter-spacing: -0.01em; }
#ao-gate .pg-pipe span { font-size: 13px; color: var(--pg-muted); line-height: 1.5; display: block; }

/* ------------------------------------------------------ foundation modules */
#ao-gate .pg-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; }
#ao-gate .pg-mod {
  border: 1px solid var(--pg-line-l); border-radius: 15px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
#ao-gate .pg-mod:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(20, 5, 3, 0.1); border-color: #e2c9c7; }
/* The module tiles are the real UMushroom title slides. All seven sources are
   trimmed to the same 1.55 ratio (full width kept, only the dead white below the
   byline removed), so the tile matches them exactly: nothing letterboxes and
   nothing crops, and every card frames identically. */
#ao-gate .pg-mod img { width: 100%; aspect-ratio: 1.55; object-fit: cover; object-position: center top; display: block; background: #fff; border-bottom: 1px solid var(--pg-line-l); }
#ao-gate .pg-mod__b { padding: 14px 16px 16px; }
#ao-gate .pg-mod__n { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-red); margin-bottom: 5px; }
#ao-gate .pg-mod__t { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--pg-ink-l); margin-bottom: 6px; }
#ao-gate .pg-mod__s { font-size: 12.8px; color: var(--pg-muted-l); line-height: 1.5; }

/* ------------------------------------ "given by the authors" scroll banner */
#ao-gate .pg-authors { position: relative; overflow: hidden; }
#ao-gate .pg-authors__stage {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 42px; align-items: center; margin-bottom: 46px;
}
#ao-gate .pg-authors__shot {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--pg-line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); background: #fff;
}
#ao-gate .pg-authors__shot img { width: 100%; display: block; }
/* the live-call still, shown full width rather than buried in the filmstrip */
#ao-gate .pg-authors__wide { margin: 0 0 46px; }
#ao-gate .pg-authors__wide figure {
  margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--pg-line);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55); background: #fff;
}
#ao-gate .pg-authors__wide img { width: 100%; display: block; }
#ao-gate .pg-authors__cap {
  margin: 14px 0 0; font-size: 13.5px; color: var(--pg-muted); text-align: center;
}
#ao-gate .pg-authors h2 { font-size: clamp(32px, 5vw, 58px); }
#ao-gate .pg-authors .pg-lead { margin-bottom: 26px; }
#ao-gate .pg-authors__by { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#ao-gate .pg-authors__face {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center 6%;
  background: #fdeceb; border: 2px solid rgba(255, 255, 255, 0.18); flex: none;
}
#ao-gate .pg-authors__nm { font-size: 14px; font-weight: 700; color: rgba(247, 242, 241, 0.92); line-height: 1.35; }
#ao-gate .pg-authors__nm span { display: block; font-weight: 500; font-size: 12.5px; color: var(--pg-muted); }

/* the moving filmstrip of module slides underneath */
#ao-gate .pg-strip { position: relative; overflow: hidden; padding: 4px 0; }
#ao-gate .pg-strip::before, #ao-gate .pg-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
}
#ao-gate .pg-strip::before { left: 0; background: linear-gradient(90deg, var(--pg-ink), transparent); }
#ao-gate .pg-strip::after { right: 0; background: linear-gradient(270deg, var(--pg-ink), transparent); }
#ao-gate .pg-strip__track { display: flex; gap: 18px; width: max-content; animation: pgStrip 46s linear infinite; }
#ao-gate .pg-strip:hover .pg-strip__track { animation-play-state: paused; }
/* The slides are trimmed to their own artwork and their aspect ratios differ
   (1.07 to 1.66), so a fixed-width tile would either letterbox white or crop a
   headline. Fix the HEIGHT instead and let each card take the width its slide
   needs — no white margin anywhere, and nothing is ever clipped. */
/* min-width floors each tile so the flex track keeps a real width BEFORE the lazy
   slide images resolve. Without it the items collapse to ~0, the max-content track
   is ~0 wide, and translateX(-50%) moves nothing — the marquee looks frozen. That
   bites hardest on mobile, where the strip sits far down the page and its images
   load late. The floor sits below every loaded tile width, so nothing shifts once
   the images arrive. */
#ao-gate .pg-strip__i {
  height: 180px; width: auto; min-width: 150px; flex: none; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--pg-line); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
#ao-gate .pg-strip__i img { height: 100%; width: auto; display: block; }
@keyframes pgStrip { to { transform: translateX(-50%); } }
/* When motion is reduced the marquee would otherwise sit frozen flat, showing only
   the first slide with no way to reach the rest. Turn it into a native swipeable
   rail instead so all seven module slides stay reachable. */
@media (prefers-reduced-motion: reduce) {
  #ao-gate .pg-strip { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
  #ao-gate .pg-strip::before, #ao-gate .pg-strip::after { display: none; }
  #ao-gate .pg-strip::-webkit-scrollbar { display: none; }
  #ao-gate .pg-strip__track { animation: none; transform: none; padding: 0 18px; }
  #ao-gate .pg-strip__i { scroll-snap-align: center; }
}

/* -------------------------------------------------------- the cycle timeline */
#ao-gate .pg-time { position: relative; margin: 0; padding: 0 0 0 46px; list-style: none; }
#ao-gate .pg-time::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--pg-red), rgba(174, 31, 25, 0.28) 88%, transparent);
}
#ao-gate .pg-time li { position: relative; padding: 0 0 30px; }
#ao-gate .pg-time li:last-child { padding-bottom: 0; }
#ao-gate .pg-time li::before {
  content: ""; position: absolute; left: -38px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--pg-red); box-shadow: 0 0 0 4px rgba(174, 31, 25, 0.12);
}
#ao-gate .pg-time__n {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pg-red); display: block; margin-bottom: 3px;
}
#ao-gate .pg-time__t { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; color: var(--pg-ink-l); margin-bottom: 4px; }
#ao-gate .pg-time__s { font-size: 14.8px; color: var(--pg-muted-l); line-height: 1.6; max-width: 620px; }
#ao-gate .pg-time__tag {
  display: inline-block; margin-left: 9px; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; border-radius: 999px; padding: 3px 9px; background: #fdeceb; color: var(--pg-red);
  vertical-align: 3px;
}

/* --------------------------------------------------- the year, in broad lines */
#ao-gate .pg-rhythm { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
#ao-gate .pg-rhythm__c { border: 1px solid var(--pg-line-l); border-radius: 16px; padding: 24px 22px; background: #fff; }
#ao-gate .pg-rhythm__w {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pg-red); margin-bottom: 9px;
}
#ao-gate .pg-rhythm__h { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 7px; line-height: 1.2; }
#ao-gate .pg-rhythm__c p { margin: 0; font-size: 14.5px; color: var(--pg-muted-l); line-height: 1.6; }

/* the slim 12-month rail */
#ao-gate .pg-rail { margin-top: 34px; border-top: 1px solid var(--pg-line-l); padding-top: 22px; }
#ao-gate .pg-rail__m { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
#ao-gate .pg-rail__c { text-align: center; }
#ao-gate .pg-rail__b { height: 8px; border-radius: 3px; background: #ece7e4; margin-bottom: 8px; }
#ao-gate .pg-rail__b.on { background: var(--pg-red); }
#ao-gate .pg-rail__b.rep { background: #f0a29e; }
#ao-gate .pg-rail__b.off { background: #f3efec; }
#ao-gate .pg-rail__l { font-size: 10.5px; font-weight: 700; color: var(--pg-muted-l); letter-spacing: 0.02em; }
#ao-gate .pg-rail__k { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--pg-muted-l); }
#ao-gate .pg-rail__k i { width: 11px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: 0; }

/* ------------------------------------------------------------- track cards */
#ao-gate .pg-track {
  display: flex; flex-direction: column; border-radius: 16px; padding: 24px 22px;
  border: 1px solid var(--pg-line); background: var(--pg-surface); transition: border-color 0.2s, background 0.2s;
}
#ao-gate .pg-track:hover { border-color: rgba(232, 99, 90, 0.4); background: rgba(174, 31, 25, 0.09); }
#ao-gate .pg-track__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
/* The generated icons render on the band's own near-black, so they read as
   inset tiles rather than pasted-on squares. */
#ao-gate .pg-track__ic {
  width: 60px; height: 60px; border-radius: 14px; flex: none; overflow: hidden;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--pg-line-soft);
}
#ao-gate .pg-track__ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ao-gate .pg-track__t { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
#ao-gate .pg-track__cap { font-size: 11.5px; font-weight: 700; color: var(--pg-muted); margin-top: 3px; }
#ao-gate .pg-track p { font-size: 14.8px; color: var(--pg-muted); line-height: 1.62; margin: 0 0 14px; }
#ao-gate .pg-track__foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--pg-line-soft);
  font-size: 12.5px; color: rgba(247, 242, 241, 0.6); line-height: 1.5;
}
#ao-gate .pg-track__foot strong { color: rgba(247, 242, 241, 0.9); }

/* ------------------------------------------------------------ status flip */
#ao-gate .pg-flip { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
#ao-gate .pg-flip__arrow { display: grid; place-items: center; color: var(--pg-red); font-size: 26px; font-weight: 800; }
#ao-gate .pg-status {
  border-radius: 16px; padding: 24px 24px; border: 1px solid var(--pg-line-l); background: #fff;
}
#ao-gate .pg-status--now { background: #fffbeb; border-color: #fde68a; }
#ao-gate .pg-status--done { background: #f0fdf4; border-color: #bbf7d0; }
#ao-gate .pg-status__chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em; border-radius: 999px; padding: 5px 12px; margin-bottom: 13px;
}
#ao-gate .pg-status--now .pg-status__chip { background: #fef3c7; color: #92400e; }
#ao-gate .pg-status--done .pg-status__chip { background: #dcfce7; color: #166534; }
#ao-gate .pg-status ul { margin: 12px 0 0; padding-left: 19px; font-size: 14.5px; color: var(--pg-muted-l); line-height: 1.7; }
#ao-gate .pg-status ul li::marker { color: var(--pg-red); }
#ao-gate .pg-status p { margin: 0; font-size: 14.8px; color: var(--pg-muted-l); line-height: 1.65; }

/* --------------------------------------------------------- proposal cards */
#ao-gate .pg-prop {
  border: 1px solid var(--pg-line); border-radius: 18px; background: var(--pg-surface); overflow: hidden;
}
#ao-gate .pg-prop__head { padding: 20px 24px 16px; border-bottom: 1px solid var(--pg-line-soft); display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
#ao-gate .pg-prop__tick {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff; background: rgba(174, 31, 25, 0.9);
  border-radius: 10px; padding: 7px 13px; flex: none;
}
#ao-gate .pg-prop__ttl { font-size: 17px; font-weight: 800; line-height: 1.25; }
#ao-gate .pg-prop__by { font-size: 12.8px; color: var(--pg-muted); margin-top: 3px; }
#ao-gate .pg-prop__tags { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
#ao-gate .pg-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  border-radius: 999px; padding: 5px 11px; border: 1px solid var(--pg-line); color: var(--pg-muted); white-space: nowrap;
}
#ao-gate .pg-tag--buy { background: rgba(22, 163, 74, 0.16); border-color: rgba(74, 222, 128, 0.38); color: #86efac; }
#ao-gate .pg-tag--ok { background: rgba(232, 99, 90, 0.14); border-color: rgba(232, 99, 90, 0.36); color: #f7b0aa; }
#ao-gate .pg-prop__body { padding: 18px 24px 20px; font-size: 14.6px; line-height: 1.68; color: var(--pg-muted); }
#ao-gate .pg-prop__thread { border-top: 1px solid var(--pg-line-soft); padding: 6px 24px 20px; }
#ao-gate .pg-msg { padding: 15px 0 0; }
#ao-gate .pg-msg + .pg-msg { border-top: 1px dashed var(--pg-line-soft); }
#ao-gate .pg-msg__who { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
#ao-gate .pg-msg__role {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 999px; padding: 3px 9px;
}
#ao-gate .pg-msg__role--risk { background: rgba(220, 38, 38, 0.2); color: #fca5a5; }
#ao-gate .pg-msg__role--pm { background: rgba(22, 163, 74, 0.2); color: #86efac; }
#ao-gate .pg-msg__nm { font-size: 13px; font-weight: 700; color: rgba(247, 242, 241, 0.92); }
#ao-gate .pg-msg__b { font-size: 14px; line-height: 1.66; color: var(--pg-muted); margin: 0; }
#ao-gate .pg-msg__b + .pg-msg__b { margin-top: 9px; }

/* ------------------------------------------------------------- photo grid */
#ao-gate .pg-photos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
#ao-gate .pg-photo { position: relative; border-radius: 15px; overflow: hidden; background: #1a0605; min-height: 190px; }
#ao-gate .pg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
#ao-gate .pg-photo:hover img { transform: scale(1.045); }
#ao-gate .pg-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 15px; font-size: 13px; font-weight: 600;
  color: #fff; line-height: 1.45;
  background: linear-gradient(to top, rgba(12, 3, 2, 0.88), rgba(12, 3, 2, 0));
}
#ao-gate .pg-photo--wide { grid-column: span 7; }
#ao-gate .pg-photo--half { grid-column: span 5; }
#ao-gate .pg-photo--third { grid-column: span 4; }
#ao-gate .pg-photo--tall { grid-column: span 5; }
#ao-gate .pg-photo--full { grid-column: span 12; min-height: 260px; }

/* ------------------------------------------------------------ supervisors */
#ao-gate .pg-sup { display: grid; grid-template-columns: 232px 1fr; gap: 30px; align-items: start; }
#ao-gate .pg-sup + .pg-sup { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--pg-line-l); }
#ao-gate .pg-sup__pic {
  border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, #fdeceb, #f6e3e1);
  aspect-ratio: 4 / 5; display: grid; place-items: end center;
}
#ao-gate .pg-sup__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
#ao-gate .pg-sup__nm { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; }
#ao-gate .pg-sup__ro { font-size: 14.5px; color: var(--pg-red); font-weight: 700; margin: 0 0 12px; }
#ao-gate .pg-sup__bio { font-size: 15px; color: var(--pg-muted-l); line-height: 1.68; margin: 0 0 20px; max-width: 640px; }
#ao-gate .pg-sup__li {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--pg-red);
  border: 1px solid #f0d6d4; background: #fdeceb; border-radius: 999px; padding: 6px 14px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
#ao-gate .pg-sup__li:hover { background: #fbdcda; border-color: #e6bdba; }
#ao-gate .pg-cv { list-style: none; margin: 0 0 20px; padding: 0; }
#ao-gate .pg-cv li { display: flex; gap: 22px; align-items: center; padding: 15px 0; border-top: 1px solid var(--pg-line-l); }
#ao-gate .pg-cv li:first-child { border-top: 0; }
/* No plate, no border — the wordmark sits directly on the cream and is given a
   generous fixed column so the wide lockups (UMushroom ~3.6:1, St. Gallen,
   Advantere) read at the same optical weight as the tall marks. */
#ao-gate .pg-cv__logo {
  width: 132px; height: 46px; flex: none; display: flex; align-items: center; justify-content: flex-start;
}
#ao-gate .pg-cv__logo img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: left center; display: block; }
#ao-gate .pg-cv__logo--txt {
  font-size: 12.5px; font-weight: 800; color: var(--pg-ink-l); letter-spacing: -0.01em; line-height: 1.15;
}
#ao-gate .pg-cv__ro { font-size: 14.2px; font-weight: 700; color: var(--pg-ink-l); line-height: 1.35; }
#ao-gate .pg-cv__mt { font-size: 12.6px; color: var(--pg-muted-l); margin-top: 2px; line-height: 1.45; }
#ao-gate .pg-cv__yr { margin-left: auto; font-size: 12.2px; color: #9ca3af; white-space: nowrap; flex: none; padding-left: 10px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- calendar */
#ao-gate .pg-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 13px; }
#ao-gate .pg-cal__m { border: 1px solid var(--pg-line-l); border-radius: 14px; overflow: hidden; background: #fff; }
#ao-gate .pg-cal__h { background: var(--pg-red); color: #fff; font-size: 13.5px; font-weight: 800; padding: 9px 14px; letter-spacing: -0.01em; }
#ao-gate .pg-cal__b { padding: 12px 14px 14px; }
#ao-gate .pg-cal__r { font-size: 12.8px; color: var(--pg-ink-l); line-height: 1.5; padding: 3px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
#ao-gate .pg-cal__wk { font-weight: 800; color: var(--pg-red); flex: none; }
#ao-gate .pg-cal__q { font-size: 12.5px; color: #9ca3af; font-style: italic; line-height: 1.5; }
#ao-gate .pg-chip {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 4px; padding: 2px 5px; white-space: nowrap;
}
#ao-gate .pg-chip--desk { background: #eef2ff; color: #4338ca; }
#ao-gate .pg-chip--aut { background: #fef3c7; color: #92400e; }
#ao-gate .pg-chip--spr { background: #dcfce7; color: #166534; }
#ao-gate .pg-chip--rep { background: #fdeceb; color: var(--pg-red); }

/* -------------------------------------------------------- the certificate */
#ao-gate .pg-cert { display: grid; grid-template-columns: 1.35fr 1fr; gap: 46px; align-items: center; }
#ao-gate .pg-cert__shot {
  margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--pg-line);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5); background: #ebe5d6;
  transform: rotate(-1.2deg); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#ao-gate .pg-cert__shot:hover { transform: rotate(0deg) scale(1.015); }
#ao-gate .pg-cert__shot img { width: 100%; display: block; }
#ao-gate .pg-cert__list { list-style: none; margin: 0 0 26px; padding: 0; }
#ao-gate .pg-cert__list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 9px 0;
  font-size: 15px; line-height: 1.6; color: var(--pg-muted);
}
#ao-gate .pg-cert__list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--pg-red-br); }
#ao-gate .pg-cert__list strong { color: rgba(247, 242, 241, 0.94); }

/* ------------------------------------------------------------- final CTA */
#ao-gate .pg-final {
  text-align: center; border: 1px solid var(--pg-line); border-radius: 26px; padding: 66px 32px;
  background: rgba(255, 255, 255, 0.035); position: relative; overflow: hidden;
}
#ao-gate .pg-final::after {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 300px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(174, 31, 25, 0.22), transparent);
}
#ao-gate .pg-final .pg-h2 { position: relative; z-index: 1; }
#ao-gate .pg-final .pg-lead { position: relative; z-index: 1; }
#ao-gate .pg-final .pg-cta-row { position: relative; z-index: 1; }
#ao-gate .pg-price { font-size: 13.5px; color: var(--pg-muted); margin: 22px 0 0; position: relative; z-index: 1; }

/* --------------------------------------------- the live book, hosted up top
   renderLanding() relocates the real #ao-portal node (and the legacy public CTA)
   into #pg-book-slot so the live paper book sits directly under the hero. The
   node keeps its identity, so the portfolio engine and its listeners survive
   the move — the CTA is hidden because this section provides the framing. */
#ao-gate #pg-book-slot { margin-top: 8px; }
#ao-gate #pg-book-slot #ap-public-cta { display: none !important; }
#ao-gate #pg-book-slot .ao-shell { margin: 0 auto; padding: 0; max-width: none; }
#ao-gate #pg-book-slot .ao-card { border-radius: 16px; }

/* --------------------------------------------------------- reveal on scroll */
#ao-gate .pg-rise { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
#ao-gate .pg-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #ao-gate .pg-rise { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  #ao-gate .pg-authors__stage { grid-template-columns: 1fr; gap: 26px; }
  #ao-gate .pg-rail__m { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
  #ao-gate .pg-sup { grid-template-columns: 168px 1fr; gap: 22px; }
  #ao-gate .pg-pipe { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  #ao-gate .pg-pipe::before { display: none; }
  #ao-gate .pg-flip { grid-template-columns: 1fr; }
  #ao-gate .pg-flip__arrow { transform: rotate(90deg); padding: 4px 0; }
  #ao-gate .pg-photo--wide, #ao-gate .pg-photo--half, #ao-gate .pg-photo--third, #ao-gate .pg-photo--tall { grid-column: span 6; }
}
@media (max-width: 700px) {
  #ao-gate .pg-band { padding: 62px 0; }
  #ao-gate .pg-hero { padding: 62px 0 52px; }
  #ao-gate .pg-wrap { padding: 0 18px; }
  /* Supervisors read as a profile card on a phone: portrait, name and role
     centred, and each CV entry stacked (mark, role, employer, years) instead of
     a four-column row squeezed into 340px. */
  #ao-gate .pg-sup { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  #ao-gate .pg-sup__pic { width: 190px; max-width: 190px; margin: 0 auto 4px; border-radius: 50%; aspect-ratio: 1; }
  #ao-gate .pg-sup__pic img { object-position: center 6%; }
  #ao-gate .pg-sup__nm { font-size: 26px; }
  #ao-gate .pg-sup__ro { margin-bottom: 14px; }
  #ao-gate .pg-sup__bio { margin-left: auto; margin-right: auto; }
  #ao-gate .pg-sup + .pg-sup { margin-top: 30px; padding-top: 30px; }
  #ao-gate .pg-cv { margin-bottom: 22px; }
  #ao-gate .pg-cv li {
    flex-direction: column; align-items: center; text-align: center;
    gap: 7px; padding: 18px 0;
  }
  #ao-gate .pg-cv__logo { width: auto; max-width: 150px; height: 30px; justify-content: center; margin-bottom: 2px; }
  #ao-gate .pg-cv__logo img { object-position: center; }
  #ao-gate .pg-cv__logo--txt { font-size: 13px; }
  #ao-gate .pg-cv__ro { font-size: 15px; }
  #ao-gate .pg-cv__mt { max-width: 320px; margin-left: auto; margin-right: auto; }
  #ao-gate .pg-cv__yr {
    order: 5; margin: 2px 0 0; padding: 0; width: auto; font-weight: 700;
    color: var(--pg-red); font-size: 12px; letter-spacing: 0.04em;
  }
  #ao-gate .pg-sup__li { margin: 0 auto; }
  #ao-gate .pg-photo--wide, #ao-gate .pg-photo--half, #ao-gate .pg-photo--third,
  #ao-gate .pg-photo--tall, #ao-gate .pg-photo--full { grid-column: span 12; }
  #ao-gate .pg-final { padding: 46px 20px; }
  #ao-gate .pg-prop__tags { margin-left: 0; }
  #ao-gate .pg-time { padding-left: 34px; }
  #ao-gate .pg-time::before { left: 9px; }
  #ao-gate .pg-time li::before { left: -31px; }
  #ao-gate .pg-strip__i { height: 148px; }
}

/* ---- Mobile: the program page must never scroll horizontally -------------
   Everything wide on this page (the marquee, the module filmstrip, the hoisted
   portfolio) lives in its own clipped or scrollable box. This is the backstop:
   nothing inside the gate may exceed the viewport and push the document wide. */
#ao-gate img, #ao-gate figure, #ao-gate table { max-width: 100%; }
#ao-gate .pg-band, #ao-gate .pg-hero, #ao-gate .pg-cred { overflow-x: clip; }

@media (max-width: 700px) {
  #ao-gate #pg-book-slot { margin-top: 4px; }
  #ao-gate .pg-cert { grid-template-columns: 1fr; gap: 26px; }
  #ao-gate .pg-cert__shot { transform: none; }
  #ao-gate .pg-cred__row { gap: 26px 30px; }
  #ao-gate .pg-cred__row img { height: 24px; max-width: 116px; }
  #ao-gate .pg-cred__row img.tall { height: 28px; }
  #ao-gate .pg-cred__row img.wide { height: 19px; max-width: 128px; }
  #ao-gate .pg-cred__row img.xwide { width: 150px; max-width: 150px; }
  #ao-gate .pg-authors__stage { gap: 20px; }
  #ao-gate .pg-stats b { font-size: 30px; }
  #ao-gate .pg-prop__head { padding: 16px 16px 13px; }
  #ao-gate .pg-prop__body, #ao-gate .pg-prop__thread { padding-left: 16px; padding-right: 16px; }
}