#register {
  max-width: 1340px
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-bottom: 64px
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 30px 30px 28px;
  min-height: 268px;
  display: flex;
  flex-direction: column;
}

.card {
  background: var(--card-photo)
}

.card .num,
.card h3 {
  position: relative;
  z-index: 2
}

.card .num {
  font-size: calc((13.5px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal)
}

.card.accent-purple .num {
  color: var(--purple)
}

.card .num::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  margin-top: 8px;
  opacity: .55
}

.card h3 {
  margin: 20px 0 0;
  font-size: calc((clamp(20px, 1.8vw, 24px)) * var(--fs, 1));
  line-height: 1.12;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  max-width: 47%
}

.card p {
  margin: 12px 0 0;
  font-size: calc((14.5px) * var(--fs, 1));
  line-height: 1.5;
  color: var(--slate);
  max-width: 47%;
  position: relative;
  z-index: 2
}

.card .go {
  margin-top: auto;
  padding-top: 22px;
  position: relative;
  z-index: 2
}

.card .art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0
}

.card .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top
}

.card .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(217, 240, 253, .92) 0%, rgba(217, 240, 253, .74) 30%,
      rgba(217, 240, 253, .26) 46%, rgba(217, 240, 253, 0) 60%);
}

.card:hover {
  box-shadow: 0 10px 28px -14px rgba(12, 46, 78, .3)
}

.card {
  transition: box-shadow .25s
}

/* ---------- what's new ---------- */
.whatsnew {
  padding: 6px 0 64px;
  text-align: center
}

