/* Unique webinar composition; shared foundations and components own their styles. */
.webinar__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--64);
}

.webinar__title {
  margin: 0;
  font-size: 4.822763rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.135rem;
  text-transform: none;
}

.webinar__copy {
  font-size: var(--type-body-size);
  line-height: var(--type-compact-leading);
}

.webinar__avatar {
  width: var(--32);
  height: var(--32);
  border-radius: 50%;
  flex: none;
}

.webinar__intro {
  text-transform: none;
  font-size: var(--type-impact-size);
  font-weight: 500;
  line-height: 1.2;
}

.webinar__heading {
  text-transform: none;
  margin: 0;
  font-size: var(--type-impact-size);
  font-weight: 500;
  line-height: 1.2;
}

.webinar__heading-wrap {
  margin-bottom: var(--space-heading-content);
}

.webinar__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  margin-top: var(--space-heading-content-wide);
  margin-bottom: var(--space-section-major);
}

.webinar__details {
  flex: 0 0 22rem;
  min-width: 0;
}

.webinar__details-card {
  position: sticky;
  top: var(--120);
  background: var(--white);
  color: var(--blue-dark);
  padding: var(--space-card-inline);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--24);
  font-size: var(--type-body-size);
  line-height: var(--type-compact-leading);
}

.webinar__details-title {
  text-transform: none;
  margin: 0;
  font-size: var(--type-card-title-size);
  font-weight: 500;
  line-height: 1.2;
}

.webinar__detail-block {
  display: flex;
  flex-direction: column;
  gap: var(--8);
}

.webinar__format {
  display: flex;
  align-items: center;
  gap: var(--8);
}

.webinar__format .webinar__avatar {
  margin-left: auto;
}

.webinar__speaker-inner {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--32);
}

.webinar__portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.webinar__speaker-name {
  margin-block: var(--12) var(--16);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

@media screen and (max-width: 991px) {
  .webinar__layout {
    display: flex;
    flex-direction: column;
  }

  .webinar__details {
    order: -1;
    flex: auto;
    width: 100%;
  }

  .webinar__details-card {
    position: static;
  }
}

@media screen and (max-width: 767px) {
  .webinar__title {
    /* 38 CSS px at the annotated 369px viewport (18.45px root). */
    font-size: 2.059621rem;
    letter-spacing: -.0375rem;
  }

  .webinar__meta {
    flex-direction: column;
    gap: var(--16);
  }

  .webinar__speaker-inner {
    grid-template-columns: 1fr;
    gap: var(--24);
  }
}

.webinar__lead {
  opacity: .6;
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: 1.6;
}

.webinar__lead-wrap {
  max-width: 24rem;
  margin-bottom: var(--64);
}

.webinar__audience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--24);
}

@media screen and (min-width: 992px) {
  .webinar__lead-wrap {
    margin-bottom: var(--40);
  }
}

@media screen and (max-width: 767px) {
  .webinar__lead-wrap {
    max-width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .webinar__audience {
    grid-template-columns: 1fr;
    gap: var(--24);
  }
}

.webinar__title-ending {
  display: inline-block;
}

/* Unique desktop type converts annotated CSS px to the site's fluid rem scale:
   80px at 1508px (root 16.588px); 32/16px at 1718px (root 18.898px). */
.webinar__speaker-role {
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: var(--12);
  font-size: .875rem;
}

@media screen and (min-width: 992px) {
  .webinar__heading-wrap {
    margin-bottom: var(--56);
  }

  .webinar__image {
    margin-bottom: var(--180);
  }

  .webinar__speaker-name {
    font-size: 1.693301rem;
  }

  .webinar__speaker-role {
    font-size: .84665rem;
  }

  .webinar__biography {
    max-width: 34rem;
  }

  .webinar__portrait {
    border-radius: .635199rem;
  }
}

/* Details values keep their weight/leading; only size matches the uppercase labels. */
.webinar__detail-value {
  font-size: .875rem;
}

@media screen and (min-width: 992px) {
  .webinar__audience-title {
    max-width: 20rem;
  }

  .webinar__audience-ending {
    display: block;
  }

  .columns.mod--workshop-text.webinar__audience-intro {
    padding-bottom: var(--40);
    margin-bottom: var(--48);
  }

  .webinar__audience + .webinar__image {
    margin-top: var(--80);
  }

  .webinar__speaker-inner {
    gap: var(--40);
  }
}

.webinar__included {
  align-items: flex-start;
}

@media screen and (min-width: 992px) {
  .columns.webinar__intro-copy {
    padding-top: var(--48);
  }

  .webinar__agenda {
    margin-bottom: calc(var(--180) - var(--40));
  }

  .section.webinar__content {
    padding-bottom: 0;
  }

}

.webinar__check {
  font-size: inherit;
  margin-block-start: calc((1lh - 1rem) / 2);
}

.webinar__closing {
  margin-top: calc(var(--space-section-major) - var(--webinar-cta-leading, 0rem));
}

.webinar__sticky {
  display: none;
}

@media screen and (max-width: 991px) {
  .webinar__sticky:not([hidden]) {
    display: block;
    position: fixed;
    z-index: 10;
    inset: auto 0 0;
    padding-block: .375rem calc(.375rem + env(safe-area-inset-bottom, 0rem));
    padding-inline: max(var(--space-page-inline), env(safe-area-inset-left, 0rem))
      max(var(--space-page-inline), env(safe-area-inset-right, 0rem));
    background: var(--blue-dark);
    border-top: 1px solid var(--white-30);
  }

  .webinar__sticky-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--16);
  }

  .webinar__sticky-date {
    color: var(--white);
    font-size: var(--type-body-size);
    line-height: 1.4;
  }

  /* Reserve the primary button, panel padding and border for anchor/focus scrolling. */
  html:has(.webinar__sticky:not([hidden])) {
    scroll-padding-bottom: calc(3.25rem + 1px + env(safe-area-inset-bottom, 0rem));
  }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .webinar__sticky:not([hidden]) {
    animation: webinar-sticky-in .28s cubic-bezier(.215, .61, .355, 1);
  }
}

