/* R5-Final / 4A — sekcje poniżej HERO (MCP → statyczne CSS) */
/* Figma variables: H2 = Times Regular 48 / tracking -0.02em; hero masthead = Times 120/0.8 */
:root {
  --f-figma-serif: "Times New Roman", Times, "Liberation Serif", ui-serif, Georgia, serif;
}
/* Utility z get_design_context 28:7497 (CEX is back, mega typografia) */
.r5-mint {
  color: #c8eecb;
}
.r5-mega {
  font-family: "Cal Sans", "Outfit", "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
}
.r5-huge-lock {
  text-align: center;
  width: 100%;
}
.r5-huge-lock .r5-mega {
  font-size: clamp(3.5rem, 18vw, 7.5rem);
  line-height: 0.9;
  margin: 0.15rem 0 0.5rem;
}
.r5-inlogo {
  display: block;
  height: 32px;
  width: auto;
  margin: 0 auto;
}
.r5-para-cex {
  max-width: 650px;
  margin: 0 auto;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}
.r5-h-ops-1 {
  font-family: var(--f-figma-serif);
  font-weight: 400;
  letter-spacing: -0.02em; /* Figma H2: -0.96px @ 48px */
}
.r5-ops__mega {
  font-size: clamp(3.5rem, 12vw, 7rem);
  line-height: 0.9;
  margin: 0.25rem 0 0;
}
.r5-ttl-inline {
  font-family: "Cal Sans", "Outfit", "Instrument Sans", system-ui, sans-serif;
  color: #c8eecb;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: inline;
}
.r5-ttl-d {
  color: #fff;
  font-size: 48px;
  font-family: var(--f-figma-serif);
}
.r5-oq {
  display: block;
  margin: 0 0 0.75rem;
  flex-shrink: 0;
  width: 44px;
  height: 38px;
}
.r5-cardq--dk {
  background: #1f2a31;
}
.faq h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
}
.r5-ft1 .r5-fthr {
  border: 0;
  height: 1px;
  max-width: calc(100% - 3rem);
  margin: 0.5rem 1.5rem 0;
  background: rgba(255, 255, 255, 0.2);
  padding: 0;
}

html,
body {
  background-color: #000;
}

body {
  font-family: "Instrument Sans", system-ui, sans-serif;
}

.r5 {
  background: #000;
  color: #fff;
}

.r5-sec {
  width: 100%; /* full-bleed: section backgrounds extend edge to edge */
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.r5-sec__in {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(3.5rem, 10vh, 7rem) 0;
}

.r5-sec--cex {
  background: #121719;
  padding-bottom: 80px;
}

/* Halve the bottom padding inside the CEX intro so the video sits closer
   to the "is back." paragraph above it. */
.r5-sec--cex > .r5-sec__in {
  padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
}

.r5-sec--ops {
  background: #2a353c;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  isolation: isolate;
  border-top: none;
}
.r5-sec--ops::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("/assets/figma/noise.png");
  background-repeat: repeat;
}
.r5-sec--ops > * {
  position: relative;
  z-index: 1;
}

