/* Humantic AI · Webinars (website version, Oct 2026)
 * Adapted from current-campaigns/website-events-page/build/assets/styles.css.
 * Nav and footer come from /comparison-assets/hai-brand.css (hx-nav, hx-foot).
 * Palette: proposed column C (gold, ink, violet, lavender, mist, cream, slate).
 * Band rhythm: dark hero → yellow live bar → light archive → cool manifesto
 *              → warm FAQ → deep CTA → near-black footer.
 * No two adjacent bands share a value. Yellow carries a surface, not only buttons.
 * Tokens verified against the live humantic.ai GEN 2 system, Sep 2026.
 */

:root {
  /* Brand */
  --yellow-100: #FFF9E9;
  --yellow-200: #FFF4D2;
  --yellow-300: #FFE8A5;
  --yellow-400: #FFDD78;
  --yellow-500: #FFD14B;
  --yellow-600: #FFC61E;
  --yellow-700: #CC9E18;

  --purple-1100: #0C0724;
  --purple-1000: #110A33;
  --purple-900:  #110A33;
  --violet:      #341D99;   /* brand violet (AK, Oct 2026). Change here only. */
  --purple-800:  var(--violet);
  --purple-400:  #9A83FF;
  --purple-300:  #BBACFF;
  --purple-200:  #DDD6FF;
  --purple-100:  #F6F4FF;

  /* Surfaces */
  --surface-page:  #FDFCFF;
  --surface-cool:  var(--purple-100);
  --surface-warm:  var(--yellow-100);
  --surface-card:  #FEFDFF;
  --dark-hero:     var(--purple-1000);
  --dark-cta:      var(--purple-900);
  --dark-footer:   var(--purple-1100);

  /* Ink */
  --ink:       var(--purple-1000);
  --ink-muted: #5B6478;
  --ink-dim:   #5B6478;              /* 4.98:1 on page white. Was #8A8FA3 at 3.14:1. */
  --line:      rgba(17, 10, 51, 0.10);

  /* On dark */
  --dark-text:      #FFFFFF;
  --dark-muted:     #A9A4C4;
  --dark-dim:       #9891BC;
  --dark-line:      rgba(255, 255, 255, 0.12);

  /* Focus: yellow is 1.5:1 on light grounds, so it only rides on dark. */
  --focus-on-light: var(--purple-1000);
  --focus-on-dark:  var(--yellow-600);

  /* Type */
  --font-display: "Cabinet Grotesk", Arial, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;

  /* Nine steps with real ratios. The previous scale had 13 sizes, eight of them
     inside a 12px range, which is why nothing on the page felt ranked. */
  --t-mast: clamp(3.25rem, 1rem + 9vw, 8.25rem);
  --t-1:    clamp(1.75rem, 1.15rem + 2vw, 2.5rem);
  --t-2:    clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --t-3:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --t-lead: clamp(1rem, 0.96rem + 0.28vw, 1.125rem);
  --t-body: 1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;
  --t-label: 0.6875rem;

  --step-mast: var(--t-mast);
  --step-h2:   var(--t-1);
  --step-h3:   var(--t-3);
  --step-lead: var(--t-lead);

  /* Space */
  --shell: 1280px;
  --shell-wide: 1280px;   /* one width. The 80px left-edge jog between bands was unjustified. */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --band: clamp(3.5rem, 6vw, 5.5rem);
  --band-major: clamp(5.5rem, 10vw, 9rem);

  /* Two radii, assigned by rank. Not one value on everything. */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-lg: 28px;

  --shadow-card: 0 14px 40px rgba(17, 10, 51, 0.10);
  --shadow-lift: 0 28px 64px rgba(17, 10, 51, 0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
html.is-locked, body.is-locked { overflow: hidden; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* An author display rule beats the UA [hidden] rule, so restate it. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--focus-on-light); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .close-cta :focus-visible,
.player > :focus-visible { outline-color: var(--focus-on-dark); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: var(--shell-wide); }

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

.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--purple-1000); color: #fff; padding: 0.75rem 1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius-pill); border: 1.33px solid transparent;
  padding: 0.7rem 1.3rem; min-height: 44px;
  font-size: 0.875rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background-color: var(--yellow-500); }
.btn--primary { background: var(--yellow-600); color: var(--purple-1000); }
.btn--primary:hover { background: var(--yellow-500); }
.btn--inverse { background: var(--purple-1000); color: #fff; }
.btn--inverse:hover { background: var(--purple-900); }
.btn--ghost { background: transparent; color: var(--purple-1000); border-color: var(--purple-1000); }
.btn--ghost:hover { background: var(--purple-1000); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn--ghost-light:hover { background: #fff; color: var(--purple-1000); border-color: #fff; }

/* ============================================================
   HERO  ·  light, like the homepage and the comparison pages.
   Says what the page is, then shows the newest session.
   ============================================================ */

.hero {
  position: relative; overflow: clip;
  background: var(--surface-cool);
  padding: clamp(8.5rem, 12vw, 10.5rem) 0 0;
}
.hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 6vw, 76px);
  letter-spacing: -0.035em; line-height: 1.06; color: var(--ink);
}
.hero__lead { font-size: var(--t-lead); color: var(--ink-muted); max-width: 44ch; margin-top: 1.25rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 2rem;
  font-size: var(--t-sm); color: var(--ink-muted);
}
.hero__facts b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The newest session, shown rather than described. */
.latest {
  display: block; background: var(--surface-card); border: 1px solid #E6E8EF;
  border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.latest:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.latest .card__media { border-radius: 18px; }
.latest__body { padding: 1rem 0.75rem 0.5rem; }
.latest__label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0; color: var(--violet); /* no tracked caps label (AK, Oct 12) */
}
.latest__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-600); box-shadow: 0 0 0 4px var(--yellow-200); }
.latest h2 { font-size: clamp(27px, 3.4vw, 44px); margin-top: 0.6rem; line-height: 1.12; font-weight: 700; }
.latest__people { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); color: var(--ink-muted); }
.latest__people b { color: var(--ink); }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

