#section-7756790 > div > div > div.element-groups.Component-elementGroups-0-2-1 > div {
  margin-top: -1px !important;
}

#section-7756790 > div > div {
  margin-top: -1px !important;
}

/* ====== Tokens ====== */
:root {
  /* Brand palette — Amazon Port 2026 */
  --colour-smile-orange:        #FF6200;
  --colour-smile-orange-shade:  #F55600;

  --colour-squid-ink:           #161D26;
  --colour-midnight:            #252F3E;

  --colour-rose:                #F74622;
  --colour-rose-tint:           #FF5A36;
  --colour-rose-shade:          #E13A18;

  --colour-salmon:              #FF8756;
  --colour-salmon-tint:         #FF9F78;
  --colour-salmon-shade:        #F17643;

  --colour-ivory:               #E5E1D6;
  --colour-ivory-shade:         #DAD5C6;

  --colour-amber:               #E59214;
  --colour-amber-tint:          #F5A224;
  --colour-amber-shade:         #DA8402;

  --colour-sandstone:           #FFD98E;
  --colour-sandstone-tint:      #FFE3A6;
  --colour-sandstone-shade:     #F4C86E;

  --colour-off-white:           #F5F3EF;
  --colour-off-white-shade:     #E9E7E3;

  --colour-prime-blue:          #0275FF;
  --colour-prime-blue-tint:     #2487FD;
  --colour-prime-blue-shade:    #0057E1;

  --colour-aqua-blue:           #9EE4F0;
  --colour-aqua-blue-tint:      #BAF0FA;
  --colour-aqua-blue-shade:     #82D4E3;

  --colour-white:               #FFFFFF;
  --colour-grey:                #6C6566;

  /* Functional aliases — keep names used by lifted structural blocks */
  --colour-ink:           var(--colour-squid-ink);
  --colour-bg-cream:      var(--colour-off-white);
  --colour-bg-stone:      var(--colour-off-white-shade);
  --colour-bg-beige:      var(--colour-ivory-shade);
  --colour-sand:          var(--colour-ivory);
  --colour-amber-light:   var(--colour-amber-tint);
  --colour-tan-light:     var(--colour-sandstone-tint);
  --colour-tan-mid:       var(--colour-sandstone);
  --colour-sky:           var(--colour-aqua-blue);

  /* Legacy single-word aliases */
  --squid-ink:    var(--colour-squid-ink);
  --ivory:        var(--colour-ivory);
  --off-white:    var(--colour-off-white);
  --orange:       var(--colour-smile-orange);
  --terracotta:   var(--colour-salmon);
  --tan:          var(--colour-ivory-shade);
  --tan-light:    var(--colour-off-white-shade);

  --gutter-huge:           8.33vw;
  --gutter:                2.7vw;
  --gutter-small:          1.05vw;
  --gutter-tiny:           .125vw;
  --gutter-negative:       -2.7vw;
  --gutter-small-negative: -1.05vw;
  --gutter-tiny-negative:  -.125vw;

  --navbar-height:         5rem;

  --header: 'EmberModernDisplay', 'EmberModernText', sans-serif;
  --body:   'EmberModernText',    sans-serif;
  --accent: 'EmberModernText',    sans-serif;

  --size-small: .833vw;
  --size-body:  1.05vw;
  --size-large: 1.55vw;
  --size-h3:    2.375vw;
  --size-h2:    3.125vw;

  --card-shadow:
    -3px 4px 5px rgba(22, 29, 38, 0.28),
    -10px 16px 14px -2px rgba(22, 29, 38, 0.42);

  --card-shadow-lg:
    -4px 6px 7px rgba(22, 29, 38, 0.30),
    -16px 24px 20px -2px rgba(22, 29, 38, 0.45);
}

@media screen and (max-width: 1524px) {
  :root {
    --size-small: 1vw;
    --size-body:  1.25vw;
    --size-large: 1.55vw;
    --size-h3:    2.375vw;
    --size-h2:    3.125vw;
  }
}

@media screen and (max-width: 1279px) {
  :root {
    --size-small: .75rem;
    --size-body:  1rem;
    --size-large: 1.25rem;
    --size-h3:    2.5rem;
    --size-h2:    3rem;

    --gutter-huge:           10rem;
    --gutter:                2.5rem;
    --gutter-small:          1rem;
    --gutter-tiny:           .125rem;
    --gutter-negative:       -2.5rem;
    --gutter-small-negative: -1rem;
    --gutter-tiny-negative:  -.125rem;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-small: .75rem;
    --size-body:  1rem;
    --size-large: 1.25rem;
    --size-h3:    2rem;
    --size-h2:    2.5rem;

    --gutter-huge:           5rem;
    --gutter:                2rem;
    --gutter-small:          1rem;
    --gutter-tiny:           .125rem;
    --gutter-negative:       -2rem;
    --gutter-small-negative: -1rem;
    --gutter-tiny-negative:  -.125rem;
  }
}


/* ====== Global / reset ====== */
html {
  font-size: 16px;
  background-color: var(--colour-bg-cream) !important;
  overflow-x: clip;
}

body,
body.home,
body.color-4-background,
body[class*="color-"] {
  position: relative;
  padding-top: var(--navbar-height);
  background-color: var(--colour-bg-cream) !important;
  color: var(--colour-ink);
  font-family: var(--body);
}

body.unpublished-event { padding-top: var(--navbar-height); }

.home-page,
.home-custom-css,
body.color-1-background-opacity { padding-top: var(--navbar-height); }

.container,
.container-fluid,
.sections-holder,
.main-view.footer-padding,
.editor-home-page.footer-padding {
  padding: 0;
}

.rowHolder { margin: 0; }

.padding-horizontal-medium { padding: 0 var(--gutter); }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding-left: var(--gutter-small);
  padding-right: var(--gutter-small);
}

.margin-custom-element,
.h1, .h2, .h3, h1, h2, h3,
.h4, .h5, .h6, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.container-fluid .navbar-collapse,
.container-fluid .navbar-header,
.container .navbar-collapse,
.container .navbar-header {
  margin: 0;
}

.bizzabo-default-first { display: none; }

button:focus { outline: none; }

button:focus-visible {
  outline: var(--gutter-tiny) solid var(--squid-ink);
  outline-offset: var(--gutter-tiny);
  border-radius: var(--size-small);
}

.main-app-container {
  max-width: none;
  margin: auto;
  padding: var(--gutter);
}

@media only screen and (max-width: 1024px) {
  .main-app-container { padding: var(--gutter-small); }
}


/* ====== Typography ====== */
h2,
.trade-template h2,
.html-container .main-app-container h2 {
  color: var(--squid-ink);
  font-family: var(--header);
  font-size: var(--size-h2);
  font-weight: 700;
  line-height: 100%;
  text-transform: none;
  margin-bottom: var(--gutter-small);
}

h3,
.html-container .main-app-container h3 {
  color: var(--squid-ink);
  font-family: var(--header);
  font-size: var(--size-large);
  font-weight: 700;
  line-height: 90%;
  margin-bottom: var(--gutter-small);
}

h4,
.html-container .main-app-container h4 {
  color: var(--squid-ink);
  font-family: var(--header);
  font-size: var(--size-body);
  font-weight: 700;
  line-height: 90%;
  margin-bottom: var(--gutter-small);
}

p,
.html-container .main-app-container p {
  color: var(--squid-ink);
  font-family: var(--body);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 130%;
  margin-bottom: var(--gutter-small);
}

.html-container .main-app-container p.last { margin-bottom: var(--gutter); }

a,
.html-container .main-app-container a {
  color: var(--orange);
  text-decoration: none;
  transition: color .15s ease;
}

a:hover,
.html-container .main-app-container a:hover { color: var(--terracotta); }

.html-container .main-app-container p.large {
  color: var(--squid-ink);
  text-align: center;
  font-family: var(--body);
  font-size: var(--size-large);
  font-weight: 500;
  line-height: 130%;
}

.html-container .main-app-container p.small,
.html-container .main-app-container p small,
.html-container .main-app-container small {
  font-size: var(--size-small);
  line-height: 120%;
}


/* ====== Text selection ====== */
::selection {
  background-color: var(--orange);
  color: var(--off-white);
}

/* On amber-filled regions, flip the highlight so it stays visible. */
.section-agenda .agenda-card ::selection,
.section-faqs .faqs-card ::selection,
.section-rsvp ::selection,
.section-speakers .entity-photo-holder ::selection,
.section-amazon-talent .entity-photo-holder ::selection {
  background-color: var(--off-white);
  color: var(--orange);
}

/* Inside the squid-ink RSVP card, default amber highlight reads fine. */
.section-rsvp .rsvp-card ::selection,
.section-rsvp .tickets ::selection,
.section-rsvp .registration-block ::selection {
  background-color: var(--orange);
  color: var(--off-white);
}


/* ====== Heading deboss treatment ====== */
.section-hero-home .hero-title,
.section-agenda h2,
.section-agenda .agenda-card h3,
.section-agenda .agenda-card h4,
.section-faqs h2,
.section-come-find-us h2,
.section-getting-there h2,
.section-rsvp h2 {
  filter: url(#deboss-effect);
}

.section-hero-home .hero-title,
.section-agenda h2,
.section-faqs h2 {
  color: #DCA258 !important;
  mix-blend-mode: multiply;
}


/* ====== Buttons ====== */
.main-app-container .btn,
.html-container .main-app-container .btn,
.speaker-view .speaker-container .speaker-profile .speaker-back-button {
  font-family: var(--body) !important;
  background-color: var(--orange) !important;
  color: var(--off-white) !important;
  border: none !important;
  border-radius: .3125rem;
  font-size: var(--size-body) !important;
  font-weight: 700 !important;
  line-height: 100%;
  padding: var(--gutter-small) var(--gutter);
  text-transform: none !important;
  transition: background-color .15s ease, transform .15s ease;
}

.main-app-container .btn:hover,
.html-container .main-app-container .btn:hover {
  background-color: var(--terracotta) !important;
  transform: translateY(-1px);
}

.html-container .main-app-container .btn.btn-alt {
  background-color: var(--squid-ink) !important;
}

.html-container .main-app-container .btn.btn-alt:hover {
  background-color: var(--terracotta) !important;
}


/* ====== Navigation ====== */
.unpublished-bar { display: none !important; }

.custom-navbar-countdown {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
  display: flex;
  align-items: stretch;
  background-color: var(--colour-sandstone-tint);
  border-radius: .65rem;
  padding: .55rem 0;
  z-index: 2;
}

.custom-navbar-countdown .cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 .9rem;
  border-right: 1px solid var(--colour-smile-orange);
}

.custom-navbar-countdown .cd-block:last-child {
  border-right: none;
}

.custom-navbar-countdown .cd-num {
  color: var(--colour-smile-orange);
  font-family: var(--body);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.custom-navbar-countdown .cd-unit {
  color: var(--colour-smile-orange);
  font-family: var(--body);
  font-size: .55rem;
  font-weight: 600;
  line-height: 1;
  margin-top: .3rem;
}

.custom-navbar-register {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  background-color: var(--colour-smile-orange) !important;
  color: var(--colour-white) !important;
  font-family: var(--header) !important;
  font-size: var(--size-body) !important;
  font-weight: 600 !important;
  text-decoration: none;
  padding: .75rem 2.5rem !important;
  border: 0 !important;
  border-radius: .65rem !important;
  cursor: pointer;
  transition: background-color .15s ease;
  z-index: 2;
}

.custom-navbar-register:hover,
.custom-navbar-register:focus {
  background-color: var(--colour-smile-orange-shade);
  color: var(--colour-white);
  text-decoration: none;
}

.template-nav { box-shadow: 0 1px 0 var(--colour-bg-beige); }

nav.navbar.custom-color {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: 100;
  background-color: var(--colour-bg-cream);
  border-bottom: 1px solid var(--colour-bg-beige);
}

.nav-button-wrapper { min-width: 0; }

.navColors .color-2-background.custom-color { background-color: var(--colour-bg-cream); }

.navbar .navbar-collapse { max-height: none; }
.navbar-default .navbar-brand { display: none !important; }

.navbar .navbar-nav {
  float: right;
  display: flex;
  align-items: center;
  margin: 0 calc(var(--gutter) + 12rem) 0 var(--gutter);
}

.navbar .navbar-nav li {
  max-height: none;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar .navbar-nav li a,
.navbar .navbar-nav li .nav-button-wrapper {
  padding-top: var(--gutter) !important;
  padding-bottom: var(--gutter) !important;
  padding-left: .85rem !important;
  padding-right: .85rem !important;
  margin: 0 !important;
}

.navbar .navbar-nav .nav-menu-btn,
.navbar .navbar-nav .nav-button-wrapper,
.navbar .navbar-nav li a {
  font-family: var(--header) !important;
  text-transform: none;
  font-weight: 700;
  line-height: 1;
  height: auto;
  font-size: var(--size-body);
  transition: all .15s ease;
}

.nav.navbar-nav li div { color: var(--squid-ink); }

.nav.navbar-nav li:hover div.rotate,
.nav.navbar-nav li div.selected,
.nav.navbar-nav li:hover div { color: var(--orange); }

/* Force the navbar onto a single flex row at fixed height so countdown,
   page tabs and Register button all sit on one vertically-centred line.
   Bizzabo's natural layout puts the tab strip on its own row below the
   navbar header — overriding here. */
nav.navbar,
.navbar,
nav.navbar.custom-color {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  height: var(--navbar-height) !important;
  min-height: var(--navbar-height) !important;
  position: relative !important;
  width: 100% !important;
}

.navbar .container-fluid,
.navbar .container,
.navbar .navbar-collapse {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  justify-content: flex-end !important;
}

.navbar .navbar-header { display: none !important; }

/* Bizzabo's dynamic theme stylesheet paints the last nav item in the
   theme's color-5 (Smile Orange) as a filled CTA tile. Strip the
   themed background off every nav-menu-btn — text colour rules above
   handle inactive/active states. High specificity (#bs-* id) needed
   to beat Bizzabo's runtime-injected theme rules. */
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn,
#bs-example-navbar-collapse-1 .navbar-nav .nav-button-wrapper,
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn.custom-color,
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn.color-5,
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn.color-1-selected,
#bs-example-navbar-collapse-1 .navbar-nav li,
#bs-example-navbar-collapse-1 .navbar-nav li a,
#bs-example-navbar-collapse-1 .navbar-nav li:hover,
#bs-example-navbar-collapse-1 .navbar-nav li:hover a,
#bs-example-navbar-collapse-1 .navbar-nav li:hover .nav-button-wrapper,
#bs-example-navbar-collapse-1 .navbar-nav li:hover .nav-menu-btn,
#bs-example-navbar-collapse-1 .navbar-nav li:focus .nav-menu-btn,
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn:hover,
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn:focus,
#bs-example-navbar-collapse-1 .navbar-nav .nav-button-wrapper:hover,
#bs-example-navbar-collapse-1 .navbar-nav .nav-button-wrapper:focus,
.navbar .navbar-nav .nav-menu-btn,
.navbar .navbar-nav .nav-menu-btn:hover,
.navbar .navbar-nav .nav-menu-btn:focus,
.navbar .navbar-nav .nav-menu-btn.custom-color,
.navbar .navbar-nav .nav-menu-btn[class*="color-"],
.navbar .navbar-nav li:hover,
.navbar .navbar-nav li:hover a,
.navbar .navbar-nav li:hover .nav-button-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}

#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn {
  color: var(--squid-ink) !important;
}