/* Tracks section — Craft / Audience / Monetization / AI */
.r5-sec--tracks {
  background: #3a4750;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}
.r5-sec--tracks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("/assets/figma/noise.png");
  background-repeat: repeat;
}
.r5-sec--tracks > * {
  position: relative;
  z-index: 1;
}
.r5-tracks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px) {
  .r5-tracks-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.r5-track {
  background: #1f2a31;
  border-radius: 14px;
  padding: 2rem;
  color: #fff;
}
.r5-track__name {
  font-family: "Cal Sans", "Outfit", "Instrument Sans", system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.r5-track__d {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #fff;
}

.r5-sec--quote1,
.r5-sec--quote2 {
  background: #121719;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.r5-sec--quote2 {
  background: #2a353c;
  position: relative;
  isolation: isolate;
  /* Section padding handled by .r5-sec__in (clamp 3.5–7rem) — Figma 112px */
}
.r5-sec--quote2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("/assets/figma/noise.png");
  background-repeat: repeat;
}
.r5-sec--quote2 > * {
  position: relative;
  z-index: 1;
}

.r5-sec--spk {
  background: #2a353c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  padding-bottom: 0;
}

.r5-sec--ag {
  background: #121719;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.r5-sec--vip {
  background: #c8eecb;
  color: #121719;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.r5-sec--faq {
  background: #121719;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.r5-sec--ptn {
  background: #2a353c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.r5-sec--cta {
  background: #c8eecb;
  color: #121719;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

.r5-sec--ft {
  background: #121719;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
}

/* Typografia sekcji */
.r5-prose {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}

.r5-prose--tight p + p {
  margin-top: 0.5rem;
}

.r5-t {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8eecb;
  margin: 0 0 0.5rem;
}

.r5-h2 {
  font-family: var(--f-figma-serif);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.r5-h2b {
  font-family: "Cal Sans", "Outfit", "Instrument Sans", system-ui, sans-serif;
  font-size: clamp(3.5rem, 12vw, 120px);
  line-height: 1;
  font-weight: 400;
  color: #c8eecb;
  letter-spacing: -0.03em;
  margin: 0;
}

.r5-center {
  text-align: center;
}

/* CEX */
.r5-cex {
  text-align: center;
}

.r5-cex__logo {
  height: 32px;
  width: auto;
  display: block;
  margin: 0.5rem auto 0;
}

.r5-cex__huge {
  margin: 0.25rem 0 1.5rem;
  line-height: 1.05;
}

/* Ops: grid */
.r5-ops {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .r5-ops {
    grid-template-columns: 1fr 480px;
    gap: 5rem;
  }
}

.r5-ops__fig {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  min-height: 200px;
  max-height: 600px;
  margin-right: 1.5rem;
}

/* Ciemniejsza „pochwa” jak w Figma (vignette + górny cień) */
.r5-ops__fig--vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(70% 55% at 50% 100%, rgba(0, 0, 0, 0.65) 0%, transparent 70%);
}

.r5-ops__fig img {
  width: 100%;
  height: 100%;
  max-height: 600px;
  object-fit: cover;
  display: block;
  vertical-align: top;
  position: relative;
  z-index: 0;
}

/* CEX — wideo 16/10, overlay w inner, skalowanie typu i PLAY */
.r5-vid--cex {
  max-width: 900px;
  margin: 0 auto;
  width: 69%;
  position: relative;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  box-sizing: border-box;
}

.r5-vid__inner {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.r5-vid__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.r5-vid__poster {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.r5-vid__on {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 1.2vw, 0.6rem);
  pointer-events: none;
  text-align: center;
  padding: clamp(0.5rem, 2.5vw, 1.5rem);
  box-sizing: border-box;
}

.r5-vid__play {
  width: clamp(3.25rem, 18vw, 7.5rem);
  height: auto;
  max-width: 88%;
  flex-shrink: 0;
}

.r5-vid__watch {
  color: #eafa56;
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
}

.r5-vid__cap {
  margin: 0;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  max-width: 22rem;
  font-size: clamp(0.75rem, 2.1vw, 1rem);
}

.r5-vid__dur {
  display: inline;
  font-size: 0.85em;
  opacity: 0.9;
  white-space: nowrap;
}

/* Quotes 3 col */
.r5-tiles3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .r5-tiles3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.r5-cardq {
  background: #2a353c;
  border: none;
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 1.5rem;
}

.r5-sec--quote2 .r5-cardq {
  background: #1f2a31;
}

.r5-cardq__q {
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.r5-cardq__a {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding-top: 0;
  margin-top: auto;
}

/* Figma: fill #C8EECB + warstwa B&W; grayscale tylko na <img>, żeby tło nie szło w szarość. */
.r5-cardq__a .r5-ava-wrap {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #c8eecb;
}

.r5-cardq__a .r5-ava-wrap .r5-ava {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1);
}

.r5-who {
  color: #c8eecb;
  font-size: 16px;
  line-height: 1.5;
}

.r5-who b {
  display: block;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.r5-qmark {
  width: 27px;
  height: 24px;
  opacity: 0.8;
}

/* Title block 2 lines */
.r5-ttl2 {
  max-width: 48rem;
  margin: 0 auto 2rem;
}

/* Speakers — jedna siatka 3 kolumn: lead (2 col) + Joe (1 col), potem grid kart w tym samym torze szerokości */
.r5-spk-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

@media (min-width: 1000px) {
  .r5-spk-layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }

  .r5-spk-lead {
    grid-column: 1 / 3;
    max-width: 720px;
  }

  /* Featured cards auto-flow into cols 3 and 4, matching the grid below. */
  .r5-spk-layout > .r5-joe {
    grid-column: span 1;
  }
}

.r5-joe {
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  background: #c8eecb;
  border-radius: 14px;
  color: #2a353c;
  overflow: hidden;
  width: 100%;
  border: none;
}

.r5-joe__hd {
  flex: 0 0 auto;
  height: 10rem;
  min-height: 10rem;
  box-sizing: border-box;
  padding: 1.5rem 0.75rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.r5-joe__f {
  font-size: 24px;
  font-family: var(--f-figma-serif);
  margin-bottom: -10px;
}

.r5-joe__l {
  font-family: "Cal Sans", "Outfit", "Instrument Sans", sans-serif;
  font-size: 32px;
  margin: 0.1rem 0 0.75rem;
}

.r5-joe__b {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: #1a1f1f;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.r5-joe__ph {
  flex: 0 0 auto;
  position: relative;
  aspect-ratio: 389 / 400; /* match grid card photo aspect */
  width: 100%;
  min-height: 0;
  line-height: 0;
  margin: 0;
  background: #c8eecb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r5-joe__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  filter: grayscale(1);
}

/* Darrell's headshot frames tighter at the top — anchor to image top so his head isn't cropped. */
.r5-joe__ph img[alt="Darrell Vesterfelt"] {
  object-position: center top;
}

.r5-spk-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

@media (min-width: 800px) {
  .r5-spk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.r5-scard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  height: 100%;
  background: #c8eecb;
  color: #2a353c;
  border: none;
  border-radius: 14px;
  overflow: hidden;
}

.r5-shd {
  flex: 0 0 auto;
  height: 10rem;
  min-height: 10rem;
  text-align: center;
  padding: 1.5rem 0.5rem 0.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.r5-sfn {
  font-size: 24px;
  font-family: var(--f-figma-serif);
  margin: 0 0 -10px;
}

.r5-sln {
  font-size: 32px;
  font-family: "Cal Sans", "Outfit", "Instrument Sans", sans-serif;
  margin: 0.15rem 0 0.35rem;
}

.r5-sbio {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.r5-sph {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 389 / 400;
  width: 100%;
  min-height: 0;
  background: #c8eecb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r5-sph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  filter: grayscale(1);
}

.r5-sph img[alt="Matt Ragland"] {
  object-position: center 0%;
}

/* Pre-baked card images already have the mint + grayscale duotone applied
   in the file itself. Skip the CSS grayscale filter so the green tone stays. */
.r5-scard--prebaked .r5-sph img {
  filter: none;
}

/* "More to come" announcement block sitting next to the last card */
.r5-spk-soon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  color: #fff;
}
@media (min-width: 800px) {
  .r5-spk-soon {
    grid-column: span 3;
  }
}

.r5-sph img[alt="Darrell Vesterfelt"] {
  object-position: center top;
}

/* Doc's source is a landscape shot with him in the left half — shift the crop
   left so his face sits centered in the visible card. */
.r5-sph img[alt="Doc Williams"] {
  object-position: 30% center;
}

/* Full-bleed image card variant — image is a pre-styled card, no text/header
   layered on top, no grayscale filter. */
.r5-scard.r5-scard--img {
  padding: 0;
  display: block;
  background: #c8eecb;
}

.r5-scard--img > img {
  display: block;
  width: 100%;
  /* Extend slightly past the card bottom so the lighter mint strip baked
     into the Figma export is clipped by .r5-scard's overflow: hidden. */
  height: 103%;
  object-fit: cover;
  object-position: center top;
  filter: none;
}

.r5-sky {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #2a353c;
}

.r5-sky img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 30px;
}

/* Agenda */
.r5-agn-hd {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

.r5-agn-date {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #c8eecb;
  margin: 0 0 0.5rem;
}

#agenda-day-date {
  display: block;
  font-size: 15px;
}

/* Agenda: wiersz 2 — Cal Sans jak reszta mega; wiersz 1 — serif */
.r5-sec--ag .r5-agn__serif {
  color: #fff;
  font-weight: 400;
  margin: 0.25rem 0 0;
  font-size: clamp(1.75rem, 5.5vw, 3rem);
  line-height: 1;
  font-family: var(--f-figma-serif);
  letter-spacing: -0.02em;
}

.r5-sec--ag .r5-agn__mega {
  font-family: "Cal Sans", "Outfit", "Instrument Sans", system-ui, sans-serif;
  line-height: 0.9;
  margin: 0 0 1.25rem;
  font-size: clamp(3.5rem, 14vw, 9rem);
  letter-spacing: -0.02em;
}

.r5-sec--ag .r5-agn__mega .r5-mint {
  font-family: inherit;
}

/* Jedna kolumna: zakładki i lista agendy mają identyczną szerokość i wspólną oś */
.r5-agen-col {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.r5-agen-col .r5-agen-tabs {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.r5-agen-col .r5-agn-list {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.r5-agen-tabs {
  display: flex;
  margin: 4rem auto 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  flex-wrap: wrap;
  max-width: 720px;
}

.r5-agen-tabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 100px;
  border: none;
  font: inherit;
  padding: 1rem 0.5rem;
  background: #fff;
  color: #121719;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.r5-agen-tabs button .r5-dt1 {
  display: block;
  font-size: 12px;
  color: #766f50;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.r5-agen-tabs button .r5-dt2 {
  display: block;
  font-size: 16px;
  font-weight: 400;
}

.r5-agen-tabs button + button {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.r5-agen-tabs button.is-active {
  background: #eafa56;
}

.r5-agn-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.r5-agenow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem; /* 32px — Figma 4A Card row */
  background: #2a353c;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  font-size: 18px;
  color: #fff;
}

/* Slot ikony: agenda + VIP — Figma 4A: pill 75×36, ikona 20px, Pro Regular */
.r5-fa-slot {
  --r5-fa-w: 75px;
  --r5-fa-h: 36px;
  --r5-fa-r: 18px;
  --r5-fa-fs: 20px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--r5-fa-w);
  height: var(--r5-fa-h);
  min-width: var(--r5-fa-w);
  min-height: var(--r5-fa-h);
  border-radius: var(--r5-fa-r);
  text-align: center;
  color: #fff;
  font-size: var(--r5-fa-fs);
  line-height: 1;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    radial-gradient(
      ellipse 118% 88% at 50% 48%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.18) 38%,
      rgba(255, 255, 255, 0.14) 68%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    #121719;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.r5-fa-slot > i {
  line-height: 1;
  opacity: 0.95;
  font-weight: 400;
}

.r5-viprow .r5-fa-slot > i {
  opacity: 1;
  font-weight: 400;
}

.r5-agenow__t {
  width: 5.5rem;
  flex-shrink: 0;
  color: #c8eecb;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* VIP */
.r5-vip {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .r5-vip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5rem; /* Figma: 80px between left text and right panel */
  }
}

.r5-vip .r5-t,
.r5-vip .r5-h2,
.r5-vip .r5-h2b {
  color: #121719;
  text-align: left;
}

.r5-vip .r5-h2b {
  color: #2a353c;
}

.r5-vip__line1 {
  color: #121719;
  font-size: clamp(1.5rem, 5.5vw, 3rem);
  line-height: 1.1;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-family: var(--f-figma-serif);
}

.r5-vip__mega {
  margin: 0.5rem 0;
  color: #2a353c;
  font-size: clamp(3.5rem, 14vw, 9rem);
  font-family: "Cal Sans", "Outfit", "Instrument Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.r5-vip__panel {
  background: #2a353c;
  border-radius: 14px;
  padding: 1.5rem; /* Figma: 24px */
}

.r5-vip__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Figma: 8px between rows */
  margin: 0 0 1.5rem; /* zero default ul margin; 24px to button matches panel padding */
}

.r5-viprow {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Figma: 8px pill→text */
  background: #121719;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2rem 1.5rem; /* Figma: row ~100px tall (32 + 36 pill + 32) */
  flex-wrap: wrap;
  text-align: left;
}

.r5-viprow--split {
  flex-direction: column;
  align-items: flex-start;
}

.r5-vip__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px; /* Figma: button 80px tall */
  background: #eafa56;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.08em;
  padding: 0 2.5rem; /* Match CTA2 (Get your ticket) horizontal padding */
  border-radius: 4px; /* Match CTA2 corner radius */
  margin-top: 0;
  box-sizing: border-box;
  transition: background-color 150ms ease, color 150ms ease;
}

.r5-vip__btn:hover,
.r5-vip__btn:focus-visible {
  background: #121719;
  color: #eafa56;
}

/* FAQ */
.faq__item {
  background: #2a353c; /* Figma: Dark 2 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px; /* Figma: rounded-[4px] */
  margin-bottom: 0.75rem; /* Figma: 12px between cards */
  padding: 1.5rem; /* Figma: 24px content padding */
}

.faq__trigger {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  color: #fff;
  font: 400 24px/1.2 var(--f-figma-serif); /* Figma: H3 Times Regular 24px / 1.2 */
  padding: 0; /* parent .faq__item provides 24px padding */
  cursor: pointer;
  box-sizing: border-box;
}

.faq__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 75px; /* Figma: 75 × 36 pill */
  height: 36px;
  min-width: 75px;
  color: #eafa56; /* Figma: CTA yellow */
  text-align: center;
  font-family: "Instrument Sans", sans-serif;
  flex-shrink: 0;
  font-size: 20px; /* Figma: 20px */
  line-height: 1;
  font-weight: 400;
  border-radius: 9999px; /* Figma: rounded-[72px] (fully pill) */
  background: transparent; /* Figma: no fill, just border */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.faq__body {
  margin-top: 1rem; /* Figma: 16px gap from question row */
  padding: 0 6.5rem 0 0; /* Figma: 104px right inset; horizontal padding from item */
  color: #b1c1cb; /* Figma: Dark 3 */
  font-size: 16px;
  line-height: 1.5;
}

/* Mobile: drop the right inset so body text uses the full card width. */
@media (max-width: 767px) {
  .faq__body {
    padding-right: 0;
  }
}

.faq__item[data-open="false"] .faq__body {
  display: none;
}

.faq-cta {
  text-align: center;
  margin-top: 2.5rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.faq-cta a {
  color: #eafa56;
  text-decoration: none;
}

/* Partners */
.r5-ptn-card {
  background: #121719; /* Figma: Dark 1 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  text-align: center;
  padding: 2rem 1.5rem 3rem; /* Figma: pt-32 / px-24 / pb-48 */
  margin-bottom: 0.75rem; /* Figma: 12px gap between cards */
}

.r5-ptn-card p.r5-ptn-lb {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c8eecb;
  margin: 0 0 1.5rem;
}

.r5-ptn-card img {
  max-width: 100%;
  height: auto;
}

.r5-ptn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 3rem;
  align-items: center;
}

/* CTA strip */
.r5-strip {
  text-align: center;
  padding: clamp(3.5rem, 10vh, 7rem) 1.25rem; /* Figma: 112px top/bottom */
}

.r5-sec--cta .r5-strip {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 56rem;
  box-sizing: border-box;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}

.r5-strip__logo {
  width: 106px;
  height: auto;
  display: block;
  margin: 0 auto 2rem;
}

.r5-cta2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #121719; /* Figma: Dark 1 */
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.08em;
  padding: 0 2.5rem; /* Figma: px-40 */
  min-height: 80px; /* Figma: 80px tall button */
  border-radius: 4px;
  margin-top: 2.5rem; /* Figma: gap-40 from text block */
  transition: background-color 150ms ease, color 150ms ease;
}

.r5-cta2:hover,
.r5-cta2:focus-visible {
  background: #eafa56; /* CTA yellow — matches VIP/Book buttons */
  color: #121719;
}

/* Footer */
.r5-ft1 {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 2.5rem 0; /* 24px top, 40px sides */
}

.r5-ft1__r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0 0 2.5rem; /* 40px below content, clear separation from divider */
}

.r5-ft1__r img {
  height: 32px;
  width: auto;
}

.r5-nav2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  font-size: 16px;
  color: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
}