.sect-title {
  margin: 0 0 34px;
  font-size: calc(var(--h-sect) * var(--fs, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.whatsnew .sect-title {
  margin-bottom: 26px
}

.whatsnew .sect-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--rule-green);
  margin: 16px auto 0;
}


.new-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.new-item {
  padding: 4px 18px;
  text-align: center;
  flex: 0 1 calc(100% / 5);
  min-width: 0
}

.new-item+.new-item {
  border-left: 1px solid var(--rule-green)
}

.new-item svg {
  width: 34px;
  height: 34px;
  color: var(--teal);
  margin: 0 auto 14px
}

.new-item h4 {
  margin: 0 0 10px;
  font-size: calc((15px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.35
}

.new-item p {
  margin: 0;
  font-size: calc((14.5px) * var(--fs, 1));
  line-height: 1.55;
  color: var(--slate)
}

.new-cue {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rule-green);
  color: #fff;
  margin: 14px auto 0;
  transition: transform .18s ease;
  flex: none;
}

.new-cue svg {
  width: 15px;
  height: 15px;
  margin: 0;
  color: inherit
}

.new-item a:hover .new-cue {
  transform: translateX(3px)
}

.new-item a.new-cue {
  display: grid;
  flex: none;
  color: #fff;
  margin-top: auto
}

.new-item a.new-cue:hover {
  transform: translateX(3px)
}


.new-item .new-soon {
  margin: 14px 0 0;
  margin-top: auto;
  font-size: calc((12px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2E7D32;
}


.new-item {
  display: flex;
  flex-direction: column
}

.new-item a {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none
}

.new-cue {
  margin-top: auto
}

.whatsnew .textlink {
  margin-top: 32px
}


.speakers-band {
  background: var(--teal);
  margin-inline: calc(var(--main-pad) * -1);
  padding-inline: var(--main-pad);
}

.speakers .head-left,
.speakers .sub-head {
  color: #fff
}

.speakers {
  padding: 56px 28px 62px
}

.head-left {
  margin: 0;
  font-size: calc(var(--h-sect) * var(--fs, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em
}

.speakers .head-left {
  text-align: center
}

.speakers .sub-head {
  width: fit-content;
  margin-inline: auto;
  background: #E1EFF2;
  color: var(--teal);
  border-radius: 3px;
  padding: 7px 14px;
  font-size: calc((13px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .11em;
}

.speakers .u-teal {
  width: 46px;
  height: 3px;
  background: var(--rule-green);
  margin: 12px auto 30px;
}

.keynote {
  display: grid;
  grid-template-columns: 232px minmax(280px, 1fr) minmax(240px, 290px);
  gap: 34px;
  align-items: start
}

.ks-photo {
  border-radius: 4px;
  overflow: hidden;
  background: #E3EAF1;
  aspect-ratio: 11/8
}

.ks-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pill {
  display: inline-block;
  background: #E1EFF2;
  color: var(--teal);
  border-radius: 3px;
  padding: 6px 11px;
  font-size: calc((11.5px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ks-main h3 {
  margin: 16px 0 0;
  font-size: calc((clamp(21px, 2.1vw, 26px)) * var(--fs, 1));
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.01em
}

.ks-name {
  margin: 14px 0 0;
  font-size: calc((15.5px) * var(--fs, 1));
  font-weight: 500
}

.ks-affil {
  margin: 8px 0 0;
  font-size: calc((13.5px) * var(--fs, 1));
  color: var(--slate)
}

.ks-when {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: calc((14px) * var(--fs, 1));
  font-weight: 500
}

.ks-when svg {
  width: 16px;
  height: 16px;
  color: var(--teal);
  flex: none
}

.ks-side p {
  margin: 0 0 20px;
  font-size: calc((14.5px) * var(--fs, 1));
  line-height: 1.85;
  color: var(--navy-2)
}

.sub-head {
  margin: 44px 0 18px;
  font-size: calc((15px) * var(--fs, 1));
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase
}

.plenary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.p-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column
}

.p-card .body {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start
}

.p-txt {
  flex: 1;
  min-width: 0
}

.p-photo {
  width: 100px;
  flex: none;
  border-radius: 3px;
  overflow: hidden;
  background: #E3EAF1;
  aspect-ratio: 5/6
}

.p-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.p-card h5 {
  margin: 0;
  font-size: calc((14px) * var(--fs, 1));
  font-weight: 700;
  line-height: 1.45
}

.p-card .award {
  margin: 9px 0 0;
  font-size: calc((12.5px) * var(--fs, 1));
  line-height: 1.5;
  color: var(--slate)
}

.p-card .lecture {
  margin: 11px 0 0;
  font-size: calc((13px) * var(--fs, 1));
  line-height: 1.5;
  font-weight: 600
}

.p-when {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: calc((13px) * var(--fs, 1));
  color: var(--slate);
  font-weight: 500;
}

.p-when svg {
  width: 15px;
  height: 15px;
  color: var(--teal);
  flex: none
}

.speakers .more {
  display: flex;
  justify-content: center;
  margin-top: 34px
}

@media(max-width:1080px) {
  .keynote {
    grid-template-columns: 200px 1fr;
    gap: 26px
  }

  .ks-side {
    grid-column: 1 / -1
  }

  .plenary {
    grid-template-columns: 1fr
  }

  .p-photo {
    width: 110px
  }
}

@media(max-width:640px) {
  .keynote {
    grid-template-columns: 1fr
  }

  .ks-photo {
    max-width: 280px
  }

  .ks-side {
    grid-column: auto
  }
}

/* ---------- tracks ---------- */
.tracks {

  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: minmax(210px, 26%) 1fr;
  gap: 38px;
  align-items: center;
  margin: 56px 0;
}

.tracks h2 {
  margin: 0;
  font-size: calc(var(--h-sect) * var(--fs, 1));
  font-weight: 600;
  letter-spacing: -.01em
}

.tracks .u {
  width: 56px;
  height: 2px;
  background: #44D62C;
  margin: 14px 0 16px
}

.tracks p {
  margin: 0 0 16px;
  font-size: calc((14.5px) * var(--fs, 1));
  color: var(--slate)
}

.tracks-cta {
  margin-top: 4px;
  white-space: nowrap
}

.tracks-cta svg {
  width: 15px;
  height: 15px
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 6px
}

.track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  min-width: 0
}

.track:not(:nth-child(4n+1)) {
  border-left: 1px solid var(--line-soft)
}

.track svg,
.track img {
  width: 26px;
  height: 26px;
  flex: none
}

.track svg {
  color: var(--teal)
}

.track img {
  object-fit: contain
}

.track {
  color: inherit
}

.track span {
  font-size: calc((13.5px) * var(--fs, 1));
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: break-word
}

/* ---------- why attend ---------- */
.why {
  padding: 8px 0 35px;
  text-align: center
}

/* 35px clear of the location band */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--teal);
  font-size: calc((13.5px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55
}

.why h2 {
  margin: 16px 0 0;
  font-size: calc(var(--h-sect) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.18;
}

.why .lede {
  margin: 15px auto 0;
  max-width: 600px;
  font-size: calc((15.5px) * var(--fs, 1));
  line-height: 1.6;
  color: var(--slate)
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 38px
}

.why-card {
  --accent: var(--teal);
  --accent2: #33A9A0;
  --tint: #F1F9F8;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  /* photo, then the copy block */
  background: linear-gradient(170deg, #fff 0%, var(--tint) 100%);
  border: 1px solid rgba(12, 46, 78, .07);
  border-bottom: 0;
  box-shadow: 0 1px 2px rgba(12, 46, 78, .04);
}


.why-shot {
  margin: 0;
  aspect-ratio: 1461/587;
  overflow: hidden;
  background: var(--tint)
}

.why-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}


.why-body {
  padding: 22px 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 14px;
  align-items: center;
  text-align: left;
}

.why-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent)
}

.why-card.b {
  --accent: #2F6FD0;
  --accent2: #4E8DE6;
  --tint: #F3F7FE
}

.why-card.p {
  --accent: #7A4FC2;
  --accent2: #9968DA;
  --tint: #F9F5FE
}

.why-card .ic {
  grid-column: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  box-shadow: 0 6px 14px -6px var(--accent);
}

.why-card .ic svg {
  width: 25px;
  height: 25px
}

.why-card h3 {
  grid-column: 2;
  margin: 0;
  font-size: calc((17px) * var(--fs, 1));
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.005em
}

.why-card p {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-size: calc((13.8px) * var(--fs, 1));
  line-height: 1.62;
  color: var(--slate);
  position: relative;
  z-index: 1;
}

.why-card .why-hours {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-size: calc((13px) * var(--fs, 1));
  line-height: 1.5;
  color: var(--navy);
  position: relative;
  z-index: 1;
}

.why-card .why-hours strong {
  font-weight: 700
}

.why-card .textlink {
  margin-top: 16px;
  font-size: calc((12.5px) * var(--fs, 1));
  color: var(--accent);
  position: relative;
  z-index: 1
}

.why-card .deco {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 158px;
  height: 140px;
  color: var(--accent);
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}

.why-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 34px;
  font-size: calc((14.5px) * var(--fs, 1));
  font-weight: 500;
}

.why-meta span {
  display: flex;
  align-items: center;
  gap: 9px
}

.why-meta svg {
  width: 17px;
  height: 17px;
  color: var(--teal);
  flex: none
}

.why-meta em,
.why-meta i {
  width: 1px;
  height: 15px;
  background: var(--line);
  display: block
}

@media(max-width:1080px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:640px) {
  .why-grid {
    grid-template-columns: 1fr
  }

  .why-meta em,
  .why-meta i {
    display: none
  }

  .why-meta {
    flex-direction: column;
    gap: 12px
  }
}

/* ---------- location ---------- */
.location {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;

  border: 1px solid var(--line);
  margin: 24px 0 70px;
  min-height: 186px;
}

.location .shot {
  position: relative;
  overflow: hidden;
  background: #0d3348
}

.location .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04)
}

.location .panel {
  background: var(--panel-bg, linear-gradient(105deg, #E6F3F2 0%, #DCEDEF 100%));
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.location .kicker {
  font-size: calc((11.5px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--teal)
}

.location .panel>p:has(.kicker) {
  margin: 0 0 10px
}

.location h2 {
  margin: 0;
  font-size: calc(var(--h-sect) * var(--fs, 1));
  font-weight: 600;
  letter-spacing: -.01em
}

.location .intro {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: calc((15.5px) * var(--fs, 1));
  line-height: 1.7;
  color: var(--slate);
}

.panel-meta {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: calc((14px) * var(--fs, 1));
  color: var(--slate);
}

.panel-meta li {
  display: flex;
  align-items: center;
  gap: 9px
}

.panel-meta svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--teal)
}

.location .panel.is-dark .panel-meta {
  color: rgba(255, 255, 255, .82)
}

.location .panel.is-dark .panel-meta svg {
  color: rgba(255, 255, 255, .7)
}

.location .meta {
  margin: 11px 0 0;
  font-size: calc((14px) * var(--fs, 1));
  color: var(--slate);
  line-height: 1.65
}

.location .btn {
  margin-top: 18px;
  align-self: flex-start
}

.location .frond {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 200px;
  color: #B9D9D6;
  opacity: .5
}


.location .panel.is-dark {
  color: #fff
}

.location .panel.is-dark .kicker {
  color: rgba(255, 255, 255, .85)
}

.location .panel.is-dark .meta {
  color: rgba(255, 255, 255, .78)
}

.location .panel.is-dark .intro {
  color: rgba(255, 255, 255, .82)
}

.location .panel.is-dark .frond {
  color: rgba(255, 255, 255, .4)
}

/* ---------- banner ad ---------- */
.adslot-wrap {
  border-top: 1px solid var(--line);
  padding-top: 46px;
  padding-bottom: 40px
}

.adslot {
  position: relative;
  aspect-ratio: 1400/180;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}

.adslot .ad {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}

.adslot .ad.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s
}

.adslot .ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.adslot .ad:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px
}

@media(prefers-reduced-motion:reduce) {
  .adslot .ad {
    transition: opacity .01s linear, visibility 0s linear .01s
  }

  .adslot .ad.is-active {
    transition: opacity .01s linear, visibility 0s
  }
}

/* ---------- sponsors ---------- */
.sponsors {
  background: #fff;
  padding: 8px 0 58px;
  text-align: center
}

.sponsors .sect-title {
  margin-bottom: 26px
}

.carousel {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-btn {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}

.carousel-btn:hover {
  background: var(--wash);
  color: var(--teal)
}

.carousel-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px
}

.carousel-btn svg {
  width: 20px;
  height: 20px
}

.carousel-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}

.carousel-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform
}

.carousel-track a {
  flex: none;
  height: 84px;
  padding: 0 28px;
  display: grid;
  place-items: center;
}

.carousel-track img {
  max-height: 62px;
  max-width: 185px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .92;
  transition: opacity .2s, transform .2s;
}

.carousel-track a:hover img {
  opacity: 1;
  transform: scale(1.05)
}

.carousel-track a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -4px;
  border-radius: 4px
}


.foot {
  background: var(--foot-bg, var(--footer));
  color: var(--foot-fg, #fff)
}

.foot-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.foot-note {
  flex: 1 1 240px
}

.foot-in .signup-wrap {
  flex: 0 1 320px
}

.foot-note {
  display: flex;
  align-items: center;
  gap: 15px
}

.foot-note .bubble {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--foot-fg, #fff) 12%, transparent);
  display: grid;
  place-items: center;
  flex: none
}

.foot-note .bubble svg {
  width: 21px;
  height: 21px
}

.foot-note h5 {
  margin: 0 0 4px;
  font-size: calc((12.5px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase
}

.foot-note p {
  margin: 0;
  font-size: calc((12.5px) * var(--fs, 1));
  line-height: 1.45;
  color: color-mix(in srgb, var(--foot-fg, #fff) 72%, transparent);
  max-width: 26em
}

.signup {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  background: #fff
}

.signup[hidden] {
  display: none
}

/* The two states under the field. Each is hidden until it has something to
   say, so neither takes space in the footer row at rest. */
.signup-msg {
  margin: 8px 0 0;
  font-size: calc((12.5px) * var(--fs, 1));
  line-height: 1.4;
  font-weight: 600;
}

.signup-msg[hidden] {
  display: none
}

.signup-error {
  color: #FFD7C2
}


.signup-done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 0 0;
  color: var(--foot-fg, #fff);
}

.signup-done[hidden] {
  display: none
}

.signup-done-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rule-green);
  color: var(--navy);
}

.signup-done-badge svg {
  width: 20px;
  height: 20px
}

.signup-done-title {
  margin: 1px 0 0;
  font-size: calc((15px) * var(--fs, 1));
  font-weight: 800;
  letter-spacing: .01em;
}

.signup-done-text {
  margin: 3px 0 0;
  font-size: calc((12.5px) * var(--fs, 1));
  line-height: 1.45;
  color: color-mix(in srgb, var(--foot-fg, #fff) 78%, transparent);
}


.signup-done.is-in {
  animation: signup-rise .42s cubic-bezier(.2, .7, .3, 1) both
}

.signup-done.is-in .signup-done-badge {
  animation: signup-pop .5s .1s cubic-bezier(.2, 1.5, .4, 1) both
}

.signup-done.is-in .signup-done-title {
  animation: signup-rise .42s .06s cubic-bezier(.2, .7, .3, 1) both
}

.signup-done.is-in .signup-done-text {
  animation: signup-rise .42s .13s cubic-bezier(.2, .7, .3, 1) both
}

@keyframes signup-rise {
  from {
    opacity: 0;
    transform: translateY(7px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes signup-pop {
  0% {
    opacity: 0;
    transform: scale(.4) rotate(-18deg)
  }

  55% {
    opacity: 1;
    transform: scale(1.14) rotate(6deg)
  }

  100% {
    opacity: 1;
    transform: none
  }
}

@media(prefers-reduced-motion:reduce) {

  .signup-done.is-in,
  .signup-done.is-in .signup-done-badge,
  .signup-done.is-in .signup-done-title,
  .signup-done.is-in .signup-done-text {
    animation: none
  }
}

.signup input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 13px 15px;
  font-size: calc((14px) * var(--fs, 1));
  color: var(--navy);
  font-family: inherit
}

.signup input::placeholder {
  color: #9AA9B5
}

.signup input:focus {
  outline: 2px solid var(--teal);
  outline-offset: -2px
}

/* Driven by the Button colors screen like every other button on the site. */
.signup button {
  border: 0;
  padding: 13px 20px;
  cursor: pointer;
  background: var(--btn-signup-bg, var(--teal));
  color: var(--btn-signup-fg, #fff);
  font-size: calc((12.5px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signup button:hover {
  background: var(--btn-signup-hover-bg, var(--teal-dark));
  color: var(--btn-signup-hover-fg, #fff);
}

.follow {
  text-align: left
}

.follow h5 {
  margin: 0 0 11px;
  font-size: calc((12px) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foot-fg, #fff) 82%, transparent)
}

.socials {
  display: flex;
  gap: 16px
}

/* `span` covers a network whose address has not been filled in yet -- it
   keeps the icon in the row without pretending to be a link. */
.socials a,
.socials>span {
  color: var(--foot-fg, #fff);
  opacity: .85;
  transition: opacity .2s
}

.socials a:hover {
  opacity: 1
}

.socials svg {
  width: 18px;
  height: 18px
}

.legal {
  border-top: 1px solid color-mix(in srgb, var(--foot-fg, #fff) 13%, transparent)
}

.legal-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 15px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: calc((12.5px) * var(--fs, 1));
  color: color-mix(in srgb, var(--foot-fg, #fff) 60%, transparent);
}

.legal-in nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px
}

.legal-in a:hover {
  color: var(--foot-fg, #fff)
}

/* ---------- responsive ---------- */
@media(max-width:1080px) {
  .new-grid {
    row-gap: 30px
  }

  .new-item {
    flex-basis: calc(100% / 3)
  }

  .new-item:nth-child(3n+1) {
    border-left: 0
  }

  .track-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .track:not(:nth-child(4n+1)) {
    border-left: 0
  }

  .track:nth-child(even) {
    border-left: 1px solid var(--line-soft)
  }
}

@media(max-width:900px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .card {
    min-height: clamp(280px, 42vw, 380px)
  }

  .tracks {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px;
    margin: 38px 0
  }

  .speakers {
    padding: 40px 24px 46px
  }

  .location {
    grid-template-columns: 1fr
  }

  .location .shot {
    height: 200px
  }

  .foot-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px
  }

  .foot-in>* {
    width: 100%
  }

  .carousel-track a {
    height: 72px;
    padding: 0 20px
  }

  .carousel-track img {
    max-height: 52px
  }
}

@media(max-width:560px) {
  .new-item {
    flex-basis: 50%
  }

  .new-item {
    border-left: 0 !important
  }

  .track-grid {
    grid-template-columns: 1fr
  }

  .track {
    border-left: 0 !important
  }

  .signup {
    flex-direction: column
  }

  .adslot-wrap {
    padding-top: 32px;
    padding-bottom: 26px
  }

  .sponsors {
    padding: 4px 0 44px
  }

  .carousel {
    padding: 0 6px
  }

  .carousel-track a {
    height: 64px;
    padding: 0 16px
  }

  .carousel-track img {
    max-height: 44px;
    max-width: 140px
  }
}


.carousel-btn[hidden] {
  display: none
}



.keynote-2 {

  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin: 26px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: clamp(20px, 2.4vw, 30px);
}

.keynote-2.has-no-photo {
  grid-template-columns: 1fr
}

.ks-shot {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--line-soft)
}

.ks-shot img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 11/13;
  object-fit: cover
}


.ks-body {
  max-width: 74ch
}

.keynote-2:not(.has-no-photo) .ks-body {
  max-width: none
}

.ks-name {
  margin: 12px 0 0;
  font-size: calc((clamp(19px, 2.1vw, 23px)) * var(--fs, 1));
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy)
}

.ks-bio {
  margin: 12px 0 0;
  font-size: calc((16.5px) * var(--fs, 1));
  line-height: 1.65;
  color: var(--slate)
}

.ks-bio p {
  margin: 0 0 11px
}

.ks-bio p:last-child {
  margin-bottom: 0
}

.ks-bio em,
.ks-bio i {
  font-style: italic
}

.ks-bio h2,
.ks-bio h3,
.ks-bio h4 {
  margin: 14px 0 0;
  font-size: calc((15.5px) * var(--fs, 1));
  line-height: 1.4;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- plenary lectureships ---------- */
.lectures {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.lecture-card {

  scroll-margin-top: calc(var(--hdr) + 18px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
}

.lecture-shot {
  margin: 0;
  flex: none;
  width: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--line-soft)
}

.lecture-shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block
}

.lecture-body {
  min-width: 0
}

.lecture-award {
  margin: 0;
  font-size: calc((15.5px) * var(--fs, 1));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--navy);
}

.lecture-speaker {
  margin: 6px 0 0;
  font-size: calc((14.5px) * var(--fs, 1));
  font-weight: 600;
  color: var(--teal)
}

.lecture-when {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  font-size: calc((13px) * var(--fs, 1));
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--slate);
}

.lecture-when svg {
  width: 15px;
  height: 15px;
  color: var(--teal);
  flex: none
}

@media(max-width:900px) {
  .keynote-2 {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .ks-shot {
    max-width: min(300px, 70%);
    margin-inline: auto
  }

  .lectures {
    grid-template-columns: 1fr
  }
}


.video-band {
  background: var(--video-bg, var(--banner-navy));
  margin-inline: calc(var(--main-pad) * -1);
  padding: clamp(28px, 3.5vw, 46px) var(--main-pad);

  margin-bottom: clamp(34px, 4vw, 56px);
}

.video-in {
  max-width: 720px;
  margin: 0 auto;
  text-align: center
}

.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.video-caption {
  margin: 16px 0 0;
  color: #fff;
  font-size: calc((15.5px) * var(--fs, 1));
  font-weight: 600;
  letter-spacing: .02em;
}


.statement-band {
  background: var(--statement-bg, var(--wash));
  margin-inline: calc(var(--main-pad) * -1);
  padding-inline: var(--main-pad);
}

.statement {
  padding: clamp(40px, 5vw, 64px) 28px clamp(36px, 4vw, 56px);
  text-align: center;
}

.statement-eyebrow {
  margin: 0 0 10px;
  font-size: calc((15px) * var(--fs, 1));
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2E7D32;
}

.statement-title {
  margin: 0;
  font-size: calc(var(--h-sect) * var(--fs, 1));
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.statement .u {
  width: 56px;
  height: 3px;
  background: var(--rule-green);
  margin: 14px auto 22px
}

.statement-lead {

  max-width: 760px;
  margin: 0 auto;
  font-size: calc((clamp(15.5px, 1.3vw, 17.5px)) * var(--fs, 1));
  line-height: 1.6;
  color: var(--navy);
}

.statement-body {
  max-width: 760px;
  margin: 18px auto 0;

  font-size: calc((16px) * var(--fs, 1));
  line-height: 1.7;
  color: var(--slate);
}
/* ---------- callout band ----------
   A short announcement between two sections. Edge to edge by the same
   negative-margin technique as the statement and video bands, so it cannot
   overflow the way a 100vw breakout would. */
.callout-band{
  background:var(--callout-bg, var(--wash));
  margin-inline:calc(var(--main-pad) * -1);
  padding-inline:var(--main-pad);
}
.callout{
  padding:clamp(30px,4vw,46px) 28px;
  text-align:center;
}
.callout-kicker{
  margin:0 0 10px;
  font-size:calc((22.5px) * var(--fs,1));font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#2E7D32;
}
.callout-lead{
  /* A fixed width rather than `ch`: the statement above it caps at 760px and
     the two read as one column when they match (§53). */
  max-width:760px;margin:0 auto;
  font-size:calc((clamp(16px,1.45vw,18.5px)) * var(--fs,1));line-height:1.55;
  font-weight:600;color:var(--navy);
}
/* The items are a wrapping row of chips, not a list: five short phrases in a
   column would be taller than the sentence that introduces them. */
.callout-items{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;
}
.callout-items li{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:calc((14px) * var(--fs,1));font-weight:600;color:var(--navy);
}
/* Added by the preprocess when the chosen background is dark enough that the
   navy copy stops being legible. The chips are already white cards, so only
   the two lines above them need to change. */
.callout-band.is-dark .callout-lead{color:#fff}
.callout-band.is-dark .callout-kicker{color:var(--brand-green)}

.callout-items svg{
  width:15px;height:15px;flex:none;
  /* The darker green again: #44D62C on white is about 1.9:1 (§84). */
  color:#2E7D32;
}