/* entrance: one orchestrated load */
.hero__copy > *, .latest { animation: rise 640ms var(--ease-out) both; }
.hero__copy > :nth-child(2) { animation-delay: 80ms; }
.hero__copy > :nth-child(3) { animation-delay: 160ms; }
.hero__copy > :nth-child(4) { animation-delay: 240ms; }
.latest { animation-delay: 200ms; }

/* ============================================================
   THE CALLOUT  ·  one continuous strip. The only place the page
   asks you to do something before you have seen anything.
   ============================================================ */

.marquee {
  display: block; background: var(--yellow-600); color: var(--purple-1000);
  overflow: clip; position: relative; z-index: 2;
  border-block: 2px solid var(--purple-1000);
}
.marquee__track {
  display: flex; width: max-content; align-items: center;
  padding: 0.8rem 0;
  animation: marq 38s linear infinite;
}
.marquee:hover .marquee__track, .marquee:focus-visible .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 1.25rem; padding-right: 1.25rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  white-space: nowrap;
}
.marquee__item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--purple-1000); opacity: 0.4;
}
.marquee__item b { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   ARCHIVE
   ============================================================ */

.archive { padding: 64px 0; }
.archive__head { max-width: 46ch; }
.archive__count { text-align: right; font-family: var(--font-display); }
.archive__count b {
  display: block; font-size: 3.75rem; font-weight: 800; line-height: 0.9;
  letter-spacing: -0.04em; color: var(--purple-800); font-variant-numeric: tabular-nums;
}
.archive__count span {
  font-family: var(--font-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0; font-size: 0.875rem; color: var(--ink-dim);
}
@media (max-width: 740px) { .archive__head { grid-template-columns: 1fr; } .archive__count { text-align: start; } }
.archive__head h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; }
.archive__head h2 + p { font-size: 17.5px; line-height: 1.6; font-weight: 400; }
.archive__head p { color: var(--ink-muted); max-width: 46ch; margin-top: 0.75rem; }

.filters {
  position: sticky; top: 78px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 3.5rem 0 2.5rem; padding: 0.9rem 0 1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(10px);
}
.filter {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-muted); border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; min-height: 40px;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter:hover { color: var(--ink); border-color: rgba(17,10,51,0.3); }
.filter b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.55; }
.filter[aria-checked="true"] { background: var(--purple-1000); color: #fff; border-color: var(--purple-1000); }
.filter[aria-checked="true"] b { opacity: 0.7; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 44px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 740px)  { .cards { grid-template-columns: 1fr; row-gap: 36px; } }

.card {
  display: flex; flex-direction: column;
  background: transparent; border: 0;
  border-top: 2px solid var(--ink);      /* the rule defines the item, not a box */
  padding-top: 1rem;
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-top-color: var(--purple-800); }

.card__media {
  position: relative; overflow: clip; background: var(--purple-1000);
  border-radius: 10px;
  aspect-ratio: 1200 / 630;        /* the box owns the ratio */
}
.card__media::before { content: ""; display: block; padding-top: 52.5%; }  /* holds the ratio pre-settle */
.card__media img {
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

/* Cover. No photography and no numbers. Each session shows its own problem
   sentence, sized by character count, on a ground seeded from its slug, so all
   fourteen differ in meaning rather than in decoration. Numbering was dropped
   deliberately: a visible gap in a sequence advertises a missing session. */
.cover {
  position: absolute; inset: 0;    /* fills the box, never resizes it */
  container-type: inline-size; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4cqw;
  padding: 5.2cqw 5.6cqw 6cqw;
  background: var(--purple-1000); color: #fff;
}
/* Real cover art (Oct 17): the artwork already carries title, date and guests,
   so the generated plate's text and rail step aside and the image fills the box. */
.cover--photo { padding: 0; }
.cover--photo .cover__photo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: center;
}
.cover--photo .cover__head, .cover--photo .cover__line, .cover--photo .cover__rail { display: none; }
.cover__field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(74% 96% at var(--hx, 40%) var(--hy, 22%),
      color-mix(in oklab, var(--accent, #FFC61E) 26%, transparent) 0%, transparent 62%),
    linear-gradient(var(--angle, 158deg), #1C1147 0%, #0B0620 74%);
  transition: transform var(--dur-slow) var(--ease);
}
.cover__field::after {
  content: ""; position: absolute; inset: 0; opacity: 0.14;
  background: repeating-linear-gradient(to right, rgba(255,255,255,.55) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.cover__rail {
  position: absolute; top: 0; bottom: 0; left: var(--rail, 40%); width: 1px; z-index: -1;
  opacity: 0.7; transition: opacity var(--dur) var(--ease);
  background: linear-gradient(to bottom, transparent,
    color-mix(in oklab, var(--accent, #FFC61E) 70%, transparent) 34%, transparent);
}
.cover__rail::before {
  content: ""; position: absolute; left: -2px; top: 34%;
  width: 5px; height: 5px; background: var(--accent, #FFC61E);
}
.cover__head {
  position: absolute; top: 5.2cqw; left: 5.6cqw; right: 5.6cqw;
  display: flex; align-items: center; gap: 2.4cqw; font-family: var(--font-body);
  font-size: max(12px, 2.9cqw); font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1;
}
.cover__topic { color: var(--accent, #FFC61E); }
.cover__topic::before {
  content: ""; display: inline-block; width: 4.8cqw; height: 2px;
  background: currentColor; margin-right: 1.8cqw; vertical-align: 0.22em;
  transition: width var(--dur) var(--ease);
}
.cover__format { color: rgba(255,255,255,.52); font-weight: 700; letter-spacing: 0.1em; }
.cover__line {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.06; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cover--xl .cover__line { font-size: max(14px, 11.5cqw); letter-spacing: -0.03em; }
.cover--lg .cover__line { font-size: max(14px, 9.2cqw); }
.cover--md .cover__line { font-size: max(14px, 7.2cqw); }
.cover--sm .cover__line { font-size: max(14px, 6.2cqw); letter-spacing: -0.015em; }
.cover--xs .cover__line { font-size: max(14px, 5.4cqw); letter-spacing: -0.01em; line-height: 1.12; }
/* Phone covers are ~245px wide: the head wraps onto two lines instead of overflowing. */
@media (max-width: 767px) {
  .cover__head { flex-wrap: wrap; row-gap: 0.45em; letter-spacing: 0.08em; }
}

.cover--product { background: #0C0724; }
.cover--product .cover__line { font-weight: 500; }
.cover--product .cover__field {
  background:
    radial-gradient(64% 90% at var(--hx, 40%) var(--hy, 22%),
      color-mix(in oklab, var(--accent, #FFC61E) 20%, transparent) 0%, transparent 58%),
    linear-gradient(var(--angle, 158deg), #150C3A 0%, #080418 76%);
}

@media (hover: hover) {
  .card:hover .cover__field { transform: scale(1.045); }
  .card:hover .cover__rail { opacity: 1; }
  .card:hover .cover__topic::before { width: 8.4cqw; }
}
.card:focus-visible .cover__rail { opacity: 1; }
.card:focus-visible .cover__topic::before { width: 8.4cqw; }
@media (prefers-reduced-motion: reduce) {
  .cover__field, .cover__rail, .cover__topic::before { transition: none; }
  .card:hover .cover__field { transform: none; }
}

/* Duration sits in the cover corner, as TED and Louisiana do. */
.card__dur {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  font-size: max(12px, var(--t-label)); font-weight: 700;
  color: #fff; background: rgba(9, 5, 26, 0.6); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 0.2rem 0.55rem;
}
.card__play {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.34);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card__play svg { width: 12px; height: 14px; fill: #fff; margin-left: 2px; transition: fill var(--dur) var(--ease); }
.card__play { background: rgba(9,5,26,0.55); border-color: rgba(255,255,255,0.4); }

@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.045); }
  .card:hover .card__play { background: #fff; border-color: #fff; transform: scale(1.06); }
  .card:hover .card__play svg { fill: var(--purple-1000); }
  .card:hover .card__title { color: var(--purple-800); }
}
.card:focus-visible { outline: 3px solid var(--focus-on-light); outline-offset: 4px; }
.card:focus-visible .card__play { background: #fff; border-color: #fff; }
.card:focus-visible .card__play svg { fill: var(--purple-1000); }

.card__body { display: flex; flex-direction: column; flex: 1; gap: 0.55rem; padding: 1rem 0 0; }
.card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; font-weight: 700;
  line-height: 1.12; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(3 * 1.35em);   /* em resolves against the title, so it fits */
  transition: color var(--dur) var(--ease);
}
.card__people { display: flex; align-items: flex-start; gap: 0.6rem; }
.card__kicker {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0;
  color: var(--accent-ink, var(--purple-800));
}
.card__kicker {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0;
  color: var(--accent-ink, var(--purple-800));
}
.card__names {
  font-size: var(--t-sm); font-weight: 400; line-height: 1.35; color: var(--ink-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.card__names b { color: var(--ink); font-weight: 700; }
.card__names .sep, .hero__names .sep { opacity: 0.45; }
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: auto; padding-top: 0.85rem;
}
.card__meta { font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.card__watch { font-size: var(--t-xs); font-weight: 700; color: var(--purple-800); white-space: nowrap; }
.card:hover .card__watch { text-decoration: underline; }
.tag {
  font-size: 0.75rem; font-weight: 600;
  color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
}

.faces { display: flex; }
.face {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 800;
  color: var(--purple-1000); background: var(--purple-200);
  box-shadow: 0 0 0 2px var(--purple-400), 0 0 0 4px var(--surface-page);
  background-size: cover; background-position: center;
}
.face + .face { margin-left: -9px; }
.face--alt { background: var(--yellow-300); box-shadow: 0 0 0 2px var(--yellow-600), 0 0 0 4px var(--surface-page); }
/* Photo faces: same circle, size and ring as the initials faces. */
img.face--photo { object-fit: cover; padding: 0; font-size: 0; color: transparent; }

/* Product-walkthrough era reads differently, driven by the data not decoration. */
.card--product .card__media::after { background: linear-gradient(transparent, rgba(52, 29, 153, 0.86)); }
.card--product .card__stamp span { color: var(--purple-200); }

.more { margin-top: 2.75rem; }
.more { display: flex; justify-content: center; }
.more__btn {
  background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.more__btn:hover { background: var(--purple-1000); color: #fff; border-color: var(--purple-1000); }
.more__left { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.more__btn:hover .more__arrow { transform: translateY(3px); }
.more__arrow { transition: transform var(--dur) var(--ease); }

.empty {
  grid-column: 1 / -1; padding: 3.5rem 1rem; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.empty h3 { font-size: 19px; line-height: 1.12; font-weight: 700; }
.empty p { color: var(--ink-muted); margin: 0.6rem auto 1.5rem; max-width: 38ch; }

/* ============================================================
   FAQ · warm light
   ============================================================ */

.faq { background: var(--surface-page); padding: calc(var(--band) * 0.7) 0; border-top: 1px solid var(--line); }
.faq h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-align: center; }
.faq h2 + p { font-size: 17.5px; line-height: 1.6; font-weight: 400; }
.faq__intro { display: none; }
.faq__list { max-width: 42rem; margin: 1.5rem auto 0; }
.faq__group { display: none; }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 0.9rem 0;
  transition: color 150ms var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(17px, 1rem + 0.2vw, 19px); letter-spacing: 0; line-height: 1.45; margin: 0;
}
.faq__q:hover { color: var(--purple-800); }
.faq__item[open] > .faq__q { color: var(--purple-800); }
.faq__sign { position: relative; flex: none; width: 13px; height: 13px; }
.faq__sign i {
  position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transform: translateY(-50%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__sign i:last-child { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__sign i:last-child { transform: translateY(-50%) rotate(0deg); }
.faq__a { overflow: hidden; }
.faq__a p {
  color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6;
  padding: 0 0 1.15rem; max-width: 64ch; margin: 0;
}
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__sign i, .faq__q { transition: none !important; } }

/* ============================================================
   CLOSE + FOOTER
   ============================================================ */

.close-cta { background: #fff; color: #110A33; padding: var(--band) 0; }
.close-cta__grid { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.75rem; }
.close-cta h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; margin-inline: auto; }
.close-cta h2 + p { font-size: 17.5px; line-height: 1.6; font-weight: 400; }
.close-cta p { color: #5B6478; margin-top: 1.25rem; max-width: 52ch; margin-inline: auto; }
.close-cta__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 820px) { .close-cta__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SESSION PAGE
   ============================================================ */

.session { padding: clamp(6.5rem, 11vw, 8.5rem) 0 var(--band); }
.crumbs { font-size: 0.8125rem; color: var(--ink-dim); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--purple-800); }
.session__head { max-width: 62ch; margin-top: 1.75rem; }
.session__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.75rem; font-weight: 700; }
.session__meta span { background: var(--surface-cool); color: var(--purple-800); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; }
.session__head h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.06; margin-top: 1.25rem; }

.session__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); margin-top: 2.5rem; align-items: start; }
@media (max-width: 940px) { .session__grid { grid-template-columns: 1fr; } }

.player { position: relative; border-radius: var(--radius-card); overflow: clip; background: var(--purple-1000); box-shadow: var(--shadow-card); }
.player__poster { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.player__sweep { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--yellow-600); transform: scaleX(0); transform-origin: left; z-index: 3; }
.player__btn {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  background: rgba(9, 5, 26, 0.38);
  display: grid; place-items: center; align-content: center; gap: 0.9rem;
  transition: background-color var(--dur) var(--ease);
}
.player__btn:hover { background: rgba(9, 5, 26, 0.2); }
.player__disc {
  width: 76px; height: 76px; border-radius: 50%; background: var(--yellow-600);
  display: grid; place-items: center; box-shadow: 0 18px 46px rgba(0,0,0,0.45);
  transition: transform var(--dur) var(--ease);
}
.player__btn:hover .player__disc { transform: scale(1.05); }
.player__disc svg { width: 22px; height: 26px; fill: var(--purple-1000); margin-left: 4px; }
.player__hint { font-size: 0.8125rem; font-weight: 700; color: #fff; }
.player iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

.session__body h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 700; line-height: 1.12; margin-top: 2.5rem; }
.session__body h2 + p { font-size: 17.5px; line-height: 1.6; font-weight: 400; }
.session__body p { color: var(--ink-muted); margin-top: 1rem; max-width: 68ch; }
.session__lede { font-size: 1.1875rem; color: var(--ink) !important; font-weight: 500; margin-top: 2rem !important; }
.learn { margin-top: 1.25rem; display: grid; gap: 0.85rem; }
.learn li { position: relative; padding-left: 1.9rem; color: var(--ink-muted); max-width: 64ch; }
.learn li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 3px; background: var(--yellow-600); }

.aside {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.75rem;
  box-shadow: var(--shadow-card); position: sticky; top: 6.5rem;
}
.aside h2 { font-size: clamp(27px, 3.4vw, 44px); letter-spacing: 0; color: var(--ink); font-family: var(--font-display); font-weight: 700; line-height: 1.12; }
.speaker { display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 1.25rem; }
.speaker .face { width: 46px; height: 46px; font-size: 0.8125rem; }
.speaker__name { font-weight: 700; font-size: 0.9375rem; }
.speaker__role { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.4; }
.aside__divider { height: 1px; background: var(--line); margin: 1.5rem 0; }
.aside__cta { display: grid; gap: 0.6rem; }
.aside__note { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 1rem; }

/* Related sits on a warm ground so the page does not end in three dark bands. */
.related { background: var(--surface-warm); padding: calc(var(--band) * 0.9) 0; }
.related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.related h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 700; line-height: 1.12; }
.related h2 + p { font-size: 17.5px; line-height: 1.6; font-weight: 400; }
.related__all { font-size: 0.8125rem; font-weight: 700; color: var(--purple-800); }
.related__all:hover { text-decoration: underline; }
.related .cards { row-gap: 24px; }

.related .face { box-shadow: 0 0 0 2px var(--yellow-600), 0 0 0 4px var(--surface-warm); }
.related .face--alt { box-shadow: 0 0 0 2px var(--purple-400), 0 0 0 4px var(--surface-warm); }

/* ============================================================
   THE GATE
   ============================================================ */

.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(9, 5, 26, 0.72); backdrop-filter: blur(3px);
}
.gate[hidden] { display: none; }
.gate__panel {
  position: relative; background: var(--surface-card); border-radius: var(--radius-lg);
  width: min(30rem, 100%); max-height: 92vh; overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--shadow-lift);
}
.gate__panel h2 { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.12; font-weight: 700; }
.gate__why { font-size: 0.875rem; color: var(--ink-muted); margin-top: 0.75rem; }
.gate__close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink-dim);
}
.gate__close:hover { background: rgba(17,10,51,0.05); color: var(--ink); }

.field { margin-top: 1rem; }
.field label { display: block; font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.35rem; }
.field label span { color: var(--ink-dim); font-weight: 500; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 0.9375rem;
  padding: 0.7rem 0.85rem; border-radius: 10px;
  border: 1.5px solid rgba(17, 10, 51, 0.16);
  background: var(--surface-page); color: var(--ink);
  transition: border-color 160ms var(--ease);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--purple-800); box-shadow: 0 0 0 3px rgba(52, 29, 153, 0.12); }
.field[data-invalid="true"] input { border-color: #C6304A; }
.field__err {
  display: block; min-height: 1.2rem; font-size: 0.8125rem; color: #C6304A; margin-top: 0.3rem;
  opacity: 0; transform: translateY(-3px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.field[data-invalid="true"] .field__err { opacity: 1; transform: none; }
.gate__submit { width: 100%; margin-top: 1.25rem; }
.gate__submit[disabled] { opacity: 0.7; cursor: progress; }
.gate__foot { font-size: 0.75rem; color: var(--ink-dim); margin-top: 1rem; text-align: center; }

/* ============================================================
   MOTION · 9 moments, no more
   ============================================================ */

@keyframes rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); } to { opacity: 1; transform: none; } }

.hero__kicker, .hero h1, .hero__lead, .hero__facts { animation: rise 460ms var(--ease-out) both; }
.hero h1 { animation-delay: 70ms; }
.hero__lead { animation-delay: 140ms; }
.hero__facts { animation-delay: 210ms; }

.gate:not([hidden]) { animation: gate-in 200ms linear; }
.gate:not([hidden]) .gate__panel { animation: panel-in 340ms var(--ease-out); }

.reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, .card:hover .card__media img, .player__btn:hover .player__disc { transform: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Per-card reveal. The archive is the longest section on the page and
   previously animated exactly once, offscreen. 28px of travel, column stagger. */
.card[data-in="0"] { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); }
.card[data-in="1"] { animation: card-in 620ms var(--ease-out) var(--d, 0ms) forwards; }
@keyframes card-in { to { opacity: 1; transform: none; } }


@media (prefers-reduced-motion: reduce) {
  .card[data-in] { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* The clicked card becomes the session poster. */
@view-transition { navigation: auto; }
::view-transition-group(session-media) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.22,1,0.36,1); }
.card.is-morphing .card__media { view-transition-name: session-media; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }


/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
  /* ten chips over seven rows pushed every card below the fold */
  .filters {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none; -ms-overflow-style: none;
    position: static;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { scroll-snap-align: start; flex: none; min-height: 44px; }
  body .find input { max-width: none; font-size: 1rem; min-height: 44px; }
  .hero { padding-top: clamp(6.5rem, 22vw, 8rem); }
}

/* ============================================================
   MOTION  ·  six moments, four of them answering the user
   ============================================================ */



/* Cards arrive once, gently, and then stay put. */
.card[data-in="0"] { opacity: 0; transform: translate3d(0, 22px, 0); }
.card[data-in="1"] { animation: card-in 560ms var(--ease-out) var(--d, 0ms) forwards; }
@keyframes card-in { to { opacity: 1; transform: none; } }

/* Type anywhere to search the whole archive. */
.find { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 2rem; }
.find input {
  flex: 1; max-width: 22rem; font: inherit; font-size: 0.9375rem; padding: 0.65rem 1rem;
  border: 1px solid rgba(17, 10, 51, 0.16); border-radius: 999px;
  background: var(--surface-card); color: var(--ink);
}
.find input:focus { outline: none; border-color: var(--purple-800); box-shadow: 0 0 0 3px rgba(52, 29, 153, 0.18); }
.find__n { font-size: 0.8125rem; font-weight: 700; color: var(--ink-dim); }
.card.is-out { display: none; }
.card.is-muted { opacity: 0.26; }

@media (prefers-reduced-motion: reduce) {
  .hero__status, .hero__kicker, .hero__mast > span, .hero__people,
  .hero__lead, .hero__cta > span, .hero__media {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .cards .card[data-in] { animation: none; opacity: 1; transform: none; }
  .hero__media:hover, .hero__media:hover .hero__play { transform: none; }
}


/* ============================================================
   WEBSITE ADDITIONS (Oct 2026)
   ============================================================ */

body.hai { background: var(--surface-page); }
.hx-foot { margin-top: 0; }

/* Filters sit under the floating pill nav, which hides on scroll down. */
.filters { top: 12px; }

/* Free preview: the player runs for 30 seconds, then this panel slides up
   over the video instead of a modal. One form unlocks every session on this visit. */
/* no isolation on .player: the phone-width gate is position:fixed and must sit above the nav */
.player__preview {
  position: absolute; left: 14px; top: 14px; z-index: 4;
  font-size: var(--t-xs); font-weight: 700; color: var(--ink);
  background: var(--yellow-600); border-radius: 999px; padding: 0.3rem 0.75rem;
  display: inline-flex; align-items: center; gap: 0.45rem; font-variant-numeric: tabular-nums;
}
.player__preview[hidden] { display: none; }
.gate--inline {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  background: rgba(17, 10, 51, 0.78); backdrop-filter: blur(6px); padding: 14px;
}
.gate--inline .gate__panel { width: min(26rem, 100%); max-height: 100%; }
@media (max-width: 640px) {
  /* a phone-width player is too short for the form, so the panel takes over the screen */
  .gate--inline { position: fixed; z-index: 1100; }
}

/* Session notes download, gated by the same form. */
.notes {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-card);
  background: var(--surface-cool); border: 1px solid #E6E8EF;
}
.notes p { margin: 0 !important; color: var(--ink) !important; font-weight: 600; }
.notes span { display: block; font-size: var(--t-sm); color: var(--ink-muted); font-weight: 400; }

.crumbs { margin-top: 0; }
.session { padding-top: clamp(7.5rem, 11vw, 9rem); }
/* Phone tap targets: breadcrumb and "All webinars" links get a 44px hit height, text size unchanged. */
@media (max-width: 1024px) {
  .crumbs a, .related__all { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The session player reuses the card cover as its poster. */
.player .card__media { border-radius: 0; }
.player .card__play { display: none; }
.player #player-host:empty { display: none; }
.player__btn[aria-busy="true"] .player__disc { animation: pulse 900ms var(--ease) infinite alternate; }
@keyframes pulse { to { transform: scale(0.92); } }
/* Play control in the poster's corner, so it never covers the cover headline. */
.player .player__btn {
  display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: flex-start;
  gap: 0.9rem; padding: clamp(14px, 3.5%, 28px);
  background: linear-gradient(to top, rgba(9, 5, 26, 0.35), transparent 45%);
}
.player .player__btn:hover { background: linear-gradient(to top, rgba(9, 5, 26, 0.5), transparent 55%); }
.player .player__disc { width: 64px; height: 64px; }
.player .player__hint { padding-bottom: 1.35rem; }


/* Hero signature: a conversation waveform. Every session here is two or three
   people talking, so the band under the hero is their voice, in brand colours.
   Bars are rendered on the server with seeded heights; they breathe slowly and
   hold still for reduced motion. */
.hero__grid { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.wave {
  position: relative; display: flex; align-items: flex-end; gap: clamp(3px, 0.45vw, 6px);
  height: clamp(72px, 9vw, 120px); padding: 0 var(--gutter);
  overflow: clip;   /* the marquee's top rule below is the baseline */
}
.wave i {
  flex: 1 1 0; min-width: 2px; height: var(--h); border-radius: 3px 3px 0 0;
  background: var(--c); transform-origin: bottom;
  animation: talk var(--t) var(--ease) var(--d) infinite alternate;
  animation-play-state: var(--wave-play, running);   /* paused off screen by webinars.js */
}
@keyframes talk { from { transform: scaleY(1); } to { transform: scaleY(var(--s)); } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; } }
/* Mobile clip fix: 96 bars at a 2px minimum plus 3px gaps need ~477px, but .wave clips at the screen edge (390 and 320).
   A 1px gap and bars that can shrink keep all 96 inside the gutter. Desktop unchanged. */
@media (max-width: 640px) {
  .wave { gap: 1px; }
  .wave i { min-width: 0; }
}
.hero h1 { max-width: 9ch; }
.hero h1 span { color: var(--violet); }

/* hai-brand.css colours every heading ink (body.hai h1..h4). Headings on dark
   bands must win over that rule, or they disappear into the background. */
body.hai .close-cta h1, body.hai .close-cta h2, body.hai .close-cta h3 { color: #110A33; }
body.hai .on-dark h1, body.hai .on-dark h2, body.hai .on-dark h3 { color: #fff; }


/* ============================================================
   Oct 20 evening (AK Batch 3, W1-W4): one clear order.
   Hero, latest session, archive, events, guests (compact), FAQs.
   Band rhythm: mist hero, white latest, mist archive, white events, mist guests, white FAQs.
   Motion: nothing here loops except the hero waveform. Hover and the one-time reveal only.
   ============================================================ */

/* ---------- 1. Hero: centred, short, no second block beside it ---------- */
.hero { padding: clamp(7rem, 10vw, 8.5rem) 0 0; }
.hero__in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero h1 { max-width: none; }
.hero__in .hero__lead { margin-inline: auto; max-width: 46ch; margin-top: 1rem; }
.hero__in .hero__cta { justify-content: center; margin-top: 1.5rem; }
.hero__in > * { animation: rise 640ms var(--ease-out) both; }
.hero__in > :nth-child(2) { animation-delay: 80ms; }
.hero__in > :nth-child(3) { animation-delay: 160ms; }
.hero__in > :nth-child(4) { animation-delay: 240ms; }
.wave { border-bottom: 2px solid var(--purple-1000); height: clamp(56px, 7vw, 88px); }

/* The 4 round faces and the count: one short pill that jumps to the guests row. */
.hero__guests {
  display: inline-flex; align-items: center; gap: 0.625rem; margin-top: 1.25rem;
  padding: 4px 16px 4px 4px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(17, 10, 51, 0.08);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero__guests:hover { box-shadow: 0 12px 32px -12px rgba(17, 10, 51, 0.22); transform: translateY(-2px); }
.hero__guests:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.gbubbles { display: flex; flex: none; }
.gbubbles img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  border: 2px solid #fff; background: var(--purple-200); flex: none;
}
.gbubbles img + img { margin-left: -10px; }
.hero__guests-note { font-size: var(--t-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- 2. Latest session: one wide card, the only thing on its band ---------- */
.feature { background: var(--surface-page); padding: clamp(2rem, 4vw, 3rem) 0; }
.latest {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: 12px;
}
.latest .card__media { border-radius: 18px; }
.latest__body { padding: 0.5rem 1rem 0.5rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.latest h2 { font-size: clamp(24px, 2.7vw, 38px); margin-top: 0; line-height: 1.12; }
.latest__sum { color: var(--ink-muted); font-size: 1rem; max-width: 52ch; }
.latest__people { margin-top: 0; }
.latest__btn { margin-top: 0.25rem; }
.latest:hover .latest__btn { background: var(--yellow-500); }
@media (max-width: 860px) {
  .latest { grid-template-columns: 1fr; }
  .latest__body { padding: 0.25rem 0.5rem 0.75rem; }
}

/* Nov 4 (AK): the next live session, one row above the latest replay. Registration is on Luma. Hidden once the session ends (server side). */
.nextlive {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  margin-bottom: 24px; padding: 16px 16px 16px 24px; border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1.5px solid var(--yellow-600); box-shadow: 0 2px 8px rgba(17, 10, 51, 0.08);
  color: var(--ink); text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.nextlive:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(17, 10, 51, 0.22); }
.nextlive:hover .nextlive__btn { background: var(--yellow-500); }
.nextlive:focus-visible { outline: 3px solid var(--focus-on-light); outline-offset: 3px; }
.nextlive__when { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 24px; border-right: 1px solid var(--line); }
.nextlive__tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--purple-200); color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap;
}
.nextlive__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-600); box-shadow: 0 0 0 0 rgba(255, 198, 30, 0.6); animation: nextlive-pulse 2.4s var(--ease-out) infinite; }
@keyframes nextlive-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 198, 30, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 198, 30, 0); } }
.nextlive__date { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nextlive__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nextlive__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; text-wrap: balance; }
.nextlive__line { color: var(--ink-muted); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.nextlive__btn { white-space: nowrap; }
@media (max-width: 860px) {
  .nextlive { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .nextlive__when { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-right: 0; border-right: 0; }
  .nextlive__btn { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .nextlive, .nextlive__dot { transition: none; animation: none; } }

/* ---------- 3. Archive: centred head, shorter gaps, on mist ---------- */
.archive { background: var(--surface-cool); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.archive__head { max-width: 52ch; margin-inline: auto; text-align: center; }
.archive__head p { margin-inline: auto; margin-top: 0.5rem; }
.filters {
  justify-content: center; margin: 1.5rem 0 2rem; padding: 0.75rem 0;
  background: color-mix(in srgb, var(--surface-cool) 90%, transparent);
}

/* ---------- 4. Where we've shown up: photo tiles that open a gallery ---------- */
.sec-head { text-align: center; max-width: 52ch; margin-inline: auto; }
.sec-head h2 { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); }
.sec-head p { color: var(--ink-muted); margin-top: 0.5rem; font-size: 1rem; }

.inperson .sec-head { max-width: 66ch; }
.inperson { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--surface-page); scroll-margin-top: 80px; }
.evs { position: relative; margin-top: 1.5rem; }
/* Featured layout: the lead event spans 2 columns and 2 rows, the other five fill the grid around it (no lone card at any width). */
.evg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ev { display: flex; min-width: 0; }
.ev--feat { grid-column: span 2; grid-row: span 2; }
.ev__card {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0;
  border-radius: 24px; overflow: hidden; background: var(--purple-1000); color: #fff; text-align: left;
  cursor: pointer; isolation: isolate; box-shadow: 0 2px 8px rgba(17, 10, 51, 0.08);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ev__card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -12px rgba(17, 10, 51, 0.22); }
.ev__card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ev__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ev__card:hover .ev__photo { transform: scale(1.04); }
.ev__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17, 10, 51, 0.4) 0, rgba(17, 10, 51, 0) 24%, rgba(17, 10, 51, 0) 46%, rgba(17, 10, 51, 0.92) 100%);
}
.ev__top { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ev__roles { display: flex; flex-wrap: wrap; gap: 6px; }
.ev__roles span {
  font-size: 0.75rem; font-weight: 800; color: var(--ink); background: var(--purple-200);
  border-radius: var(--radius-pill); padding: 3px 10px; line-height: 1.5;
}
.ev__count {
  display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 0.75rem; font-weight: 800; color: var(--ink);
  background: #fff; border-radius: var(--radius-pill); padding: 3px 10px; line-height: 1.5;
}
.ev__bottom { position: absolute; left: 16px; right: 64px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.ev__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.ev__meta { font-size: 0.875rem; font-weight: 700; color: var(--purple-200); }
.ev__open {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--yellow-600); color: var(--ink); display: grid; place-items: center;
  transition: transform var(--dur) var(--ease-out);
}
.ev__card:hover .ev__open { transform: translateX(3px); }
/* Talk slides are wide, so they sit whole in a frame on violet instead of being cropped to a portrait. */
.ev__card--slide { background: linear-gradient(165deg, var(--violet), var(--purple-1000) 70%); }
.ev__card--slide .ev__photo {
  inset: auto; left: 12px; right: 12px; top: 72px; width: calc(100% - 24px); height: auto; aspect-ratio: 16 / 9;
  object-fit: contain; border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45); background: #fff;
}
.ev__card--slide:hover .ev__photo { transform: none; }
.ev--feat .ev__card { aspect-ratio: auto; height: 100%; }
.ev--feat .ev__name { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.ev--feat .ev__meta { font-size: 1rem; }
.ev__line { margin-top: 6px; max-width: 44ch; font-size: 0.9375rem; line-height: 1.45; color: #fff; }
.ev--feat .ev__bottom { left: 24px; bottom: 24px; right: 88px; }
.ev--feat .ev__open { right: 22px; bottom: 22px; width: 48px; height: 48px; }
.ev__scrim { background: linear-gradient(180deg, rgba(17, 10, 51, 0.4) 0, rgba(17, 10, 51, 0) 24%, rgba(17, 10, 51, 0) 36%, rgba(17, 10, 51, 0.92) 100%); }
@media (max-width: 900px) {
  .evg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev--feat { grid-row: auto; }
  .ev--feat .ev__card { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 560px) {
  .evg { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ev--feat, .ev:last-child { grid-column: auto; }
  .ev__card, .ev--feat .ev__card, .ev:last-child .ev__card { aspect-ratio: 16 / 11; }
  .ev__line { display: none; }
  .ev--feat .ev__name { font-size: 1.3125rem; }
  .ev--feat .ev__bottom { left: 16px; bottom: 16px; right: 64px; }
  .ev--feat .ev__open { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* The gallery: a native dialog, so focus is trapped, Esc closes it and focus returns to the card. */
.evbox {
  border: 0; padding: 0; background: transparent; color: var(--ink); overflow: visible;
  width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
}
.evbox::backdrop { background: rgba(17, 10, 51, 0.74); }
.evbox[open] { display: block; animation: evfade 240ms var(--ease-out) both; }
@keyframes evfade { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.evbox__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: #fff;
  border-radius: 24px; overflow: hidden; max-height: calc(100dvh - 32px);
  box-shadow: 0 32px 64px -24px rgba(17, 10, 51, 0.35);
}
.evbox__stage { position: relative; background: var(--purple-1000); display: flex; align-items: center; justify-content: center; min-height: min(72dvh, 580px); }
.evbox__fig { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 64px; }
.evbox__fig img { max-width: 100%; max-height: min(66dvh, 530px); width: auto; height: auto; object-fit: contain; border-radius: 12px; background: var(--purple-1000); }
.evbox__kind { margin-top: 10px; font-size: 0.8125rem; font-weight: 700; color: var(--purple-200); text-align: center; }
.evbox__nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--purple-200); background: var(--purple-1000); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.evbox__nav[data-nav="-1"] { left: 10px; }
.evbox__nav[data-nav="1"] { right: 10px; }
.evbox__nav:hover { background: var(--yellow-600); color: var(--ink); border-color: var(--yellow-600); }
.evbox__nav:focus-visible { outline: 3px solid var(--yellow-600); outline-offset: 3px; }
.evbox__close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--ink); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.evbox__close:hover { background: var(--ink); color: var(--yellow-600); }
.evbox__close:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.evbox__side { display: flex; flex-direction: column; gap: 0.75rem; padding: 68px 24px 24px; overflow: auto; min-width: 0; }
.evbox__roles { display: flex; flex-wrap: wrap; gap: 6px; }
.evbox__roles span { font-size: 0.75rem; font-weight: 800; color: var(--ink); background: var(--purple-200); border-radius: var(--radius-pill); padding: 3px 10px; line-height: 1.5; }
.evbox__side h3 { font-size: 1.625rem; line-height: 1.12; color: var(--ink); }
.evbox__meta { font-size: 0.875rem; font-weight: 700; color: var(--ink-muted); }
.evbox__line { font-size: 1rem; line-height: 1.55; color: var(--ink); }
.evbox__post { align-self: flex-start; }
.evbox__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 0.5rem; }
.evbox__thumb {
  width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--purple-200);
  cursor: pointer; opacity: 0.7; transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.evbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.evbox__thumb:hover, .evbox__thumb[aria-current="true"] { opacity: 1; }
.evbox__thumb[aria-current="true"] { border-color: var(--ink); }
.evbox__thumb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.evbox__count { font-size: 0.8125rem; font-weight: 700; color: var(--ink-muted); }
@media (max-width: 760px) {
  .evbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .evbox__panel { grid-template-columns: 1fr; max-height: calc(100dvh - 16px); overflow: auto; border-radius: 20px; }
  .evbox__stage { min-height: 0; }
  .evbox__fig { padding: 12px 56px; }
  .evbox__fig img { max-height: 44dvh; }
  .evbox__side { padding: 16px 20px 20px; overflow: visible; }
  .evbox__close { top: 8px; right: 8px; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .evbox[open] { animation: none; }
  .ev__card, .ev__photo, .ev__open { transition: none; }
  .ev__card:hover, .ev__card:hover .ev__photo, .ev__card:hover .ev__open { transform: none; }
}

/* ---------- 5. Previous guests: one compact row, alphabetical, no big block ---------- */
.guests { padding: clamp(2rem, 4vw, 3rem) 0; background: var(--surface-cool); scroll-margin-top: 80px; }
.guests__h { text-align: center; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 0.5rem; margin-top: 1.5rem; }
.lineup__item { flex: 0 0 calc((100% - 8 * 0.5rem) / 9); min-width: 0; }
.guest {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 0.25rem; border-radius: 16px; color: var(--ink);
}
a.guest { transition: transform var(--dur) var(--ease-out); }
a.guest:hover { transform: translateY(-3px); }
a.guest:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 16px; }
.guest__photo { display: block; margin-bottom: 0.375rem; }
.guest__photo .face, .guest__photo img.face {
  width: 64px; height: 64px; margin: 0; font-size: 1.125rem; object-position: center 20%;
  box-shadow: 0 0 0 3px var(--purple-200), 0 2px 8px rgba(17, 10, 51, 0.08);
  transition: box-shadow var(--dur) var(--ease-out);
}
a.guest:hover .guest__photo .face { box-shadow: 0 0 0 3px var(--yellow-600), 0 12px 32px -12px rgba(17, 10, 51, 0.22); }
.guest__name { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; text-wrap: balance; }
.guest__role { font-size: 0.75rem; line-height: 1.35; color: var(--ink-muted); text-wrap: balance; }
@media (max-width: 1100px) { .lineup__item { flex-basis: calc((100% - 4 * 0.5rem) / 5); } }
@media (max-width: 520px) {
  .lineup { gap: 1rem 0.25rem; }
  .lineup__item { flex-basis: calc((100% - 2 * 0.25rem) / 3); }
  .guest__photo .face, .guest__photo img.face { width: 56px; height: 56px; }
  .guest__name { font-size: 0.8125rem; }
}
@media (max-width: 460px) {
  .hero__guests { padding-right: 12px; }
  .hero__in .hero__cta .btn { white-space: normal; text-align: center; }
}

/* ============================================================
   Oct 21 mobile pass (AK, real phone): shorter page, session and event cards two per row.
   Phones only; desktop untouched.
   ============================================================ */
@media (max-width: 767px) {
  .hero { padding-top: 88px; }
  .hero__in { padding-bottom: 20px; }
  .hero__in .hero__lead { margin-top: 12px; }
  .hero__in .hero__cta { margin-top: 16px; gap: 8px; }
  .hero__guests { margin-top: 12px; }
  .feature { padding: 24px 0; }
  .archive, .inperson { padding: 36px 0; }
  .guests { padding: 28px 0; }
  .filters { margin: 16px 0 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 24px; }
  .card { padding-top: 10px; }
  .card__body { gap: 6px; padding-top: 10px; }
  .card__media { border-radius: 8px; }
  .card__dur { right: 6px; top: 6px; padding: 2px 8px; }
  .card__play { right: 6px; bottom: 6px; width: 32px; height: 32px; }
  .card__play svg { width: 10px; height: 12px; }
  .card__kicker { font-size: 12px; line-height: 1.3; }
  .card__title { font-size: 15px; line-height: 1.18; min-height: calc(3 * 1.18em); }
  .card__people { gap: 6px; }
  .card__names { font-size: 12px; line-height: 1.35; min-height: calc(2 * 1.35em); }
  .card__foot { padding-top: 6px; gap: 6px; }
  .card__meta { font-size: 12px; }
  .evg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ev__card { aspect-ratio: 1 / 1; border-radius: 20px; }
  .ev__top { left: 8px; right: 8px; top: 8px; }
  .ev__top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ev__roles span, .ev__count { font-size: 12px; padding: 2px 8px; white-space: nowrap; }
  .ev__bottom, .ev--feat .ev__bottom { left: 12px; right: 12px; bottom: 12px; }
  .ev__name { font-size: 15px; line-height: 1.15; }
  .ev__meta { font-size: 12px; }
  .ev__open, .ev--feat .ev__open { display: none; }
  .lineup { gap: 12px 4px; margin-top: 16px; }
}

/* Oct 27 final QA. (1) Card titles: the reserved box was taller than 3 lines (min-height 3 x 1.35em against a 1.12 line-height), so a
   4-line title showed a sliver of its 4th line over the speaker names. The box is now exactly 3 lines in every width.
   (2) Session poster: on tablet and phone the "Watch the session" label sat on the cover headline; it stays the button's name for
   screen readers but is hidden visually there (the gold play disc carries the action). */
.card__title { min-height: 3lh; max-height: 3lh; }
@media (max-width: 900px) {
  .player .player__hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
/* Oct 27 final QA: the close band is white, so the white "Back to all webinars" ghost button was invisible on every session page. */
.close-cta .btn--ghost-light { color: #110A33; border-color: rgba(17, 10, 51, 0.28); }
.close-cta .btn--ghost-light:hover { background: #110A33; color: #fff; border-color: #110A33; }
/* Oct 27 final QA: on tablet and phone the play disc also sat on the end of the cover headline; the headline keeps clear of it */
@media (max-width: 900px) { .player .cover__line { padding-inline-end: 76px; } }

/* AK Nov 7 (Amar): the hero fills the first screen; the words sit in the middle and the waveform sits on its bottom edge. */
.hero { min-height: 100svh; display: flex; flex-direction: column; }
.hero__in { flex: 1 0 auto; justify-content: center; width: 100%; }
.hero .wave { flex: none; }