.r5-nav2 a {
  color: #fff;
  text-decoration: none;
}

.r5-nav2 a.r5-sub {
  color: #b4b2a9;
  text-decoration: underline;
}

.r5-soc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.r5-soc a,
.r5-soc a.r5-soca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  width: 75px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 72px;
  margin-left: 0;
  padding: 0 1rem;
  color: #eafa56;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.r5-soc a:first-child {
  margin-left: 0;
}

.r5-ft1 hr,
.r5-ft1 .r5-fthr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0; /* spans ft1 inner content width */
  max-width: 100%;
  box-sizing: border-box;
}

.r5-ft2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 5rem; /* Figma: 80px between text column and form */
  padding: 5rem 2.5rem 0; /* 80px gap from top nav row, 40px side padding */
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.r5-ft2__text {
  flex: 1 1 320px;
  max-width: 465px; /* Figma column */
}

.r5-ft2 .r5-prose {
  margin: 0;
  text-align: left;
}

.r5-sloop {
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  font-family: var(--f-figma-serif);
  margin: 0 0 0.5rem;
}

.r5-sloop span {
  font-size: 56px;
  font-family: "Cal Sans", "Outfit", "Instrument Sans", sans-serif;
  color: #c8eecb;
  letter-spacing: -0.02em;
}