/* Ensure consistent padding on every nav item's <a>/wrapper so all four
   tabs sit at the same vertical centre. */
#bs-example-navbar-collapse-1 .navbar-nav li:hover .nav-menu-btn,
#bs-example-navbar-collapse-1 .navbar-nav li.active .nav-menu-btn,
#bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn.color-1-selected.selected {
  color: var(--orange) !important;
}

.navbar .navbar-nav.navbar-right { display: none; }

.navbar-header .navbar-toggle .icon-bar { background-color: var(--squid-ink); }

.nav .image-container-item { height: var(--gutter-huge); width: auto; }
.nav .logo-li-holder { margin-right: 0; }

/* ============================================================
   Mobile navbar (≤ 767px)
   - Hide the countdown (desktop-only flourish).
   - Re-expose Bizzabo's `.navbar-header > .navbar-toggle` so the
     burger button is visible on the left (the global rule above
     hides it at desktop).
   - Shrink the Register button so it fits next to the burger.
   - Treat the collapsed `.navbar-collapse` as a full-screen
     brand-coloured overlay; Bootstrap toggles `.in` on tap.
   ============================================================ */
@media screen and (max-width: 767px) {

  /* 1. Hide the countdown on mobile. */
  .custom-navbar-countdown { display: none !important; }

  /* 2. Show the navbar-header (burger button container) anchored
        to the left, regardless of the parent's flex justify. */
  .navbar .navbar-header {
    display: flex !important;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: var(--navbar-height);
    margin: 0;
    padding: 0 var(--gutter-small);
    z-index: 102;
  }

  /* 3. The burger button itself. */
  .navbar-default .navbar-toggle {
    display: block;
    position: relative;
    margin: 0;
    padding: .5rem;
    background: transparent !important;
    border: 0;
    cursor: pointer;
  }

  /* 4. Hamburger icon-bars (three stacked spans). */
  .navbar-default .navbar-toggle .icon-bar {
    display: block;
    width: 1.5rem;
    height: 2px;
    margin: 5px 0;
    background-color: var(--colour-squid-ink) !important;
    border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* 5. Animate bars to an X when the menu is open
        (.navbar-toggle drops its `.collapsed` class). */
  .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
    opacity: 0;
  }
  .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 6. Shrink the Register button. */
  .custom-navbar-register {
    right: var(--gutter-small);
    font-size: .85rem !important;
    padding: .5rem 1rem !important;
  }

  /* 7. Full-screen overlay for the open menu. */
  .navbar .navbar-collapse {
    position: fixed !important;
    top: var(--navbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--navbar-height)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: var(--colour-bg-cream) !important;
    overflow-y: auto;
    z-index: 99;
  }

  /* Hide unless Bootstrap has added `.in`. */
  .navbar .navbar-collapse.collapse:not(.in) {
    display: none !important;
  }

  .navbar .navbar-collapse.collapse.in,
  .navbar .navbar-collapse.collapsing {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  /* 8. Menu link list — large, centred, brand-styled. */
  .navbar .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--gutter) var(--gutter) !important;
    text-align: center;
  }

  .navbar .navbar-nav li {
    width: 100%;
    border-bottom: 1px solid var(--colour-bg-beige);
  }
  .navbar .navbar-nav li:last-child { border-bottom: 0; }

  #bs-example-navbar-collapse-1 .navbar-nav li a,
  #bs-example-navbar-collapse-1 .navbar-nav li .nav-button-wrapper,
  #bs-example-navbar-collapse-1 .navbar-nav .nav-menu-btn {
    display: block !important;
    padding: 1.25rem 0 !important;
    font-family: var(--header) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--colour-squid-ink) !important;
    text-align: center;
  }
}




/* Globally remove the max-width caps Bizzabo's wrappers apply (Bootstrap
   .container at ~1170px, plus several Bizzabo wrappers) so every section
   can span full viewport width without any per-section breakout tricks. */