@keyframes webinar-sticky-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 767px) {
  .webinar__sticky-date {
    display: none;
  }

  .webinar__sticky-action {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .webinar__closing .new-discuss__bg-grad {
    background-image: linear-gradient(180deg, var(--blue-dark), var(--gradient-navy) 35%, var(--gradient-blue) 50%, #f8f9fd 75%);
  }

  .section.mod--hero-centred.webinar__hero {
    padding-bottom: 0;
  }

  .section.webinar__content {
    padding-block: var(--space-section-major) 0;
  }

  .webinar__layout {
    gap: var(--space-section-major);
  }

  .webinar__agenda {
    margin-bottom: var(--space-section-major);
  }

  .webinar__agenda > :last-child {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .webinar__lead-wrap {
    max-width: 21rem;
  }

  /* 64 CSS px at the annotated 782px viewport (16.53px root). */
  .webinar__title {
    font-size: 3.871748rem;
  }

  .webinar__lead-wrap,
  .webinar__heading-wrap {
    margin-bottom: var(--32);
  }

  /* 112 CSS px at the annotated 799px viewport (16.785px root). */
  .webinar__closing {
    margin-top: calc(6.672624rem - var(--webinar-cta-leading, 0rem));
  }

  .webinar__details-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .webinar__details-title,
  .webinar__detail-block:last-of-type,
  .webinar__details-card > .button {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 767px) {
  .webinar__host,
  .webinar__meta-divider {
    display: none;
  }

  .webinar__lead-wrap {
    margin-bottom: var(--24);
  }

  .webinar__heading-wrap {
    margin-bottom: var(--16);
  }

  /* 14 CSS px at the annotated 369px viewport (18.45px root). */
  .webinar__details-card {
    --type-small-size: .758808rem;
    /* 12 CSS px at the annotated 395px viewport (19.75px root). */
    --webinar-details-gap: .607595rem;
    gap: var(--webinar-details-gap);
  }

  .webinar__details-card > .button {
    margin-top: calc(var(--24) - var(--webinar-details-gap));
  }

  .webinar__details-card .workshop-banner__list {
    row-gap: calc(.25rem + 2px);
  }

  .webinar__details-title,
  .webinar__speaker-name {
    /* 24 CSS px at the annotated 395px viewport. */
    font-size: 1.21519rem;
  }

  .webinar__speaker-role {
    font-size: .607595rem;
  }

  .webinar__details-card .workshop-banner__block-name,
  .webinar__detail-value,
  .webinar__audience .webinar__copy,
  .webinar__audience .workshop-grid__text {
    font-size: .758808rem;
  }

  .section.webinar__content {
    padding-top: 56px;
  }

  .webinar__detail-block:nth-child(3) {
    margin-top: 8px;
  }

  .columns.mod--workshop-text.webinar__intro-copy,
  .columns.mod--workshop-text.webinar__audience-intro {
    row-gap: calc(var(--24) - 8px);
  }

  .webinar__intro-copy .webinar__copy,
  .webinar__audience-intro .webinar__copy,
  .webinar__audience .workshop-grid__text,
  .webinar__agenda .workshop-list__item > .opacity-60,
  .webinar__biography {
    line-height: 1.6;
  }

  .webinar__agenda > .workshop-list__item {
    padding-top: var(--16);
    padding-bottom: var(--16);
  }

  .webinar__agenda > .workshop-list__item:last-child {
    padding-bottom: 0;
  }
}

.agent-setup {
  container-type: inline-size;
  margin-inline: 0;
  overflow: hidden;
  background: linear-gradient(#2064c7, #82a7db 55%, #f4f4f6);
  color: #05051f;
}

.agent-setup__scene {
  position: relative;
  aspect-ratio: 1920 / 1055;
  font-family: Suisse, Arial, sans-serif;
  line-height: 1;
}

.agent-setup__card {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 2.5cqw;
  background: linear-gradient(135deg, #fcfdfd, #f0f4fc 63%, #dee6f6);
  box-shadow: 0 1.4cqw 3.6cqw rgba(17, 37, 75, .17);
}

.agent-setup__card.is--configuration {
  inset: 11.85% 4.35% auto 38%;
  padding: 2.6cqw 2.6cqw 2.55cqw 3.8cqw;
}

.agent-setup__card.is--routine {
  inset: 24.55% 61% auto 4.35%;
  padding: 2.6cqw 2.55cqw 2.75cqw;
  background: linear-gradient(135deg, #edf2fa, #fff 38%, #e8eef9);
}

.agent-setup__header,
.agent-setup__copy,
.agent-setup__option,
.agent-setup__steps li,
.agent-setup__locked {
  display: flex;
  align-items: center;
}

.agent-setup__header {
  justify-content: space-between;
  gap: 1cqw;
  font-size: 3.3cqw;
  font-weight: 700;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.agent-setup__copy {
  flex: none;
  gap: .8cqw;
  padding: 1.08cqw 1.65cqw;
  border-radius: 4cqw;
  background: #05051f;
  color: #fff;
  font-size: 1.68cqw;
  font-weight: 500;
  letter-spacing: -.02em;
}

.agent-setup svg {
  display: block;
  width: 100%;
  height: 100%;
}

.agent-setup__copy svg {
  width: 2cqw;
  height: 2cqw;
}

.agent-setup__options,
.agent-setup__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-setup__option,
.agent-setup__steps li {
  margin: 0;
}

.agent-setup__options {
  overflow: hidden;
  margin-top: 2.5cqw;
  border: 1px solid rgba(5, 5, 31, .13);
  border-radius: 1.7cqw;
  background: rgba(255, 255, 255, .24);
}

.agent-setup__option {
  min-height: 8.82cqw;
  gap: 1.65cqw;
  padding-inline: 1.7cqw 2.4cqw;
}

.agent-setup__option + .agent-setup__option {
  border-top: 1px solid rgba(5, 5, 31, .13);
}

.agent-setup__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 5cqw;
  height: 5cqw;
  border-radius: 1.2cqw;
  background: #dce5f6;
  color: #1a3d77;
}

.agent-setup__icon svg {
  width: 52%;
  height: 52%;
}

.agent-setup__option-label,
.agent-setup__routine-title {
  font-family: Instrument Serif, Georgia, serif;
  font-style: italic;
}

.agent-setup__option-label {
  flex: 1;
  min-width: 0;
  font-size: 2.55cqw;
}

.agent-setup__bar {
  display: block;
  height: .95cqw;
  border-radius: .2cqw;
  background: rgba(5, 5, 31, .11);
}

.agent-setup__option-label .agent-setup__bar {
  width: 19.2cqw;
  margin-top: 1.1cqw;
}

.agent-setup__option:nth-child(2) .agent-setup__bar {
  width: 23.55cqw;
}

.agent-setup__option:nth-child(3) .agent-setup__bar {
  width: 15.4cqw;
}

.agent-setup__check {
  flex: none;
  width: 2.65cqw;
  height: 2.65cqw;
  color: #08090c;
}

.agent-setup__routine-title {
  font-size: 3.35cqw;
}

.agent-setup__time {
  margin-block: 1.45cqw 1.55cqw;
  font-size: 6.85cqw;
  font-weight: 700;
  letter-spacing: -.055em;
}

.agent-setup__steps {
  display: grid;
  gap: .4cqw;
  font-size: 2cqw;
}

.agent-setup__steps li {
  gap: 1.25cqw;
}

.agent-setup__steps .agent-setup__icon {
  width: 3.35cqw;
  height: 3.35cqw;
  border-radius: .85cqw;
  background: #e5ebf7;
}

.agent-setup__locked {
  gap: .8cqw;
  margin-top: 1.65cqw;
  padding-top: 1.75cqw;
  border-top: 1px solid rgba(5, 5, 31, .15);
}

.agent-setup__locked .agent-setup__icon {
  width: 2.1cqw;
  height: 2.1cqw;
  border-radius: .4cqw;
  background: #1a3d77;
  color: #fff;
}

.agent-setup__locked .agent-setup__bar {
  width: 20cqw;
}