.r5-subform {
  display: flex;
  align-items: stretch;
  flex: 1 1 480px;
  max-width: 735px; /* Figma: 735px form */
  background: #121719; /* Figma: Dark 1 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  min-height: 80px; /* Figma: 80px form height */
}

.r5-subform input {
  flex: 1;
  border: none;
  background: transparent;
  color: #c8eecb;
  font: inherit;
  font-size: 18px; /* Figma: 18px placeholder text — must come after `font: inherit` */
  padding: 0 1.5rem; /* Figma: p-24, vertical centered via flex */
  min-width: 0;
}

.r5-subform input::placeholder {
  color: #c8eecb;
  opacity: 1;
}

.r5-subform button {
  background: #eafa56;
  color: #000;
  font: inherit;          /* must come BEFORE explicit font props or it resets them */
  font-weight: 600;       /* match .r5-cta2 SemiBold weight */
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  padding: 0 2.5rem; /* Figma: p-40 horizontal */
  width: 186px; /* Figma: button 186px wide */
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.r5-subform button:hover,
.r5-subform button:focus-visible {
  background: #121719; /* match top nav "Get tickets" hover */
  color: #eafa56;
  border-left: 1px solid rgba(255, 255, 255, 0.2); /* match form border */
}

.r5-ft3 {
  max-width: 1440px;
  margin: 5rem auto 0; /* Figma: 80px gap from middle section */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 2.5rem 2.5rem; /* 40px sides, 40px bottom */
  gap: 0.5rem 2rem;
  color: #fff;
  font-size: 16px;
  border-top: none; /* Figma has no divider here */
}

.r5-ft3 a {
  color: #eafa56;
  text-decoration: none;
}

.r5-nav3 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.r5-nav3 a {
  color: #e8e8e0;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile cleanup
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Footer subscribe form: stack input over a full-width button so the
     placeholder isn't truncated to "Your E-". */
  .r5-subform {
    flex-direction: column;
    min-height: auto;
  }
  .r5-subform input {
    padding: 1.25rem 1.25rem;
    width: 100%;
  }
  .r5-subform button {
    width: 100%;
    min-height: 60px;
    padding: 18px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* Footer top row: center logo + nav vertically stacked. */
  .r5-ft1__r {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
  .r5-ft1__mid {
    justify-content: center !important;
  }
  .r5-nav2 {
    justify-content: center;
    gap: 0.75rem 1.5rem;
  }

  /* Footer middle stack: text-block + form align center on mobile. */
  .r5-ft2 {
    padding: 4rem 1.25rem 0;
    gap: 2rem;
    text-align: left;
  }

  /* Footer bottom row: tighter spacing on mobile. */
  .r5-ft3 {
    padding: 0 1.25rem 2rem;
    gap: 0.75rem 1.25rem;
    margin-top: 3rem;
  }
}

/* Speakers: featured cards 2-up on mobile/tablet so they don't take a
   full-width row each (~515px tall × 2 = ~1030px of scroll). */
@media (max-width: 999px) {
  .r5-spk-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .r5-spk-lead,
  .r5-spk-grid {
    grid-column: 1 / -1;
  }
  .r5-spk-layout > .r5-joe {
    grid-column: span 1;
  }
}