.container,
.container-fluid,
.sections-holder,
.main-view,
.editor-home-page,
.trade-template,
.html-container,
.main-app-container,
.atom-sectionMain,
.rowHolder,
.fr-view {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sections butt up against each other — kill all vertical margins on
   Bizzabo's section wrappers so adjacent sections sit flush. Inner
   padding stays on .main-app-container where each section needs it.
   Bizzabo's runtime CSS injects per-element margin rules keyed by
   class names like .margin-custom-element_element-3689153, so we
   match any class starting with "margin-custom-element". */
.atom-sectionMain,
[class*="margin-custom-element"],
.atom-main {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Top-level sections overlap each other by 1px so the body's cream
   background never peeks through subpixel rounding gaps between
   full-bleed sections. Larger overlaps clip section content.
   .trade-template is Bizzabo's section-template wrapper that sits
   between/around section elements — its default margin/padding is
   what was leaking cream between adjacent sections. */
[class*="section-"]:not([class*="section-divider"]),
.trade-template,
.atom-sectionMain {
  margin-top: 0 !important;
  margin-bottom: -1px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Wooden plank decorative top — apply the .has-wood-plank-top class
   to any section in Bizzabo to give it a full-width wooden plank
   at the top that overlaps into the section above. Also applied
   automatically to #site-footer so every page's footer gets the
   same treatment. The pseudo is anchored to viewport-center via
   left:50% + transform:translateX(-50%) with width:100vw so it
   ignores any parent container constraints. */
.has-wood-plank-top,
#site-footer {
  position: relative !important;
  overflow: visible !important;
}

.has-wood-plank-top::before,
#site-footer::before {
  content: "" !important;
  position: absolute !important;
  top: -1.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 3rem !important;
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/E1m6j6aS0y0osF3sayfx_Divider.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* ====== Hero ====== */
.section-hero-home {
  background-color: var(--colour-off-white) !important;
  padding: 0 !important;
  text-align: center;
  overflow: hidden;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.section-hero-home * {
  background-color: transparent;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.section-hero-home .html-container,
.section-hero-home .main-app-container,
.section-hero-home .atom-sectionMain,
.section-hero-home .rowHolder,
.section-hero-home .row,
.section-hero-home [class*="col-"],
.section-hero-home .bz-flex-col,
.section-hero-home .atom-main,
.section-hero-home .element-groups,
.section-hero-home .fr-view,
.section-hero-home [class*="element-"],
.section-hero-home [class*="CustomElement-"] {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Kill body padding-top + every wrapper-level top spacing so the hero
   butts straight up against the navbar (which may not actually be
   fixed-position on this Bizzabo event despite our intent). */
body,
body[class*="background"],
body.unpublished-event,
body.color-1-background-opacity {
  padding-top: 0 !important;
}

.main-view,
.main-view.footer-padding,
.editor-home-page,
.editor-home-page.footer-padding,
.sections-holder,
.sections-holder > *:first-child,
header.navColors,
.trade-template,
.trade-template.section-hero-home,
.section-hero-home.trade-template {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.section-hero-home .hero-frame {
  display: block;
  position: relative;
  width: 100%;
  line-height: 0;
}

.section-hero-home .hero-port {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto;
  margin: 0;
  background-color: var(--colour-off-white);
}

.section-hero-home .hero-frame {
  width: 100vw !important;
  max-width: 100vw !important;
}


/* ====== Opening Sentence ====== */
.section-opening {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: var(--colour-salmon) !important;
}

.section-opening * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.section-opening .html-container,
.section-opening .main-app-container,
.section-opening .atom-sectionMain,
.section-opening .rowHolder,
.section-opening .row,
.section-opening [class*="col-"],
.section-opening .bz-flex-col,
.section-opening .atom-main,
.section-opening .element-groups,
.section-opening .fr-view,
.section-opening [class*="element-"],
.section-opening [class*="CustomElement-"] {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.section-opening .opening-frame {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 9rem var(--gutter) !important;
  text-align: center;
  background-color: var(--colour-salmon) !important;
}

.section-opening .opening-bg {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  bottom: -15px;
  width: 100%;
  height: calc(100% + 30px);
  object-fit: cover;
  object-position: center;
  z-index: 0;
  clip-path: inset(15px 0 15px 0);
  display: block;
}

.section-opening .opening-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 55vw !important;
}

.section-opening .opening-headline,
.html-container .main-app-container .section-opening .opening-headline,
.section-opening h2.opening-headline {
  font-family: var(--header) !important;
  font-weight: 700 !important;
  font-size: clamp(1.85rem, 3.1vw, 3.75rem) !important;
  line-height: 1.25 !important;
  color: var(--colour-white) !important;
  text-transform: none !important;
  margin: 0 0 calc(var(--gutter) * 1.5) 0 !important;
}

.section-opening .opening-leaf {
  display: inline-block;
  height: .9em;
  width: auto;
  vertical-align: -.05em;
  margin: 0 .25em;
}

@media screen and (max-width: 1279px) {
  .section-opening .opening-frame { min-height: 0; }
  .section-opening .opening-content { max-width: 80vw !important; }
}

@media screen and (max-width: 767px) {
  .section-opening .opening-frame { min-height: 0; padding: 2rem var(--gutter-small) !important; }
  .section-opening .opening-content { max-width: 100% !important; }
  .section-opening .opening-headline,
  .html-container .main-app-container .section-opening .opening-headline,
  .section-opening h2.opening-headline { font-size: var(--size-h3) !important; }
}


/* ====== Experience Amazon Port (flip cards) ====== */
.section-experience {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: var(--colour-salmon) !important;
}

.section-experience * {
  background-color: transparent;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.section-experience .html-container,
.section-experience .main-app-container,
.section-experience .atom-sectionMain,
.section-experience .rowHolder,
.section-experience .row,
.section-experience [class*="col-"],
.section-experience .bz-flex-col,
.section-experience .atom-main,
.section-experience .element-groups,
.section-experience .fr-view,
.section-experience [class*="element-"],
.section-experience [class*="CustomElement-"] {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.section-experience .experience-frame {
  position: relative;
  width: 100%;
  padding: 5rem var(--gutter) var(--gutter-huge) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--colour-salmon) !important;
}

.section-experience .experience-bg {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  bottom: -15px;
  width: 100%;
  height: calc(100% + 30px);
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
  clip-path: inset(15px 0 15px 0);
}

.section-experience .experience-header {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto var(--gutter) auto !important;
  padding: 0 !important;
  width: clamp(22rem, 28vw, 30rem);
  max-width: 100%;
}

.section-experience .experience-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-experience .experience-title,
.section-experience .experience-title {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 2rem !important;
  filter: url(#deboss-effect);
}

.section-experience .experience-cards {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: var(--gutter);
  width: 100% !important;
  margin: 0 auto !important;
  max-width: 80vw !important;
}

.section-experience .flip-card {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  max-width: 16.5rem !important;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.section-experience .flip-card,
.section-experience .flip-card .flip-card-content {
  aspect-ratio: 4 / 5.4;
}

.section-experience .flip-card .flip-card-content {
  position: absolute;
  inset: 0;
  background-color: var(--colour-white);
  border-radius: .35rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform .5s ease;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.section-experience .flip-card .flip-card-content.front {
  transform: rotateY(0);
  padding: .75rem .75rem 0 .75rem !important;
  background-color: var(--colour-off-white) !important;
}

.section-experience .flip-card .flip-card-content.back {
  transform: rotateY(-180deg);
  padding: 1.5rem 1.5rem 1.5rem 1.5rem !important;
  background-color: var(--colour-off-white) !important;
  display: flex;
  flex-direction: column;
}

.section-experience .flip-card.flipped .flip-card-content.front {
  transform: rotateY(180deg);
}

.section-experience .flip-card.flipped .flip-card-content.back {
  transform: rotateY(0);
}

.section-experience .experience-card-image {
  display: block;
  width: 100% !important;
  height: 60% !important;
  object-fit: cover;
  object-position: center;
}

.section-experience .experience-card-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .9rem .9rem 3rem .9rem !important;
  text-align: left;
}

.section-experience .experience-card-title {
  font-family: var(--header) !important;
  font-size: 1.85rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: var(--colour-squid-ink) !important;
  margin: 0 0 .65rem 0 !important;
}

.section-experience .flip-card-content button.flip-link-front {
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  bottom: .9rem;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: auto;
  gap: .5rem;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 .9rem 0 0 !important;
  margin: 0 !important;
  text-align: left !important;
  color: var(--colour-squid-ink) !important;
  font-family: var(--body) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}

.section-experience .flip-card-content button.flip-link-front .experience-card-cta-text {
  margin-right: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.section-experience .flip-card-content button.flip-link-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  cursor: pointer;
  z-index: 1;
}

.section-experience .experience-card-cta-text { color: inherit; }

.section-experience .experience-card-cta-arrow {
  display: inline-block;
  width: 1.85rem;
  height: 1.85rem;
  background-color: var(--colour-smile-orange);
  border-radius: 50%;
  padding: .4rem !important;
  flex-shrink: 0;
}

.section-experience .flip-card-content.back .eyebrow {
  font-family: var(--body) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--colour-squid-ink) !important;
  margin: 0 0 1.25rem 0 !important;
  text-decoration: none !important;
}

.section-experience .flip-card-content.back p {
  font-family: var(--body) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--colour-squid-ink) !important;
  margin: 0 0 1rem 0 !important;
  text-align: left;
}

.section-experience .experience-card-footer {
  margin-top: auto !important;
  padding: 1rem 1rem !important;
  background-color: var(--colour-off-white-shade) !important;
  border-top: none !important;
  border-radius: .25rem;
}

.section-experience .flip-card-content.back .experience-card-footer p,
.section-experience .experience-card-footer p {
  font-family: var(--body) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: var(--colour-squid-ink) !important;
  margin: 0 !important;
  text-align: left;
  line-height: 1.3 !important;
}

.section-experience .flip-link-back {
  align-self: flex-start;
  margin-top: var(--gutter-small) !important;
}

@media screen and (max-width: 1279px) {
  .section-experience .experience-cards { max-width: 90vw !important; gap: var(--gutter-small); }
}

@media screen and (max-width: 991px) {
  .section-experience .experience-cards {
    flex-wrap: wrap;
  }
  .section-experience .flip-card {
    flex: 1 1 calc(50% - var(--gutter-small));
    max-width: 22rem !important;
  }
}

@media screen and (max-width: 767px) {
  .section-experience .experience-frame {
    padding: var(--gutter) var(--gutter-small) !important;
  }

  /* Shrink the plank header + title so it fits cleanly at 390px and
     reads in proportion to the cards below. */
  .section-experience .experience-header {
    width: clamp(14rem, 65vw, 18rem);
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center;
  }
  .html-container .main-app-container .section-experience .experience-title,
  .section-experience .experience-title {
    font-size: 1.1rem !important;
    padding: 0 1rem !important;
  }

  /* Two cards on top, one centred on the bottom row. */
  .section-experience .experience-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    max-width: 100% !important;
    gap: var(--gutter-small);
  }
  .section-experience .flip-card {
    flex: 0 0 calc(50% - (var(--gutter-small) / 2));
    width: auto;
    max-width: none !important;
  }
  .section-experience .flip-card,
  .section-experience .flip-card .flip-card-content {
    aspect-ratio: 4 / 6.8;
  }

  /* Card type scales — tighter to fit the half-width tiles. */
  .section-experience .experience-card-body {
    padding: .6rem .6rem 2.4rem .6rem !important;
  }
  .section-experience .experience-card-title {
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
    margin-bottom: .4rem !important;
  }
  .section-experience .flip-card-content button.flip-link-front {
    bottom: .6rem;
    padding: 0 .6rem 0 0 !important;
    font-size: .7rem !important;
  }
  .section-experience .experience-card-cta-arrow {
    width: 1.4rem;
    height: 1.4rem;
    padding: .3rem !important;
  }
  .section-experience .flip-card-content.back {
    padding: .75rem !important;
  }
  .section-experience .flip-card-content.back .eyebrow {
    font-size: .5rem !important;
    margin-bottom: .4rem !important;
    letter-spacing: .08em;
  }
  .section-experience .flip-card-content.back p {
    font-size: .62rem !important;
    line-height: 1.3 !important;
    margin-bottom: .4rem !important;
  }
  .section-experience .experience-card-footer {
    padding: .45rem .55rem !important;
  }
  .section-experience .flip-card-content.back .experience-card-footer p,
  .section-experience .experience-card-footer p {
    font-size: .55rem !important;
    line-height: 1.2 !important;
  }
}


/* ====== Accordion ====== */
.accordion {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: var(--gutter);
}

.accordion button {
  background-color: transparent;
  padding: 0;
  border: none;
}

.main-app-container .accordion h3 {
  font-size: var(--size-large);
  font-weight: 700;
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--squid-ink);
}

.accordion h3:hover { color: var(--orange); }

.accordion h3:before {
  content: '';
  display: block;
  width: 100%;
  border-bottom: solid var(--gutter-tiny) var(--orange);
  height: var(--gutter-tiny);
}

.accordion h3:first-of-type:before { content: none; }

.accordion-trigger {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: relative;
  margin-left: var(--gutter-small);
}

.accordion-icon .bar {
  position: absolute;
  background-color: var(--orange);
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: transform .2s ease;
}

.accordion-icon .vertical { transform: translateY(-50%) rotate(90deg); }
.accordion-trigger[aria-expanded="true"] .vertical { transform: translateY(-50%) rotate(0deg); }

.accordion-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .3s ease, opacity .3s ease;
  padding-top: var(--gutter-small);
}

.accordion-panel:not([hidden])[style*="height"]:not([style*="height: 0"]) { opacity: 1; }
.accordion-panel.active { visibility: visible; height: auto; opacity: 1; }

.main-app-container .accordion h3 button {
  font-family: var(--body);
  font-size: var(--size-large);
  line-height: 130%;
  font-weight: 500;
  text-align: left;
  padding: var(--gutter-small) 0;
  width: 100%;
  color: var(--squid-ink);
}

/* ====== Find us on the Croisette ====== */
.section-find-us {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 !important;
  background-color: var(--colour-sandstone);
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/xB7vMOVCT52nstm49CX0_find-us-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-find-us * {
  box-sizing: border-box;
}

.section-find-us .html-container,
.section-find-us .main-app-container,
.section-find-us .atom-sectionMain,
.section-find-us .rowHolder,
.section-find-us .row,
.section-find-us [class*="col-"],
.section-find-us .bz-flex-col,
.section-find-us .atom-main,
.section-find-us .element-groups,
.section-find-us .fr-view,
.section-find-us [class*="element-"],
.section-find-us [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-find-us .main-app-container {
  position: relative;
  padding: 5rem 5vw 6rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The .find-us-bg <img> is no longer used (replaced by a CSS background-image
   on .section-find-us so it covers the full 100vw section). The img is left
   in the HTML in case we ever need it back. */
.section-find-us .find-us-bg {
  display: none !important;
}

.section-find-us .find-us-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

/* Wooden plaque header — same pattern as Experience + Stage Day 1. */
.section-find-us .find-us-header {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(22rem, 28vw, 30rem);
  max-width: 100%;
  margin: 0 auto 2.5rem auto;
  padding: 0;
}

.section-find-us .find-us-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-find-us .find-us-title,
.section-find-us .find-us-title {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 1.5rem !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  text-align: center !important;
  line-height: 1 !important;
  filter: url(#deboss-effect);
}

/* Illustrated map — rounded corners, soft drop shadow, subtle hover. */
.section-find-us .find-us-map {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  border-radius: .75rem;
  overflow: hidden;
  text-decoration: none;
  outline: none;
  border: none;
  background: transparent;
}

.section-find-us .find-us-map:hover,
.section-find-us .find-us-map:focus,
.section-find-us .find-us-map:active {
  outline: none;
  box-shadow: none;
  transform: none;
}

.section-find-us .find-us-map-image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .section-find-us .main-app-container {
    padding: 4rem 5vw 5rem 5vw !important;
  }
  .section-find-us .find-us-header {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .section-find-us .main-app-container {
    padding: 3rem 5vw 3.5rem 5vw !important;
  }
  .section-find-us .find-us-header {
    width: clamp(17rem, 70vw, 20rem);
    margin-bottom: 1.5rem;
  }
  .html-container .main-app-container .section-find-us .find-us-title,
  .section-find-us .find-us-title {
    font-size: 1.15rem !important;
    padding: 0 1rem !important;
  }
}

/* ====== FAQs preview ====== */
.section-faqs-preview {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 !important;
  background-color: var(--colour-sandstone);
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/04K03rlwTROJSwCdkaW2_faqs-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-faqs-preview * {
  box-sizing: border-box;
}

.section-faqs-preview .html-container,
.section-faqs-preview .main-app-container,
.section-faqs-preview .atom-sectionMain,
.section-faqs-preview .rowHolder,
.section-faqs-preview .row,
.section-faqs-preview [class*="col-"],
.section-faqs-preview .bz-flex-col,
.section-faqs-preview .atom-main,
.section-faqs-preview .element-groups,
.section-faqs-preview .fr-view,
.section-faqs-preview [class*="element-"],
.section-faqs-preview [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-faqs-preview .main-app-container {
  position: relative;
  padding: 5rem 5vw 6rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The <img class="faqs-bg"> in the HTML is no longer used — replaced by the
   CSS background-image above so it covers the full 100vw section. */
.section-faqs-preview .faqs-bg {
  display: none !important;
}

.section-faqs-preview .faqs-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

/* Wooden plaque header — same pattern as Experience / Stage / Find us. */
.section-faqs-preview .faqs-header {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(22rem, 28vw, 30rem);
  max-width: 100%;
  margin: 0 auto 2.5rem auto;
  padding: 0;
}

.section-faqs-preview .faqs-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-faqs-preview .faqs-title,
.section-faqs-preview .faqs-title {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 1.5rem !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  text-align: center !important;
  line-height: 1 !important;
  filter: url(#deboss-effect);
}

/* Two-column card — orange CTA inset on the left, white accordion on the right.
   Padding on the card creates the visible white "border" frame around the
   orange panel, matching the Leaders Summit FAQs treatment. */
.section-faqs-preview .faqs-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.25rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem;
  border-radius: .75rem;
  background: var(--colour-off-white);
}

/* Left: orange CTA link — leaf-pattern image as the entire background,
   no solid orange fill, no multiply blend (image is fully opaque). */
.section-faqs-preview .faqs-cta {
  position: relative;
  display: block;
  padding: 2rem 1.75rem 1.75rem 1.75rem;
  background: transparent;
  color: var(--colour-off-white);
  text-decoration: none;
  overflow: hidden;
  border-radius: .75rem;
  height: 100%;
  min-height: 14rem;
}

.section-faqs-preview .faqs-cta-bg {
  border-radius: .75rem;
}

.section-faqs-preview .faqs-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.section-faqs-preview .faqs-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 12rem;
}

.html-container .main-app-container .section-faqs-preview .faqs-cta-text,
.section-faqs-preview .faqs-cta-text {
  font-family: var(--header) !important;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem) !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  line-height: 1.25 !important;
  margin: 0 0 2.5rem 0 !important;
}

.section-faqs-preview .faqs-cta-action {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  text-align: left;
}

.section-faqs-preview .faqs-cta-label {
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 700;
  color: var(--colour-off-white);
  text-align: left;
  margin-right: auto;
}

.section-faqs-preview .faqs-cta-arrow {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
  flex-shrink: 0;
}

.section-faqs-preview .faqs-accordion {
  padding: 0 1.75rem;
  background: var(--colour-off-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.section-faqs-preview .faqs-accordion h3 {
  margin: 0 !important;
  padding: 0;
  border-bottom: 1px solid var(--colour-squid-ink);
}

.section-faqs-preview .faqs-accordion h3:first-of-type {
  border-top: 1px solid var(--colour-squid-ink);
}

.section-faqs-preview .faqs-accordion h3:before {
  content: none !important;
}

.section-faqs-preview .faqs-accordion .accordion-trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2rem .5rem 2rem .5rem !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  cursor: pointer;
  font-family: var(--body) !important;
  font-size: 1.125rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--colour-squid-ink) !important;
  line-height: 1.3 !important;
}

.section-faqs-preview .faqs-accordion .accordion-trigger > span:first-child {
  flex: 1 1 auto;
  font-style: normal !important;
}

.section-faqs-preview .faqs-accordion .accordion-icon {
  display: inline-block;
  position: relative;
  width: .9rem;
  height: .9rem;
  flex-shrink: 0;
  margin-left: 1.5rem;
}

/* Draw the +/- via pseudo-elements so it works even if Bizzabo's HTML
   editor strips the empty <span class="bar"> elements. */
.section-faqs-preview .faqs-accordion .accordion-icon::before,
.section-faqs-preview .faqs-accordion .accordion-icon::after {
  content: '';
  position: absolute;
  background-color: var(--colour-squid-ink);
  width: 100%;
  height: 1.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: transform .2s ease;
}

.section-faqs-preview .faqs-accordion .accordion-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.section-faqs-preview .faqs-accordion .accordion-trigger[aria-expanded="true"] .accordion-icon::after {
  transform: translateY(-50%) rotate(0deg);
}

/* Hide the original .bar spans (if Bizzabo kept them) so they don't
   double up with the pseudo-elements above. */
.section-faqs-preview .faqs-accordion .accordion-icon .bar {
  display: none !important;
}

.section-faqs-preview .faqs-accordion .accordion-panel p {
  font-family: var(--body) !important;
  font-size: .9rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--colour-squid-ink) !important;
  margin: 0 0 1rem 0 !important;
}

@media (max-width: 991px) {
  .section-faqs-preview .faqs-card {
    grid-template-columns: 1fr;
    max-width: 36rem;
  }
  .section-faqs-preview .faqs-cta {
    min-height: 14rem;
  }
}

@media (max-width: 767px) {
  .section-faqs-preview .main-app-container {
    padding: 3rem 5vw 3.5rem 5vw !important;
  }
  .section-faqs-preview .faqs-header {
    width: clamp(17rem, 70vw, 20rem);
    margin-bottom: 1.5rem;
  }
  .section-faqs-preview .faqs-cta {
    padding: 1.5rem 1.25rem 1.25rem 1.25rem;
    min-height: 12rem;
  }
  .section-faqs-preview .faqs-accordion {
    padding: .5rem 1.25rem;
  }
  .section-faqs-preview .faqs-accordion .accordion-trigger {
    padding: 1rem 0 !important;
    font-size: .95rem !important;
  }
}

/* ====== Wooden divider — inner reset ======
   Section-level width/margin/overlap is handled by the earlier rule
   near the top of this file (around line 678). This block only
   handles the inner wrapper chain and the image itself. */
.section-divider .html-container,
.section-divider .main-app-container,
.section-divider .atom-sectionMain,
.section-divider .rowHolder,
.section-divider .row,
.section-divider [class*="col-"],
.section-divider .atom-main,
.section-divider [class*="margin-custom-element"],
.section-divider .element-groups,
.section-divider [class*="element-"],
.section-divider .fr-view {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Image fills the (already full-viewport-width) section. width: 100%
   inside a 100vw parent = 100vw. Beats Bizzabo's inline width style. */
.section-divider img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ====== Creative takes the stage (Day 1 / Day 2 / Day 3) ====== */
.section-stage-day-1,
.section-stage-day-2,
.section-stage-day-3 {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: var(--colour-off-white) !important;
  overflow: visible !important;
}

.section-stage-day-1 *,
.section-stage-day-2 *,
.section-stage-day-3 * {
  box-sizing: border-box;
}

/* Reset Bizzabo container layers so they don't restrict width or add
   white backgrounds. .entity-photo-holder is EXCLUDED — it's a styled
   speaker card and must keep its padding + orange background. */
.section-stage-day-1 .html-container,
.section-stage-day-1 .main-app-container,
.section-stage-day-1 .atom-sectionMain,
.section-stage-day-1 .rowHolder,
.section-stage-day-1 .row,
.section-stage-day-1 [class*="col-"]:not(.entity-photo-holder),
.section-stage-day-1 .bz-flex-col,
.section-stage-day-1 .atom-main,
.section-stage-day-1 .element-groups,
.section-stage-day-1 .fr-view,
.section-stage-day-1 [class*="element-"]:not(.entity-photo-holder),
.section-stage-day-1 [class*="CustomElement-"],
.section-stage-day-2 .html-container,
.section-stage-day-2 .main-app-container,
.section-stage-day-2 .atom-sectionMain,
.section-stage-day-2 .rowHolder,
.section-stage-day-2 .row,
.section-stage-day-2 [class*="col-"]:not(.entity-photo-holder),
.section-stage-day-2 .bz-flex-col,
.section-stage-day-2 .atom-main,
.section-stage-day-2 .element-groups,
.section-stage-day-2 .fr-view,
.section-stage-day-2 [class*="element-"]:not(.entity-photo-holder),
.section-stage-day-2 [class*="CustomElement-"],
.section-stage-day-3 .html-container,
.section-stage-day-3 .main-app-container,
.section-stage-day-3 .atom-sectionMain,
.section-stage-day-3 .rowHolder,
.section-stage-day-3 .row,
.section-stage-day-3 [class*="col-"]:not(.entity-photo-holder),
.section-stage-day-3 .bz-flex-col,
.section-stage-day-3 .atom-main,
.section-stage-day-3 .element-groups,
.section-stage-day-3 .fr-view,
.section-stage-day-3 [class*="element-"]:not(.entity-photo-holder),
.section-stage-day-3 [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-stage-day-1 .main-app-container {
  position: relative;
  min-height: 62rem;
  padding: 22rem 5vw 7rem 38vw !important;
}

/* Day 2 mirror of Day 1 — no plaque, card on the RIGHT, 2×2 speakers on LEFT.
   Padding-top matches the card's top (7rem) so the speakers grid aligns with
   the top edge of the wooden card. */
.section-stage-day-2 .main-app-container {
  position: relative;
  min-height: 46rem;
  padding: 7rem 38vw 8rem 5vw !important;
}

/* Day 3 mirror of Day 1 — no plaque, card on LEFT, 5 sandstone speakers (3+2) on RIGHT.
   Padding-top matches the card's top (7rem). */
.section-stage-day-3 .main-app-container {
  position: relative;
  min-height: 50rem;
  padding: 7rem 5vw 8rem 38vw !important;
}

.section-stage-day-1 .stage-frame,
.section-stage-day-2 .stage-frame,
.section-stage-day-3 .stage-frame {
  position: static;
}

.section-stage-day-1 .stage-bg,
.section-stage-day-2 .stage-bg,
.section-stage-day-3 .stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.section-stage-day-1 .stage-header,
.section-stage-day-2 .stage-header,
.section-stage-day-3 .stage-header {
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(22rem, 28vw, 30rem);
  z-index: 2;
}

.section-stage-day-1 .stage-header-bg,
.section-stage-day-2 .stage-header-bg,
.section-stage-day-3 .stage-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-stage-day-1 .stage-title,
.html-container .main-app-container .section-stage-day-2 .stage-title,
.html-container .main-app-container .section-stage-day-3 .stage-title,
.section-stage-day-1 .stage-title,
.section-stage-day-2 .stage-title,
.section-stage-day-3 .stage-title {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 2rem !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  text-align: center !important;
  line-height: 1 !important;
  filter: url(#deboss-effect);
}

.html-container .main-app-container .section-stage-day-1 .stage-view-schedule,
.section-stage-day-1 a.stage-view-schedule,
.section-stage-day-1 .stage-view-schedule {
  position: absolute;
  top: 14rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.75rem !important;
  background: var(--colour-squid-ink) !important;
  background-color: var(--colour-squid-ink) !important;
  color: var(--colour-off-white) !important;
  font-family: var(--header) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: .65rem !important;
  text-decoration: none !important;
  transition: background-color .2s ease, transform .15s ease;
}

.html-container .main-app-container .section-stage-day-1 .stage-view-schedule:hover,
.section-stage-day-1 a.stage-view-schedule:hover,
.section-stage-day-1 .stage-view-schedule:hover {
  background: var(--colour-smile-orange) !important;
  background-color: var(--colour-smile-orange) !important;
  color: var(--colour-off-white) !important;
  transform: translate(-50%, -1px);
}

/* Day 1 wooden card — keep as is, shadow falls down-left and clips
   cleanly at the section's left padding edge. */
.section-stage-day-1 .stage-card {
  position: absolute;
  top: 22rem;
  left: 12vw;
  width: 22vw;
  min-width: 19rem;
  max-width: 22rem;
  min-height: 32rem;
  z-index: 2;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow:
    -2px 4px 6px rgba(22, 29, 38, .18),
    -4px 8px 10px -2px rgba(22, 29, 38, .22);
}

/* Day 2 wooden card — card on the right. NO drop shadow (was rendering
   as a noticeable dark box behind the card on the section's bg). */
.section-stage-day-2 .stage-card {
  position: absolute;
  top: 7rem;
  right: 12vw;
  width: 22vw;
  min-width: 19rem;
  max-width: 22rem;
  min-height: 32rem;
  z-index: 2;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow: none;
}

/* Day 3 wooden card — card on the left. NO drop shadow (same reason). */
.section-stage-day-3 .stage-card {
  position: absolute;
  top: 7rem;
  left: 12vw;
  width: 22vw;
  min-width: 19rem;
  max-width: 22rem;
  min-height: 32rem;
  z-index: 2;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow: none;
}

.section-stage-day-1 .stage-card-bg,
.section-stage-day-2 .stage-card-bg,
.section-stage-day-3 .stage-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.section-stage-day-1 .stage-card-content,
.section-stage-day-2 .stage-card-content,
.section-stage-day-3 .stage-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.6rem 1.6rem 5.5rem 1.6rem;
  text-align: left;
}

.html-container .main-app-container .section-stage-day-1 .stage-card-eyebrow,
.html-container .main-app-container .section-stage-day-2 .stage-card-eyebrow,
.html-container .main-app-container .section-stage-day-3 .stage-card-eyebrow,
.section-stage-day-1 .stage-card-eyebrow,
.section-stage-day-2 .stage-card-eyebrow,
.section-stage-day-3 .stage-card-eyebrow {
  font-family: var(--header) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 .15rem 0 !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

.html-container .main-app-container .section-stage-day-1 .stage-card-title,
.html-container .main-app-container .section-stage-day-2 .stage-card-title,
.html-container .main-app-container .section-stage-day-3 .stage-card-title,
.section-stage-day-1 .stage-card-title,
.section-stage-day-2 .stage-card-title,
.section-stage-day-3 .stage-card-title {
  font-family: var(--header) !important;
  font-size: 1.55rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 1.1rem 0 !important;
  line-height: 1.05 !important;
  text-align: left !important;
  min-height: 4.9rem !important;
}

.section-stage-day-1 .stage-card-tag,
.section-stage-day-2 .stage-card-tag,
.section-stage-day-3 .stage-card-tag {
  font-family: var(--body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 .85rem 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.section-stage-day-1 .stage-card-body,
.section-stage-day-2 .stage-card-body,
.section-stage-day-3 .stage-card-body {
  font-family: var(--body) !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 2rem 0 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* Time box — true CSS deboss against the wooden card. Light source
   matches the rest of the site (upper-right). No solid dark overlay
   any more — the wood texture shows through with just a subtle
   multiply tint so it reads as carved INTO the wood, not painted onto it. */
.section-stage-day-1 .stage-card-time,
.section-stage-day-2 .stage-card-time,
.section-stage-day-3 .stage-card-time {
  position: relative;
  margin-top: auto;
  padding: 1rem 1rem;
  border: none;
  border-radius: .35rem;
  text-align: center;
  background: transparent;
  overflow: hidden;
  box-shadow:
    inset -3px 3px 7px rgba(0, 0, 0, .75),
    inset 2px -2px 4px rgba(255, 255, 255, .25),
    inset 0 0 18px rgba(0, 0, 0, .35);
}

.section-stage-day-1 .stage-card-time-bg,
.section-stage-day-2 .stage-card-time-bg,
.section-stage-day-3 .stage-card-time-bg {
  display: none;
}

.section-stage-day-1 .stage-card-time p,
.section-stage-day-2 .stage-card-time p,
.section-stage-day-3 .stage-card-time p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--colour-off-white);
  line-height: 1.35;
  text-align: center;
}

.html-container .main-app-container .section-stage-day-1 .stage-card-cta,
.html-container .main-app-container .section-stage-day-2 .stage-card-cta,
.html-container .main-app-container .section-stage-day-3 .stage-card-cta,
.section-stage-day-1 .stage-card-cta,
.section-stage-day-2 .stage-card-cta,
.section-stage-day-3 .stage-card-cta {
  position: absolute !important;
  left: 1.25rem !important;
  right: 1.25rem !important;
  bottom: 1.25rem !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.section-stage-day-1 .stage-card-cta-text,
.section-stage-day-2 .stage-card-cta-text,
.section-stage-day-3 .stage-card-cta-text {
  font-family: var(--header);
  font-size: .9rem;
  font-weight: 500;
  color: var(--colour-off-white);
}

.section-stage-day-1 .stage-card-cta-arrow,
.section-stage-day-2 .stage-card-cta-arrow,
.section-stage-day-3 .stage-card-cta-arrow {
  width: 2.2rem;
  height: 2.2rem;
  display: block;
  border-radius: 50%;
}

/* Bizzabo native speakers widget — polaroid-style orange cards in the right column.
   Bootstrap row clearfix pseudo-elements would steal grid cells, so hide them. */
.section-stage-day-1 .attendees-faces .row::before,
.section-stage-day-1 .attendees-faces .row::after,
.section-stage-day-2 .attendees-faces .row::before,
.section-stage-day-2 .attendees-faces .row::after,
.section-stage-day-3 .attendees-faces .row::before,
.section-stage-day-3 .attendees-faces .row::after {
  display: none !important;
}

.section-stage-day-1 .attendees-faces,
.section-stage-day-2 .attendees-faces,
.section-stage-day-3 .attendees-faces {
  position: relative;
  z-index: 1;
}

/* Cap the speakers grid width so cards stay polaroid-sized (~10rem each).
   Day 1/3: 3 across, room for ~40rem total. Day 2: 2 across, ~26rem total.
   Row is auto-margined so the grid centers in the available speakers column. */
.section-stage-day-1 .attendees-faces,
.section-stage-day-2 .attendees-faces,
.section-stage-day-3 .attendees-faces {
  width: 100% !important;
  max-width: 100% !important;
}

.section-stage-day-1 .attendees-faces .row,
.section-stage-day-2 .attendees-faces .row,
.section-stage-day-3 .attendees-faces .row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 36rem !important;
}


/* Column sizing only — width-related properties only. Padding and margin
   are deliberately NOT set here because the col- DIV is the same element
   as .entity-photo-holder, and the speaker rule below owns its padding.
   All three days = 3-up, calc() subtracts the 1.5rem flex gap. */
.section-stage-day-1 .attendees-faces .row [class*="col-"],
.section-stage-day-2 .attendees-faces .row [class*="col-"],
.section-stage-day-3 .attendees-faces .row [class*="col-"] {
  flex: 0 0 calc(33.333% - 1rem) !important;
  width: calc(33.333% - 1rem) !important;
  max-width: calc(33.333% - 1rem) !important;
  min-width: 0 !important;
}

/* Speaker-card pattern — lifted verbatim from Leaders Summit. Padding
   creates the visible orange frame around the photo + name strip.
   The reset block above explicitly :not(.entity-photo-holder)'s the
   col- selectors so this rule is no longer fighting itself. */
.section-stage-day-1 .entity-photo-holder,
.section-stage-day-2 .entity-photo-holder,
.section-stage-day-3 .entity-photo-holder {
  position: relative !important;
  box-sizing: border-box !important;
  background-color: var(--colour-smile-orange) !important;
  border: none !important;
  border-radius: .5rem !important;
  overflow: hidden !important;
  padding: .4rem !important;
  margin: 0 !important;
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.section-stage-day-1 .entity-photo-holder:hover,
.section-stage-day-2 .entity-photo-holder:hover,
.section-stage-day-3 .entity-photo-holder:hover {
  transform: translate(-1px, 2px);
  box-shadow:
    -2px 3px 4px rgba(22, 29, 38, 0.24),
    -6px 10px 10px -2px rgba(22, 29, 38, 0.34);
}

.section-stage-day-1 .entity-photo-holder a,
.section-stage-day-2 .entity-photo-holder a,
.section-stage-day-3 .entity-photo-holder a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto .3rem auto !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: var(--colour-smile-orange) !important;
  border-radius: .35rem !important;
  overflow: hidden !important;
}

.section-stage-day-1 .entity-photo-holder .speaker-text,
.section-stage-day-2 .entity-photo-holder .speaker-text,
.section-stage-day-3 .entity-photo-holder .speaker-text {
  background-color: var(--colour-smile-orange) !important;
  padding: .3rem .4rem .5rem .4rem !important;
  text-align: left !important;
  margin: 0 !important;
  min-height: 5.5rem !important;
}

.section-stage-day-1 .object-trade-thumbnail,
.section-stage-day-2 .object-trade-thumbnail,
.section-stage-day-3 .object-trade-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: .35rem !important;
  margin: 0 !important;
  background: transparent !important;
}


.section-stage-day-1 .entity-photo-holder .attendee-name,
.section-stage-day-1 .entity-photo-holder .atom-fullname,
.section-stage-day-2 .entity-photo-holder .attendee-name,
.section-stage-day-2 .entity-photo-holder .atom-fullname,
.section-stage-day-3 .entity-photo-holder .attendee-name,
.section-stage-day-3 .entity-photo-holder .atom-fullname {
  color: var(--colour-off-white) !important;
  font-family: var(--body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 120% !important;
  margin: 0 0 .15rem 0 !important;
  background: transparent !important;
}

.section-stage-day-1 .entity-photo-holder .attendee-title,
.section-stage-day-1 .entity-photo-holder .attendee-company,
.section-stage-day-1 .entity-photo-holder .atom-text1,
.section-stage-day-1 .entity-photo-holder .atom-text2,
.section-stage-day-2 .entity-photo-holder .attendee-title,
.section-stage-day-2 .entity-photo-holder .attendee-company,
.section-stage-day-2 .entity-photo-holder .atom-text1,
.section-stage-day-2 .entity-photo-holder .atom-text2,
.section-stage-day-3 .entity-photo-holder .attendee-title,
.section-stage-day-3 .entity-photo-holder .attendee-company,
.section-stage-day-3 .entity-photo-holder .atom-text1,
.section-stage-day-3 .entity-photo-holder .atom-text2 {
  color: var(--colour-off-white) !important;
  font-family: var(--body) !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  line-height: 130% !important;
  margin: 0 !important;
  background: transparent !important;
}

.section-stage-day-1 .entity-photo-holder .atom-text3,
.section-stage-day-1 .entity-photo-holder .attendee-speaker,
.section-stage-day-2 .entity-photo-holder .atom-text3,
.section-stage-day-2 .entity-photo-holder .attendee-speaker,
.section-stage-day-3 .entity-photo-holder .atom-text3,
.section-stage-day-3 .entity-photo-holder .attendee-speaker {
  color: var(--colour-off-white) !important;
  font-family: var(--body) !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  line-height: 130% !important;
  margin: .3rem 0 0 0 !important;
  background: transparent !important;
}

/* Per-day speaker colour overrides — only the outer .entity-photo-holder
   carries the colour, at 80% alpha so the section's textured bg shows
   through. Inner photo container <a> and .speaker-text are kept fully
   transparent so they don't stack a second colour layer on top. */

/* Day 1 — blush / salmon */
.section-stage-day-1 .entity-photo-holder {
  background-color: rgba(255, 135, 86, .8) !important;
}
.section-stage-day-1 .entity-photo-holder a,
.section-stage-day-1 .entity-photo-holder .speaker-text {
  background-color: transparent !important;
}

/* Day 2 — mustard / amber */
.section-stage-day-2 .entity-photo-holder {
  background-color: rgba(229, 146, 20, .8) !important;
}
.section-stage-day-2 .entity-photo-holder a,
.section-stage-day-2 .entity-photo-holder .speaker-text {
  background-color: transparent !important;
}

/* Day 3 — sandstone (with dark text + dark inner border, white wouldn't read) */
.section-stage-day-3 .entity-photo-holder {
  background-color: rgba(255, 217, 142, .8) !important;
}
.section-stage-day-3 .entity-photo-holder a,
.section-stage-day-3 .entity-photo-holder .speaker-text {
  background-color: transparent !important;
}

.section-stage-day-3 .entity-photo-holder a {
  border-color: rgba(22, 29, 38, .22) !important;
}

.section-stage-day-3 .entity-photo-holder .attendee-name,
.section-stage-day-3 .entity-photo-holder .atom-fullname,
.section-stage-day-3 .entity-photo-holder .attendee-title,
.section-stage-day-3 .entity-photo-holder .attendee-company,
.section-stage-day-3 .entity-photo-holder .atom-text1,
.section-stage-day-3 .entity-photo-holder .atom-text2,
.section-stage-day-3 .entity-photo-holder .atom-text3,
.section-stage-day-3 .entity-photo-holder .attendee-speaker {
  color: var(--colour-squid-ink) !important;
}

@media (max-width: 1279px) {
  .section-stage-day-1 .main-app-container {
    padding: 16rem 4vw 5rem 34vw !important;
  }
  .section-stage-day-2 .main-app-container {
    padding: 6rem 34vw 6rem 4vw !important;
  }
  .section-stage-day-3 .main-app-container {
    padding: 6rem 4vw 6rem 34vw !important;
  }
  .section-stage-day-1 .stage-card,
  .section-stage-day-2 .stage-card,
  .section-stage-day-3 .stage-card {
    width: 30vw;
  }
}

@media (max-width: 991px) {
  .section-stage-day-1 .main-app-container,
  .section-stage-day-2 .main-app-container,
  .section-stage-day-3 .main-app-container {
    min-height: 0;
    padding: 5rem 5vw 4rem 5vw !important;
  }
  .section-stage-day-1 .main-app-container {
    padding-top: 11rem !important;
  }
  .section-stage-day-1 .stage-card,
  .section-stage-day-2 .stage-card,
  .section-stage-day-3 .stage-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto 2.5rem auto;
    aspect-ratio: auto;
  }
  .section-stage-day-1 .attendees-faces .row,
  .section-stage-day-3 .attendees-faces .row {
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 1rem !important;
  }
  .section-stage-day-2 .attendees-faces .row {
    max-width: 22rem !important;
    margin: 0 auto !important;
    gap: 1rem !important;
  }
}

@media (max-width: 767px) {
  .section-stage-day-1 .main-app-container,
  .section-stage-day-2 .main-app-container,
  .section-stage-day-3 .main-app-container {
    padding: 4rem 5vw 3rem 5vw !important;
  }
  .section-stage-day-1 .main-app-container {
    padding-top: 9rem !important;
  }
  .section-stage-day-1 .stage-header,
  .section-stage-day-2 .stage-header,
  .section-stage-day-3 .stage-header {
    top: 2.5rem;
    width: clamp(17rem, 70vw, 20rem);
  }
  .section-stage-day-1 .stage-view-schedule {
    top: 7.5rem;
    font-size: .9rem;
    padding: .65rem 1.25rem;
  }
  .section-stage-day-1 .stage-card,
  .section-stage-day-2 .stage-card,
  .section-stage-day-3 .stage-card {
    max-width: 100%;
  }
  .section-stage-day-1 .attendees-faces .row [class*="col-"],
  .section-stage-day-2 .attendees-faces .row [class*="col-"],
  .section-stage-day-3 .attendees-faces .row [class*="col-"] {
    flex: 0 0 calc(50% - .5rem) !important;
    width: calc(50% - .5rem) !important;
    max-width: calc(50% - .5rem) !important;
  }
}


/* ====== Footer ====== */
footer:has(#site-footer),
footer:has(#site-footer) .main-app-container,
footer:has(#site-footer) .row,
footer:has(#site-footer) [class*="col-"],
footer:has(#site-footer) .rowHolder,
footer:has(#site-footer) .element-groups,
footer:has(#site-footer) [class*="element-"] {
  background-color: var(--squid-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#site-footer {
  position: relative;
  margin-top: 0;
  padding: var(--gutter);
  background-color: var(--squid-ink);
  color: var(--off-white);
  font-family: var(--body);
  text-align: left;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#site-footer a {
  color: var(--off-white);
  text-decoration: underline;
}

#site-footer a:hover { opacity: 0.75; }

/* Every footer asset (social icons + brand logos) is already pure
   white on transparent, so no filter is needed. The previous
   `filter: brightness(1000) grayscale(1)` bloomed the anti-aliased
   edges into a halo in Safari (Chrome's compositor was more forgiving),
   which made the icons look pixelated and over-sized. */

#site-footer .disclaimer {
  margin-bottom: 1.5rem;
}

#site-footer .disclaimer p {
  margin: 0;
  color: var(--off-white);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
}

#site-footer .legal {
  display: block;
  font-size: var(--size-small);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

#site-footer .legal a {
  margin: 0 0.8em;
}

#site-footer .legal a:first-child { margin-left: 0; }
#site-footer .legal a:last-child { margin-right: 0; }

#site-footer .socials {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

#site-footer .socials a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

#site-footer .socials img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

#site-footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--gutter-small);
  border-top: 1px dashed rgba(255, 255, 255, 0.3);
  padding-top: 1.75rem;
  margin-top: 0;
}

#site-footer .copyright {
  align-self: flex-end;
  margin-left: auto;
}

#site-footer .bottom .logos {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

#site-footer .bottom .logos a {
  display: inline-flex;
  align-items: center;
}

#site-footer .bottom .logos img {
  height: 3rem;
  width: auto;
  display: block;
}

#site-footer .bottom .logos img[alt="Amazon Ads"] {
  height: 2.25rem;
}

#site-footer .copyright p {
  font-size: var(--size-small);
  color: var(--off-white);
  margin: 0;
}

@media screen and (max-width: 767px) {
  #site-footer { padding: var(--gutter-small); }
  #site-footer .bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Hide Bizzabo's default "Add to calendar" / "Contact the organizer"
   block that sits above our custom footer. Selectors are best guesses;
   if any of these don't match, inspect the live preview in devtools
   and add the actual class. */
.event-add-to-calendar,
.add-to-calendar,
.add-to-calendar-list,
.event-contact-organizer,
.contact-organizer,
.contact-the-organizer,
.js-contact-organizer-action,
.event-footer-aside,
.event-shareable-info,
.event-additional-info,
[class*="footerLinks"] {
  display: none !important;
}

/* Remove cream / white band that appears below the footer — caused by
   Bizzabo's page chrome adding bottom padding past our custom footer. */
.main-view,
.main-view.footer-padding,
.editor-home-page,
.editor-home-page.footer-padding,
.sections-holder {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#site-footer {
  margin-bottom: 0 !important;
}


/* ====== FAQ page (separate page from Home) ====== */
.section-faqs-page {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  background-color: var(--colour-sandstone-tint);
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/a8h061gSRTiVANhyF9qj_faqs-page-bg.jpg');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-faqs-page * {
  box-sizing: border-box;
}

.section-faqs-page .html-container,
.section-faqs-page .main-app-container,
.section-faqs-page .atom-sectionMain,
.section-faqs-page .rowHolder,
.section-faqs-page .row,
.section-faqs-page [class*="col-"],
.section-faqs-page .bz-flex-col,
.section-faqs-page .atom-main,
.section-faqs-page .element-groups,
.section-faqs-page .fr-view,
.section-faqs-page [class*="element-"],
.section-faqs-page [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-faqs-page .main-app-container {
  position: relative;
  padding: 5rem 5vw 2rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-faqs-page .faqs-bg,
.section-faqs-page .faq-page-bg {
  display: none !important;
}

.section-faqs-page .faq-page-frame {
  position: relative;
  width: 100%;
  padding: 0 5vw 4rem 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wooden plank header */
.section-faqs-page .faq-page-header {
  position: relative;
  width: clamp(20rem, 38vw, 30rem);
  margin: 0 auto 1.25rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-faqs-page .faq-page-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-faqs-page .faq-page-title,
.section-faqs-page .faq-page-title {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 2rem !important;
  color: var(--colour-off-white) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  z-index: 1;
  filter: url(#deboss-effect);
}

.html-container .main-app-container .section-faqs-page .faq-page-subtitle,
.section-faqs-page .faq-page-subtitle {
  margin: 0 0 2.5rem 0 !important;
  color: var(--colour-squid-ink) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.15rem, 1.4vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center;
}

/* Category cards — stacked vertically */
.section-faqs-page .faq-category {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto 1.75rem auto;
  background: transparent;
  overflow: visible;
}

.section-faqs-page .faq-category:last-of-type {
  margin-bottom: 0;
}

/* Orange category header banner — its own rounded rectangle that sits
   BEHIND the white accordion. White (.faqs-list) has a higher z-index
   and a negative margin-top, so it overlaps and covers the bottom
   portion of the orange. Extra padding-bottom here is what creates the
   "orange tab sticking out under the white" look. */
.section-faqs-page .faq-category-header {
  background-color: var(--colour-smile-orange);
  padding: 1rem 1.25rem 2.5rem 1.25rem;
  text-align: center;
  border-radius: .75rem;
  box-shadow: 0 2px 6px rgba(22, 29, 38, 0.10);
  position: relative;
  z-index: 1;
}

.html-container .main-app-container .section-faqs-page .faq-category-header h2,
.section-faqs-page .faq-category-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--colour-off-white) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.25rem, 1.6vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none;
  letter-spacing: 0;
}

/* White accordion area */
.section-faqs-page .faqs-list {
  padding: .5rem 1.75rem;
  margin-top: -1.25rem;
  border-radius: .75rem;
  background-color: var(--colour-off-white);
  box-shadow: 0 2px 8px rgba(22, 29, 38, 0.10);
  position: relative;
  z-index: 2;
}

.section-faqs-page .faqs-list .item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem .5rem 1.5rem .5rem;
  border-bottom: 1px solid rgba(22, 29, 38, 0.18);
  cursor: pointer;
  color: var(--colour-squid-ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  transition: opacity .15s ease;
}

.section-faqs-page .faqs-list .item:not(:has(~ .item)),
.section-faqs-page .faqs-list .item-detail:not(:has(~ .item-detail)),
.section-faqs-page .faqs-list .item.open + .item-detail:last-child,
.section-faqs-page .faqs-list > *:last-child {
  border-bottom: none !important;
}

/* When open, drop the item's bottom border so the divider line doesn't
   appear above the answer text — the .item-detail's border-bottom will
   show below the answer instead. */
.section-faqs-page .faqs-list .item.open {
  border-bottom: none;
}

.section-faqs-page .faqs-list .item:hover {
  opacity: .75;
}

/* +/- icon on the right of each item */
.section-faqs-page .faqs-list .item::after {
  content: '';
  position: relative;
  flex-shrink: 0;
  width: .9rem;
  height: .9rem;
  margin-left: 1.5rem;
  background-image:
    linear-gradient(var(--colour-squid-ink), var(--colour-squid-ink)),
    linear-gradient(var(--colour-squid-ink), var(--colour-squid-ink));
  background-size: 100% 1.5px, 1.5px 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .2s ease;
}

.section-faqs-page .faqs-list .item.open::after {
  background-size: 100% 1.5px, 1.5px 0;
}

/* Item detail (answer body) */
.section-faqs-page .faqs-list .item-detail {
  max-height: 0;
  overflow: hidden;
  padding: 0 .5rem;
  color: var(--colour-squid-ink);
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
  transition: max-height .3s ease-out, padding .3s ease-out;
  border-bottom: 1px solid rgba(22, 29, 38, 0.18);
}

.section-faqs-page .faqs-list .item.open + .item-detail {
  max-height: 30rem;
  padding: 0 .5rem 1.5rem .5rem;
}

.html-container .main-app-container .section-faqs-page .faqs-list .item-detail p,
.section-faqs-page .faqs-list .item-detail p {
  margin: 0 0 1rem 0 !important;
  font-family: var(--body) !important;
  font-size: .9rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--colour-squid-ink) !important;
}

.section-faqs-page .faqs-list .item-detail p:last-child {
  margin-bottom: 0 !important;
}

.section-faqs-page .faqs-list .item-detail a {
  color: var(--colour-smile-orange);
  text-decoration: underline;
}

.section-faqs-page .faqs-list .item-detail a:hover {
  color: var(--colour-rose-shade);
}

/* Mobile */
@media (max-width: 767px) {
  .section-faqs-page .main-app-container {
    padding: 3rem 5vw 1.25rem 5vw !important;
  }
  .section-faqs-page .faq-page-frame {
    padding: 0 5vw 3rem 5vw;
  }
  .section-faqs-page .faq-page-header {
    width: clamp(17rem, 80vw, 22rem);
    margin-bottom: 1rem;
  }
  .html-container .main-app-container .section-faqs-page .faq-page-title,
  .section-faqs-page .faq-page-title {
    font-size: 1.15rem !important;
    padding: 0 1rem !important;
  }
  .section-faqs-page .faq-page-subtitle {
    margin-bottom: 1.75rem !important;
  }
  .section-faqs-page .faq-category {
    margin-bottom: 1.25rem;
  }
  .section-faqs-page .faqs-list {
    padding: .25rem 1.25rem;
  }
  .section-faqs-page .faqs-list .item {
    padding: 1.25rem .25rem;
    font-size: .95rem;
  }
  .section-faqs-page .faqs-list .item-detail {
    padding: 0 .25rem;
  }
  .section-faqs-page .faqs-list .item.open + .item-detail {
    padding: 0 .25rem 1.25rem .25rem;
  }
}


/* ====== Opening section: Register button — matches navbar register button
   in size/shape, but defaults to squid ink with bright orange on hover.
   .btn-alt added to selectors to beat the global .btn.btn-alt:hover
   (terracotta) rule with the same specificity. ====== */
.html-container .main-app-container .section-opening .btn.btn-alt,
.html-container .main-app-container .section-opening .register-trigger,
.section-opening .register-trigger {
  background-color: var(--colour-squid-ink) !important;
  color: var(--colour-white) !important;
  font-family: var(--header) !important;
  font-size: var(--size-body) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: .75rem 2.5rem !important;
  border: 0 !important;
  border-radius: .65rem !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}

body .html-container .main-app-container .section-opening a.btn.btn-alt.register-trigger:hover,
body .html-container .main-app-container .section-opening a.btn.btn-alt.register-trigger:focus,
body .html-container .main-app-container .section-opening a.register-trigger:hover,
body .html-container .main-app-container .section-opening a.register-trigger:focus,
.html-container .main-app-container .section-opening a.btn.btn-alt:hover,
.html-container .main-app-container .section-opening a.btn.btn-alt:focus {
  background-color: var(--colour-smile-orange) !important;
  background: var(--colour-smile-orange) !important;
  color: var(--colour-white) !important;
  transform: none !important;
}


/* ====== Speakers page (separate page from Home) ====== */

.section-speakers-header,
.section-speakers-page {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  background-color: var(--colour-off-white);
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/NkGLe52cSloiOIqe2UZA_speakers-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-speakers-header *,
.section-speakers-page * {
  box-sizing: border-box;
}

/* Reset Bizzabo container layers so they don't restrict width or paint
   their own backgrounds. .entity-photo-holder is excluded — it's the
   styled tile and owns its own background + padding. */
.section-speakers-header .html-container,
.section-speakers-header .main-app-container,
.section-speakers-header .atom-sectionMain,
.section-speakers-header .rowHolder,
.section-speakers-header .row,
.section-speakers-header [class*="col-"],
.section-speakers-header .bz-flex-col,
.section-speakers-header .atom-main,
.section-speakers-header .element-groups,
.section-speakers-header .fr-view,
.section-speakers-header [class*="element-"],
.section-speakers-header [class*="CustomElement-"],
.section-speakers-page .html-container,
.section-speakers-page .main-app-container,
.section-speakers-page .atom-sectionMain,
.section-speakers-page .rowHolder,
.section-speakers-page .row,
.section-speakers-page [class*="col-"]:not(.entity-photo-holder),
.section-speakers-page .bz-flex-col,
.section-speakers-page .atom-main,
.section-speakers-page .element-groups,
.section-speakers-page .fr-view,
.section-speakers-page [class*="element-"]:not(.entity-photo-holder),
.section-speakers-page [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-speakers-header .main-app-container {
  padding: 5rem 5vw 2rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-speakers-page .main-app-container {
  padding: 1rem 5vw 6rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wooden plank header — same pattern as .section-faqs-page .faq-page-header */
.section-speakers-header .speakers-page-header {
  position: relative;
  width: clamp(20rem, 38vw, 30rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-speakers-header .speakers-page-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-speakers-header .speakers-page-title,
.section-speakers-header .speakers-page-title {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 2rem !important;
  color: var(--colour-off-white) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  z-index: 1;
  filter: url(#deboss-effect);
}

/* Speaker grid — flattenSpeakersGrid() in footer JS lifts every tile out
   of Bizzabo's nested Bootstrap rows/cols into a fresh .speakers-grid-flat
   container we own. CSS Grid on that container forces 4 cols regardless
   of the Bootstrap col-md-* classes still on the tile elements. */
.section-speakers-page .speakers-grid-flat {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2.25rem !important;
  width: 100% !important;
  max-width: 58rem !important;
  margin: 0 auto !important;
  padding: 3rem !important;
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/xuGvLRIPSjiOKQHF9Wmk_Speaker%20Background_1.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
}

/* Each tile sits at 25% width — 4 cols + 3 gaps fit exactly in 100%
   of the flat container. Overrides the Bootstrap col-md-* widths
   still on each tile root. */
.section-speakers-page .speakers-grid-flat > .entity-photo-holder {
  flex: 0 0 calc(25% - 1.6875rem) !important;
  width: calc(25% - 1.6875rem) !important;
  max-width: calc(25% - 1.6875rem) !important;
  min-width: 0 !important;
}

/* Speaker tile — pattern lifted from .section-stage-day-*. Dark text on
   every tile; colour comes from the nth-child cycle below. */
.section-speakers-page .entity-photo-holder {
  position: relative !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: .5rem !important;
  overflow: hidden !important;
  padding: .4rem !important;
  margin: 0 !important;
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.section-speakers-page .entity-photo-holder:hover {
  transform: translate(-1px, 2px);
  box-shadow:
    -2px 3px 4px rgba(22, 29, 38, 0.24),
    -6px 10px 10px -2px rgba(22, 29, 38, 0.34);
}

.section-speakers-page .entity-photo-holder a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto .3rem auto !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: transparent !important;
  border-radius: .35rem !important;
  overflow: hidden !important;
}

.section-speakers-page .entity-photo-holder .speaker-text {
  background-color: transparent !important;
  padding: .3rem .4rem .5rem .4rem !important;
  text-align: left !important;
  margin: 0 !important;
  min-height: 5.5rem !important;
}

.section-speakers-page .object-trade-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: .35rem !important;
  margin: 0 !important;
  background: transparent !important;
}

.section-speakers-page .entity-photo-holder .attendee-name,
.section-speakers-page .entity-photo-holder .atom-fullname {
  color: var(--colour-squid-ink) !important;
  font-family: var(--body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 120% !important;
  margin: 0 0 .15rem 0 !important;
  background: transparent !important;
}

.section-speakers-page .entity-photo-holder .attendee-title,
.section-speakers-page .entity-photo-holder .attendee-company,
.section-speakers-page .entity-photo-holder .atom-text1,
.section-speakers-page .entity-photo-holder .atom-text2 {
  color: var(--colour-squid-ink) !important;
  font-family: var(--body) !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  line-height: 130% !important;
  margin: 0 !important;
  background: transparent !important;
}

.section-speakers-page .entity-photo-holder .atom-text3,
.section-speakers-page .entity-photo-holder .attendee-speaker {
  color: var(--colour-squid-ink) !important;
  font-family: var(--body) !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  line-height: 130% !important;
  margin: .3rem 0 0 0 !important;
  background: transparent !important;
}

/* Tile colour cycle — Salmon / Amber / Sandstone, hand-mixed across an
   11-step cycle so the pattern doesn't visually stripe across the grid.
   Same speaker always lands on the same colour. */
.section-speakers-page .entity-photo-holder:nth-child(11n+1),
.section-speakers-page .entity-photo-holder:nth-child(11n+4),
.section-speakers-page .entity-photo-holder:nth-child(11n+8) {
  background-color: var(--colour-salmon) !important;
}

.section-speakers-page .entity-photo-holder:nth-child(11n+2),
.section-speakers-page .entity-photo-holder:nth-child(11n+6),
.section-speakers-page .entity-photo-holder:nth-child(11n+7),
.section-speakers-page .entity-photo-holder:nth-child(11n+10) {
  background-color: var(--colour-amber) !important;
}

.section-speakers-page .entity-photo-holder:nth-child(11n+3),
.section-speakers-page .entity-photo-holder:nth-child(11n+5),
.section-speakers-page .entity-photo-holder:nth-child(11n+9),
.section-speakers-page .entity-photo-holder:nth-child(11n) {
  background-color: var(--colour-sandstone) !important;
}

/* Mobile — drop the Grid to 2 columns. */
@media (max-width: 767px) {
  .section-speakers-header .main-app-container {
    padding: 3rem 5vw 1.25rem 5vw !important;
  }
  .section-speakers-page .main-app-container {
    padding: .75rem 5vw 4rem 5vw !important;
  }
  .section-speakers-header .speakers-page-header {
    width: clamp(17rem, 80vw, 22rem);
  }
  .section-speakers-page .speakers-grid-flat {
    gap: 1.25rem !important;
    max-width: 27rem !important;
    padding: 1.5rem !important;
  }
  .section-speakers-page .speakers-grid-flat > .entity-photo-holder {
    flex: 0 0 calc(50% - .625rem) !important;
    width: calc(50% - .625rem) !important;
    max-width: calc(50% - .625rem) !important;
  }
}


/* ====== Agenda page (separate page from Home) ====== */

/* Agenda page sections - same full-bleed + textured-bg pattern as the
   Speakers page. The bg image sits on .section-agenda-page (the widget
   host) only, not on .section-agenda-header (which keeps the orange page
   bg behind the wooden plank). */
.section-agenda-header,
.section-agenda-page {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}

.section-agenda-header,
.section-agenda-page {
  background-color: transparent;
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/n9cbZRO7TqKmYSEAoWhh_agenda-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-agenda-header *,
.section-agenda-page * {
  box-sizing: border-box;
}

/* Reset Bizzabo container layers (transparent + full width) inside the
   plank-header section AND the embed-host section.
   Note: [class*="col-"] is intentionally NOT in this list. The Bizzabo
   outer wrapper col-xs-12 is already 100% by Bootstrap default, and
   matching col-* here would clobber the agenda widgets internal grid
   (col-md-1 pill + col-md-11 session content), stacking them vertically. */
.section-agenda-header .html-container,
.section-agenda-header .main-app-container,
.section-agenda-header .atom-sectionMain,
.section-agenda-header .rowHolder,
.section-agenda-header .row,
.section-agenda-header .bz-flex-col,
.section-agenda-header .atom-main,
.section-agenda-header .element-groups,
.section-agenda-header .fr-view,
.section-agenda-header [class*="element-"],
.section-agenda-header [class*="CustomElement-"],
.section-agenda-page .html-container,
.section-agenda-page .main-app-container,
.section-agenda-page .atom-sectionMain,
.section-agenda-page .rowHolder,
.section-agenda-page .row,
.section-agenda-page .bz-flex-col,
.section-agenda-page .atom-main,
.section-agenda-page .element-groups,
.section-agenda-page .fr-view,
.section-agenda-page [class*="element-"],
.section-agenda-page [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-agenda-header .main-app-container {
  padding: 5rem 5vw 2rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-agenda-page .main-app-container {
  padding: 1rem 5vw 6rem 5vw !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

/* Card wrapper - flat off-white (no texture), 72rem wide so the embedded
   agenda widget has room to render its native side-by-side layout.
   Top padding is trimmed so the widgets search header sits closer to
   the card top. */
.section-agenda-page .subpage-section.agenda-section {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  background-color: var(--colour-off-white);
  border-radius: 1rem;
  overflow: hidden;
  padding: 0.75rem 2rem 2rem 2rem;
}

/* Force the .agenda-view itself and the session-list-view variant to
   transparent. DevTools showed Bizzabos own widget CSS attempting to
   set transparent but a later rule was overriding it - a more specific
   selector here puts the override beyond reach. */
.subpage-section.agenda-section .agenda-view,
.subpage-section.agenda-section .agenda-view.session-list-view,
.subpage-section.agenda-section .agenda-view.session-list-view.row,
.subpage-section.agenda-section .agenda-view.top-agenda-margin-single,
.subpage-section.agenda-section .agenda-view.agenda-custom-css {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-agenda-page .subpage-section.agenda-section .html-container {
  background: transparent;
  border: none;
  padding: 0;
}

/* Wooden plank header — same pattern as Speakers / FAQs page headers. */
.section-agenda-header .agenda-page-header {
  position: relative;
  width: clamp(20rem, 38vw, 30rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-agenda-header .agenda-page-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-agenda-header .agenda-page-title,
.section-agenda-header .agenda-page-title {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 2rem !important;
  color: var(--colour-off-white) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  z-index: 1;
  filter: url(#deboss-effect);
}

/* Subtitle under the wooden plank header - same styling as the FAQ
   pages subtitle. */
.html-container .main-app-container .section-agenda-header .agenda-page-subtitle,
.section-agenda-header .agenda-page-subtitle {
  margin: 1rem 0 0 0 !important;
  color: var(--colour-squid-ink) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.15rem, 1.4vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center;
}

/* Day header inside the embedded Web Agenda widget (e.g. "Mon, 16-June"). */
.subpage-section.agenda-section .day-title {
  display: block;
  margin: 0.5rem 0 0.5rem;
  font-family: var(--header) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--colour-squid-ink) !important;
  text-transform: none !important;
}

/* Bizzabo renders the day header as three inner spans -- e.g.
     <span class="day-title">
       <span class="event-day-part$ week">Mon</span>
       <span class="event-day-part$">Jun</span>
       <span class="event-day-part$">22</span>
     </span>
   Inside the agenda iframe, Bizzabos own widget CSS loads AFTER the events
   Custom CSS, so a plain `.day-title *` rule loses on cascade order despite
   the !important. Targeting the class prefix directly bumps specificity to
   beat single-class Bizzabo overrides on every weekday + month + day span. */
.subpage-section.agenda-section .day-title [class*="event-day-part"] {
  font-weight: 700 !important;
}

/* Time pill on the left of each session row.
   Bizzabo emits an inline style background-color: var(--page-main-color,
   #161d26) on the inner pill div. Re-defining --page-main-color on the
   agenda section makes that inline var() resolve to Smile-Orange. No JS
   needed - the cascade does the work. */
.subpage-section.agenda-section {
  --page-main-color: #FF6200;
}

/* Bizzabos natural pill sizing and position are correct - only override
   the text so it reads white, bold, and uses EmberModernText.
   Scope to the inline-styled pill div only - using .time-elem * would
   leak the bold weight into the session description and speaker text. */
.time-elem > div[style*="page-main-color"],
.time-elem > div[style*="page-main-color"] * {
  color: #FFFFFF !important;
  font-family: 'EmberModernText', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Bizzabo defaults to 30px margin-top on every .time-elem, which leaves
   a big gap between the day title and the first session (and between
   consecutive sessions). Tighten it. */
.time-elem {
  margin-top: 0.5rem !important;
}

/* Session card sits directly on the textured wrapper. Remove its own
   background and shadow so the cream texture shows through, but keep
   Bizzabos border so the card edge is still defined. Tighter radius
   to match the comp (Bizzabos default is too rounded). */
.session-container,
.session-elem-cell,
.session-elem-cell-md-11,
.session-list-container-row {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0.5rem !important;
}

/* Offsite-session highlight. Footer JS adds .session-offsite to any
   session whose .session-location text does NOT include the exact
   phrase "Amazon Port - Plaza Stage". Tint the card in sandstone-tint
   (#FFE3A6) - a soft warm yellow that complements the orange/amber/
   salmon brand palette. Higher specificity than the transparent rule
   above so this wins the cascade. */
.session-container.session-offsite {
  background-color: var(--colour-sandstone-tint) !important;
}

/* Session description body copy and location text use EmberModernText.
   Avoid the universal-descendant selector on .session-location so it
   does not clobber the FontAwesome icon glyph (the pin). For the
   description, target the inner span too since Bizzabo wraps the
   description text in p > span and the span had a higher-specificity
   rule winning over the parent p. */
.session-description,
.session-description *,
.session-description-inner,
.session-description-inner *,
.session-description-inner p,
.session-description-inner p span,
.preview-session-description,
.preview-session-description *,
.session-summary,
.session-body,
.session-info-description,
.session-container p,
.session-container .description,
.session-location {
  font-family: 'EmberModernText', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

/* Bizzabo collapses the description into a faded preview when speakers
   are present. Force the full description to be visible at all times,
   no max-height clipping or fade gradient. */
.agenda-view .session-description,
.agenda-view .session-description-inner,
.agenda-view .preview-session-description {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-line-clamp: unset !important;
}

/* Speaker tiles inside each agenda session row. Bizzabo emits each tile
   as <a class="speaker-slide agenda-flex"> inside .speakers-carousel.
   Apply a 3-step Salmon -> Amber -> Sandstone colour cycle, round the
   photo to a soft square, and force the text to white EmberModernText.
   max-width constrains the tile so the coloured bg only spans the tile
   itself, not the full row. */
.agenda-view .speaker-slide {
  background-color: var(--colour-salmon) !important;
  border-radius: 0.4rem !important;
  padding: 0.4rem 0.6rem !important;
  margin: 0.25rem !important;
  text-decoration: none !important;
  max-width: 14rem !important;
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.agenda-view .speaker-slide:nth-child(3n+2) {
  background-color: var(--colour-amber) !important;
}

.agenda-view .speaker-slide:nth-child(3n+3) {
  background-color: var(--colour-sandstone) !important;
}

.agenda-view .speaker-slide,
.agenda-view .speaker-slide * {
  color: var(--colour-squid-ink) !important;
  font-family: 'EmberModernText', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

/* Speaker name stays bold and a little larger for visual hierarchy. */
.agenda-view .speaker-slide [class*="name"],
.agenda-view .speaker-slide [class*="fullname"],
.agenda-view .speaker-slide [class*="speaker-title-bar"] {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

/* Speaker photo - thin rounded corners; the area behind the speakers
   cutout is filled with the SHADE variant of the tile colour so the
   photo sits on a single dark patch (no outer frame). Per-nth-child
   rules below set the shade colour per tile. */
.agenda-view .speaker-slide img,
.agenda-view .speaker-slide object,
.agenda-view .speaker-slide .object-trade-thumbnail,
.agenda-view .speaker-slide [class*="speaker-photo"],
.agenda-view .speaker-slide [class*="speaker-image"],
.agenda-view .speaker-slide [class*="entity-photo"] {
  width: 3.5rem !important;
  height: 3.5rem !important;
  min-width: 3.5rem !important;
  min-height: 3.5rem !important;
  border-radius: 0.15rem !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Salmon tile - photo background is salmon-shade */
.agenda-view .speaker-slide:nth-child(3n+1) img,
.agenda-view .speaker-slide:nth-child(3n+1) object,
.agenda-view .speaker-slide:nth-child(3n+1) .object-trade-thumbnail,
.agenda-view .speaker-slide:nth-child(3n+1) [class*="speaker-photo"],
.agenda-view .speaker-slide:nth-child(3n+1) [class*="speaker-image"],
.agenda-view .speaker-slide:nth-child(3n+1) [class*="entity-photo"] {
  background-color: var(--colour-salmon-shade) !important;
}

/* Amber tile - photo background is amber-shade */
.agenda-view .speaker-slide:nth-child(3n+2) img,
.agenda-view .speaker-slide:nth-child(3n+2) object,
.agenda-view .speaker-slide:nth-child(3n+2) .object-trade-thumbnail,
.agenda-view .speaker-slide:nth-child(3n+2) [class*="speaker-photo"],
.agenda-view .speaker-slide:nth-child(3n+2) [class*="speaker-image"],
.agenda-view .speaker-slide:nth-child(3n+2) [class*="entity-photo"] {
  background-color: var(--colour-amber-shade) !important;
}

/* Sandstone tile - photo background is sandstone-shade */
.agenda-view .speaker-slide:nth-child(3n+3) img,
.agenda-view .speaker-slide:nth-child(3n+3) object,
.agenda-view .speaker-slide:nth-child(3n+3) .object-trade-thumbnail,
.agenda-view .speaker-slide:nth-child(3n+3) [class*="speaker-photo"],
.agenda-view .speaker-slide:nth-child(3n+3) [class*="speaker-image"],
.agenda-view .speaker-slide:nth-child(3n+3) [class*="entity-photo"] {
  background-color: var(--colour-sandstone-shade) !important;
}

/* Blend the widget container layers into the off-white textured wrapper.
   We could not get full transparency to win the cascade in places, so
   instead set the same base off-white colour - the slight texture mismatch
   is acceptable and the cards visually sit on the wrapper. */
.agenda-view,
.agenda-view .session-list-container,
.agenda-view .session-list,
.agenda-view .session-day-container,
.agenda-view .day-title-row,
.agenda-view .time-row,
.agenda-view > .col-lg-12,
.agenda-view > .col-xs-12 {
  background-color: var(--colour-off-white) !important;
}

/* Tighten the space above the first session row. Bizzabo adds top
   padding to its session list and day containers; trim those down. */
.agenda-view .session-list-container,
.agenda-view .session-list,
.agenda-view .session-day-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.agenda-view .session-day-container:first-child .day-title-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Trim the bottom spacing on Bizzabos search bar / filter / tabs row
   so the first session sits closer to the agenda header bar. */
.agenda-view .agenda-header,
.agenda-view .agenda-toolbar,
.agenda-view .agenda-search,
.agenda-view .agenda-search-bar,
.agenda-view .search-bar,
.agenda-view .agenda-filters,
.agenda-view .agenda-tabs,
.agenda-view .session-tabs,
.agenda-view .agenda-tabs-row,
.agenda-view [class*="agenda-search"],
.agenda-view [class*="agenda-filter"],
.agenda-view [class*="agenda-tabs"],
.agenda-view [class*="session-tabs"] {
  margin-bottom: 0.25rem !important;
  padding-bottom: 0 !important;
}

/* If the gap is not padding or margin then it must be a min-height or
   height on the day-title-row container (Bizzabos default leaves a
   tall row holding short text). Crush it to auto height. */
.agenda-view .day-title-row,
.agenda-view .session-day-container,
.agenda-view .day-title-row > *:not(.day-title) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bizzabos widget JS sets an inline margin-top of ~255px on the inner
   .agenda-view.list-row to clear an absolutely-positioned header above.
   Highest specificity in case Bizzabos own widget CSS uses a similar
   class chain with !important inside the iframe context. */
html body .agenda-view.session-list-view.agenda-custom-css.list-row,
html body div.agenda-view.list-row,
.agenda-view.session-list-view.agenda-custom-css.list-row {
  margin-top: 150px !important;
}

/* Mobile */
@media (max-width: 767px) {
  .section-agenda-header .main-app-container {
    padding: 3rem 5vw 1.25rem 5vw !important;
  }
  .section-agenda-page .main-app-container {
    padding: .75rem 5vw 4rem 5vw !important;
  }
  .section-agenda-header .agenda-page-header {
    width: clamp(17rem, 80vw, 22rem);
  }
}


/* ====== Highlighted Sessions section ====== */
/* Hide the old per-day stage sections - replaced by the consolidated
   Highlighted Sessions section below. */
.section-stage-day-1,
.section-stage-day-2,
.section-stage-day-3 {
  display: none !important;
}

/* Break .section-stage out to full viewport width so the bg fills the page
   and the inner grid has room for 3 cards side by side. Same trick used on
   the day sections above. Bg image is applied here via background-image
   (not as an <img> in the HTML widget) so it always tracks section width. */
.section-stage {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background-color: var(--colour-off-white) !important;
  background-image: url('https://s3.amazonaws.com/bizzabo.users.files/KONFxJPTT8ejbfzrxvNi_stage-section-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
}

.section-stage * {
  box-sizing: border-box;
}

.section-stage .html-container,
.section-stage .main-app-container,
.section-stage .atom-sectionMain,
.section-stage .rowHolder,
.section-stage .row,
.section-stage [class*="col-"],
.section-stage .bz-flex-col,
.section-stage .atom-main,
.section-stage .element-groups,
.section-stage .fr-view,
.section-stage [class*="element-"],
.section-stage [class*="CustomElement-"] {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.section-stage .main-app-container {
  position: relative;
  padding: 5rem 5vw 6rem 5vw !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-stage .highlighted-sessions-frame {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-stage .highlighted-sessions-header {
  position: relative;
  width: clamp(20rem, 38vw, 30rem);
  margin: 0 auto 1.25rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.section-stage .highlighted-sessions-header-bg {
  display: block;
  width: 100%;
  height: auto;
}

.html-container .main-app-container .section-stage .highlighted-sessions-title,
.section-stage .highlighted-sessions-title {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  color: var(--colour-off-white) !important;
  font-family: var(--header) !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
  filter: url(#deboss-effect);
}

/* View the full schedule button -- squid ink default, smile-orange (bright)
   on hover. Selectors stacked with body + element types to beat the global
   .btn.btn-alt:hover (terracotta) rule. Same pattern as the opening
   register button. */
body .html-container .main-app-container .section-stage a.btn.btn-alt.highlighted-sessions-view-schedule,
body .html-container .main-app-container .section-stage a.highlighted-sessions-view-schedule,
.section-stage .highlighted-sessions-view-schedule {
  margin: 0 auto 4.5rem auto;
  position: relative;
  z-index: 1;
  background-color: var(--colour-squid-ink) !important;
  background: var(--colour-squid-ink) !important;
  color: var(--colour-white) !important;
  border-radius: .65rem !important;
  transition: background-color .15s ease;
}

body .html-container .main-app-container .section-stage a.btn.btn-alt.highlighted-sessions-view-schedule:hover,
body .html-container .main-app-container .section-stage a.btn.btn-alt.highlighted-sessions-view-schedule:focus,
body .html-container .main-app-container .section-stage a.highlighted-sessions-view-schedule:hover,
body .html-container .main-app-container .section-stage a.highlighted-sessions-view-schedule:focus {
  background-color: var(--colour-smile-orange) !important;
  background: var(--colour-smile-orange) !important;
  color: var(--colour-white) !important;
  transform: none !important;
}

/* Cards lay out as a flex row so all 3 stay on one line, mirroring the
   pattern used by .section-experience .experience-cards which is known
   to work inside Bizzabo's wrapper structure. */
.section-stage .highlighted-sessions-cards {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  justify-content: center;
  gap: 1.5rem;
  width: 100% !important;
  max-width: 72rem !important;
  margin: 0 auto !important;
}

@media (max-width: 991px) {
  .section-stage .highlighted-sessions-cards {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    max-width: 28rem !important;
  }
}

@media (max-width: 767px) {
  .section-stage .main-app-container {
    padding: 3rem 5vw 4rem 5vw !important;
  }
  .section-stage .highlighted-sessions-header {
    width: clamp(17rem, 80vw, 22rem);
    margin-bottom: 1rem;
  }
  .section-stage .highlighted-sessions-view-schedule {
    margin-bottom: 1.75rem;
  }
}


/* ====== Section-stage card internals (mirror the day-section card styles) ====== */
/* Card outer -- flex item that takes 1/3 of the row. Wood-textured, fixed-ish
   height. flex: 1 1 0 with min-width 0 ensures equal widths and prevents
   content from forcing overflow / wrap. */
.section-stage .highlighted-sessions-cards .stage-card {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 28rem !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow:
    -2px 4px 6px rgba(22, 29, 38, .18),
    -4px 8px 10px -2px rgba(22, 29, 38, .22);
  z-index: 2;
}

/* Card bg image fills the card. */
.section-stage .stage-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Card content sits above the bg, with padding and reserved space for
   the absolute-positioned CTA at the bottom. */
.section-stage .stage-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.6rem 1.6rem 5.5rem 1.6rem;
  text-align: left;
}

.html-container .main-app-container .section-stage .stage-card-eyebrow,
.section-stage .stage-card-eyebrow {
  font-family: var(--header) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 .15rem 0 !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

.html-container .main-app-container .section-stage .stage-card-title,
.section-stage .stage-card-title {
  font-family: var(--header) !important;
  font-size: 1.55rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 1.1rem 0 !important;
  line-height: 1.05 !important;
  text-align: left !important;
  min-height: 4.9rem !important;
}

.section-stage .stage-card-tag {
  font-family: var(--body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 .85rem 0 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.section-stage .stage-card-body {
  font-family: var(--body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--colour-off-white) !important;
  margin: 0 0 2rem 0 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 0 8px rgba(0, 0, 0, .35) !important;
}

.section-stage .stage-card-time {
  position: relative;
  margin-top: auto;
  padding: 1rem 1rem;
  border: none;
  border-radius: .35rem;
  text-align: center;
  background: transparent;
  overflow: hidden;
  box-shadow:
    inset -3px 3px 7px rgba(0, 0, 0, .75),
    inset 2px -2px 4px rgba(255, 255, 255, .25),
    inset 0 0 18px rgba(0, 0, 0, .35);
}

.section-stage .stage-card-time-bg {
  display: none;
}

.section-stage .stage-card-time p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--colour-off-white);
  line-height: 1.35;
  text-align: center;
}

.html-container .main-app-container .section-stage .stage-card-cta,
.section-stage .stage-card-cta {
  position: absolute !important;
  left: 1.25rem !important;
  right: 1.25rem !important;
  bottom: 1.25rem !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.section-stage .stage-card-cta-text {
  font-family: var(--header);
  font-size: .9rem;
  font-weight: 500;
  color: var(--colour-off-white);
}

.section-stage .stage-card-cta-arrow {
  width: 2.2rem;
  height: 2.2rem;
  display: block;
  border-radius: 50%;
}

/* Mobile overrides for ALL wood-stage card internals — covers both
   the small "Highlighted Sessions" preview (.section-stage) and the
   big per-day full-width sections (.section-stage-day-1/2/3).
   Placed AFTER both desktop rule blocks so the cascade wins.

   Note: do NOT zero out the card's min-height — the inner content uses
   height:100%, so removing the min-height collapses the card to 0.
   Instead let the content's intrinsic height drive the card height by
   switching content to height:auto with min-height:100% as a floor. */
@media (max-width: 767px) {
  .section-stage .stage-card-content,
  .section-stage-day-1 .stage-card-content,
  .section-stage-day-2 .stage-card-content,
  .section-stage-day-3 .stage-card-content {
    height: auto !important;
    min-height: 100%;
    padding: 1.25rem 1.25rem 4.25rem 1.25rem;
  }
  .html-container .main-app-container .section-stage .stage-card-eyebrow,
  .html-container .main-app-container .section-stage-day-1 .stage-card-eyebrow,
  .html-container .main-app-container .section-stage-day-2 .stage-card-eyebrow,
  .html-container .main-app-container .section-stage-day-3 .stage-card-eyebrow,
  .section-stage .stage-card-eyebrow,
  .section-stage-day-1 .stage-card-eyebrow,
  .section-stage-day-2 .stage-card-eyebrow,
  .section-stage-day-3 .stage-card-eyebrow {
    font-size: 1.05rem !important;
  }
  .html-container .main-app-container .section-stage .stage-card-title,
  .html-container .main-app-container .section-stage-day-1 .stage-card-title,
  .html-container .main-app-container .section-stage-day-2 .stage-card-title,
  .html-container .main-app-container .section-stage-day-3 .stage-card-title,
  .section-stage .stage-card-title,
  .section-stage-day-1 .stage-card-title,
  .section-stage-day-2 .stage-card-title,
  .section-stage-day-3 .stage-card-title {
    font-size: 1.05rem !important;
    min-height: 0 !important;
    margin-bottom: .8rem !important;
  }
  .section-stage .stage-card-tag,
  .section-stage-day-1 .stage-card-tag,
  .section-stage-day-2 .stage-card-tag,
  .section-stage-day-3 .stage-card-tag {
    font-size: .8rem !important;
    margin-bottom: .65rem !important;
  }
  .section-stage .stage-card-body,
  .section-stage-day-1 .stage-card-body,
  .section-stage-day-2 .stage-card-body,
  .section-stage-day-3 .stage-card-body {
    font-size: .9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }
  .section-stage .stage-card-time,
  .section-stage-day-1 .stage-card-time,
  .section-stage-day-2 .stage-card-time,
  .section-stage-day-3 .stage-card-time {
    padding: .75rem .75rem;
  }
  .section-stage .stage-card-time p,
  .section-stage-day-1 .stage-card-time p,
  .section-stage-day-2 .stage-card-time p,
  .section-stage-day-3 .stage-card-time p {
    font-size: .7rem;
  }
  .html-container .main-app-container .section-stage .stage-card-cta,
  .html-container .main-app-container .section-stage-day-1 .stage-card-cta,
  .html-container .main-app-container .section-stage-day-2 .stage-card-cta,
  .html-container .main-app-container .section-stage-day-3 .stage-card-cta,
  .section-stage .stage-card-cta,
  .section-stage-day-1 .stage-card-cta,
  .section-stage-day-2 .stage-card-cta,
  .section-stage-day-3 .stage-card-cta {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
  }
  .section-stage .stage-card-cta-text,
  .section-stage-day-1 .stage-card-cta-text,
  .section-stage-day-2 .stage-card-cta-text,
  .section-stage-day-3 .stage-card-cta-text {
    font-size: .8rem;
  }
  .section-stage .stage-card-cta-arrow,
  .section-stage-day-1 .stage-card-cta-arrow,
  .section-stage-day-2 .stage-card-cta-arrow,
  .section-stage-day-3 .stage-card-cta-arrow {
    width: 1.75rem;
    height: 1.75rem;
  }
}