/* Site header (.wais-nav) and footer (.wais-banner) for pages that don't load
   style.css: the speaker profile pages in assets/speaker_details/ and
   delegate-registration.html. Taken from style.css and the inline header styles in
   index.html. style.css isn't loaded on the profile pages because its generic
   class names (.wrap, .hero, .card, .grid) clash with their layout, so keep
   this file in step when the header or footer changes on the home page. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 90px;
}

/* ===== HEADER ===== */
.wais-nav {
  position: sticky;
  top: 10px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1086px;
  margin: 10px auto 20px;
  padding: 5px 7px;
  background: #fff;
  border-radius: 50px;
  /* no backdrop-filter: Safari clips the Past Edition dropdown to the nav box */
  box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  font-family: 'Manrope', sans-serif;
  line-height: 1.65;
}

.wais-links,
.wais-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wais-logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.wais-logo img {
  display: block;
  height: 35px;
  width: auto;
}

.wais-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.75rem;
}

.wais-links a {
  position: relative;
  color: #111;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 4px;
  transition: color .2s;
}

.wais-nav-cta {
  flex: none;
  display: inline-block;
  padding: 11px 22px;
  border-radius: 99px;
  background: linear-gradient(95deg, #0022f6, #3026b6 45%, #c53d89);
  box-shadow: 0 6px 22px rgba(216, 18, 125, .36);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.wais-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(216, 18, 125, .52);
}

/* Past Edition dropdown */
.wais-dropdown {
  position: relative;
}

.wais-dropdown>a {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wais-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 1200;
}

.wais-dropdown:hover .wais-submenu,
.wais-dropdown:focus-within .wais-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wais-submenu li {
  display: block;
}

.wais-submenu li a {
  display: block;
  padding: 11px 18px;
  white-space: nowrap;
  color: #111;
  font-size: 14px;
  font-weight: 500;
}

.wais-submenu li a:hover {
  background: linear-gradient(95deg, #0022f6, #3026b6 45%, #c53d89);
  color: #fff;
}

/* Hamburger (hidden on desktop) */
.wais-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 9px;
  margin-left: 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.wais-burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #111;
  border-radius: 3px;
  transition: transform .3s ease, opacity .3s ease;
}

.wais-nav.open .wais-burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.wais-nav.open .wais-burger span:nth-child(2) {
  opacity: 0;
}

.wais-nav.open .wais-burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 900px) {
  .wais-nav {
    flex-wrap: wrap;
    padding: 11px 18px 0 12px;
    margin-bottom: 0;
  }

  .wais-burger {
    display: flex;
  }

  .wais-nav-cta {
    margin-left: auto;
  }

  .wais-nav .wais-links {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }

  .wais-nav.open .wais-links {
    max-height: 85vh;
    overflow-y: auto;
    padding-top: 6px;
  }

  .wais-nav .wais-links>li {
    width: 100%;
  }

  .wais-nav .wais-links>li>a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid #eee;
  }

  .wais-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    min-width: 0;
    background: transparent;
    padding: 0 0 6px 14px;
  }

  .wais-submenu li a {
    color: #333;
    padding: 9px 0;
  }
}

@media (max-width: 560px) {
  .wais-logo img {
    height: 28px;
  }
}

@media (max-width: 480px) {
  .wais-nav-cta {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ===== SPEAKER HERO (profile pages) ===== */
/* Runs behind the floating header like the home page hero: the negative margin
   (collapsed with the nav's 20px bottom margin) pulls it up past the top of the
   page at every breakpoint, and the top padding clears the nav again. */
.spk-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -100px;
  padding: 120px 0 44px;
  color: #fff;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(0, 34, 246, .55), transparent 60%),
    radial-gradient(55% 90% at 100% 100%, rgba(197, 61, 137, .5), transparent 60%),
    #0a0b1f;
}

/* faint grid, like the venue section on the home page */
.spk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 75%);
}

.spk-hero-body {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 30px;
  align-items: center;
}

/* photos are transparent cutouts, so they sit on the brand gradient like the
   speaker cards on the home page */
.spk-hero-photo {
  display: block;
  width: 172px;
  height: 172px;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 22px;
  background: linear-gradient(160deg, #0022f6, #3026b6 55%, #c53d89);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .18);
}

.spk-hero h1 {
  margin: 0 0 8px;
  font-family: var(--disp);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
}

.spk-hero .role {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 600;
}

.spk-hero .org {
  margin: 0 0 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, .72);
}

.spk-hero .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.spk-hero .badge {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  font-size: 13px;
  font-weight: 600;
}

.spk-hero .badge.confirmed::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #3ddc84;
  vertical-align: 1px;
}

.spk-hero .links a {
  display: inline-block;
  margin-right: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.spk-hero .links a:hover {
  background: #fff;
  color: #0022f6;
}

@media (max-width: 900px) {
  .spk-hero {
    padding-top: 130px;
  }
}

@media (max-width: 760px) {
  .spk-hero {
    padding-bottom: 34px;
  }

  .spk-hero-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .spk-hero-photo {
    width: 132px;
    height: 132px;
    border-radius: 18px;
  }

  .spk-hero h1 {
    font-size: 28px;
  }
}

/* ===== SPEAKER PROFILE CONTENT (body.spk-profile) ===== */
/* Everything below is scoped to the profile pages, so the speakers list page
   (which shares this file for the header and footer) keeps its own styles. */
.spk-profile {
  --ink: #0a0a0a;
  --text: #33373e;
  --muted: #5c6168;
  --line: #e6e6ec;
  --paper: #f6f6f6;
  --blue: #0022f6;
  --grad: linear-gradient(95deg, #0022f6, #3026b6 45%, #c53d89);
  /* same heading stack as style.css (--disp) */
  --disp: 'Archivo Black', sans-serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.spk-profile .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.spk-profile main {
  background: var(--paper);
}

.spk-profile main a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.spk-profile main a:hover {
  color: #c53d89;
}

.spk-profile .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  padding: 52px 0 76px;
}

.spk-article {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.spk-profile .grid h2,
.spk-profile .grid h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--disp);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.spk-profile .grid p {
  margin: 0;
}

/* gradient icon square (session, organisation) */
.spk-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(48, 38, 182, .8);
}

.spk-ico svg,
.card-event .ev-line svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spk-ico svg {
  width: 22px;
  height: 22px;
}

/* word-level gradient, like the section headings on the home page */
.spk-hl {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- session ---------- */
.spk-profile .session {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px 18px;
  align-items: center;
  padding: 26px 28px 28px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow: 0 22px 44px -30px rgba(48, 38, 182, .45);
}

.spk-profile .session h2 {
  font-size: 21px;
}

.spk-profile .session> :not(.spk-ico):not(h2) {
  grid-column: 1 / -1;
}

.spk-profile .session p {
  font-size: 15.5px;
  line-height: 1.75;
}

/* session details, once the agenda is published */
.spk-profile .session .title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.spk-profile .session dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 15px;
}

.spk-profile .session dt {
  color: var(--muted);
  font-weight: 700;
}

.spk-profile .session dd {
  margin: 0;
}

/* ---------- bio ---------- */
.spk-profile .bio h2 {
  font-size: clamp(26px, 3vw, 32px);
}

.spk-profile .bio h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 16px 0 22px;
  border-radius: 4px;
  background: var(--grad);
}

.spk-profile .bio p {
  max-width: 68ch;
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.8;
}

.spk-profile .bio p:first-of-type {
  color: var(--ink);
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.7;
}

.spk-profile .bio p:last-of-type {
  margin-bottom: 0;
}

/* ---------- organisation ---------- */
.spk-profile .orgbox {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px 18px;
  align-items: center;
  overflow: hidden;
  padding: 24px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.spk-profile .orgbox::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #0022f6, #3026b6 45%, #c53d89);
}

.spk-profile .orgbox h2 {
  font-size: 18px;
  line-height: 1.35;
}

.spk-profile .orgbox p {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

/* short list of topics, shown as chips (e.g. summit focus areas) */
.spk-profile .spk-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spk-profile .spk-chips li {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- sidebar ---------- */
.spk-profile aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spk-profile .card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
}

.spk-profile .card h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.spk-profile .card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* event card: dark, same glow as the hero */
.spk-profile .card-event {
  position: relative;
  overflow: hidden;
  border: 0;
  color: #fff;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(0, 34, 246, .6), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(197, 61, 137, .55), transparent 60%),
    #0a0b1f;
  box-shadow: 0 24px 48px -28px rgba(10, 11, 31, .9);
}

.spk-profile .card-event h3 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 21px;
}

.spk-profile .card-event .ev-line {
  position: relative;
  min-height: 30px;
  margin-bottom: 12px;
  padding-left: 42px;
  color: rgba(255, 255, 255, .85);
  font-size: 14.5px;
  line-height: 1.5;
}

.spk-profile .card-event .ev-line:first-of-type {
  padding-top: 3px;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
}

.card-event .ev-line svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  background: rgba(255, 255, 255, .12);
}

.spk-profile .card-event p:not(.ev-line) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .75);
}

/* buttons: gradient pill like the home page CTAs */
.spk-profile .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(216, 18, 125, .6);
  transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}

.spk-profile .btn::after,
.spk-profile .spk-more a::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform .2s;
}

.spk-profile .btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(216, 18, 125, .7);
}

.spk-profile .btn:hover::after,
.spk-profile .spk-more a:hover::after {
  transform: translateX(3px);
}

.spk-profile .card-event .btn {
  width: 100%;
}

/* other speakers: each row is one link, photo on the left */
.spk-profile .others {
  list-style: none;
  margin: 6px -10px 0;
  padding: 0;
}

.spk-profile .others li+li {
  border-top: 1px solid var(--line);
}

.spk-profile .others a {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 10px 34px 10px 10px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s;
}

/* cutout photos on the brand gradient, like the hero photo */
.spk-profile .others img {
  grid-row: 1 / span 2;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(160deg, #0022f6, #3026b6 55%, #c53d89);
}

.spk-profile .others a span {
  grid-column: 2;
  align-self: end;
  font-size: 15px;
  line-height: 1.35;
  transition: color .2s;
}

.spk-profile .others a small {
  grid-column: 2;
  align-self: start;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.spk-profile .others a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: #b7bac2;
  transform: translateY(-50%) rotate(45deg);
  transition: right .2s, color .2s;
}

.spk-profile .others a:hover {
  background: #f3f3fb;
  color: var(--ink);
}

.spk-profile .others a:hover span,
.spk-profile .others a:hover::after {
  color: var(--blue);
}

.spk-profile .others a:hover::after {
  right: 10px;
}

.spk-profile .spk-more {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.spk-profile .spk-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 1020px) {
  .spk-profile .grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
  }
}

@media (max-width: 820px) {
  .spk-profile .grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 0 56px;
  }

  /* tablets: event card and other speakers side by side */
  .spk-profile aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .spk-profile .wrap {
    padding: 0 16px;
  }

  .spk-profile aside {
    display: flex;
  }

  .spk-profile .session,
  .spk-profile .orgbox {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 22px 20px;
    border-radius: 18px;
  }

  .spk-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .spk-profile .card {
    padding: 20px;
    border-radius: 18px;
  }

  .spk-profile .bio p {
    font-size: 16px;
  }

  .spk-profile .bio p:first-of-type {
    font-size: 17px;
  }
}

/* ===== FOOTER ===== */
.wais-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 90px 24px 60px;
  text-align: center;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  line-height: 1.65;
}

.wais-banner .wais-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

/* subtle overlay so text stays crisp regardless of source image */
.wais-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 5, 20, .35) 0%, rgba(10, 5, 20, .15) 35%, rgba(10, 5, 20, .55) 100%);
  z-index: -1;
}

.wais-tagline {
  margin: 0 0 46px;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.wais-logo-footer {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto 40px;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .35));
}

.wais-sub {
  max-width: 720px;
  margin: 0 auto 34px;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  color: #e7e2f5;
}

.wais-pills {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2px;
  max-width: 1060px;
  margin: 0 auto 46px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(30, 0, 60, .45);
}

.wais-pill {
  flex: 1 1 0;
  padding: 26px 22px;
  background: linear-gradient(135deg, #4b3df0 0%, #7b3ce0 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.wais-pill:nth-child(2) {
  background: linear-gradient(135deg, #9a3bcf 0%, #c23f8f 100%);
}

.wais-pill:nth-child(3) {
  background: linear-gradient(135deg, #c23f8f 0%, #e2466e 100%);
}

.wais-pill-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}

.wais-pill-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wais-pill-t {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.wais-pill-e {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.3;
  color: #f2eefc;
  word-break: break-word;
}

.wais-pill-e a {
  color: inherit;
  text-decoration: none;
}

.wais-pill-e a:hover {
  text-decoration: underline;
}

.worldsocials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.worldsocials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.worldsocials a svg {
  width: 15px;
  height: 15px;
  fill: rgb(255 244 244);
}

.worldsocials a:hover {
  background-color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

.worldsocials a:hover svg {
  fill: #1a0a2e;
}

@media (max-width: 920px) {
  .wais-pills {
    flex-direction: column;
    border-radius: 12px;
    margin-bottom: 30px;
  }

  .wais-pill {
    padding: 20px;
    text-align: center;
  }
}

@media (max-width: 700px) {
  .wais-banner {
    padding: 60px 16px 44px;
  }

  .wais-tagline {
    margin-bottom: 30px;
  }

  .wais-logo-footer {
    max-width: 320px;
    margin-bottom: 26px;
  }

  .wais-sub {
    margin-bottom: 24px;
  }
}

@media (max-width: 420px) {
  .wais-logo-footer {
    max-width: 250px;
  }

  .wais-pill-t {
    font-size: 15px;
  }

  .wais-pill-e {
    font-size: 13.5px;
  }
}

/* ===== Fixed social sidebar (#sideSocial) =====
   Same as style.css (see the notes there): a brand-gradient tab on the left edge on screens
   1360px and wider, where the footer's own row of icons (.worldsocials--sidebar) is hidden. */
.side-social {
  display: none;
}

@media (min-width: 1360px) {
  .side-social {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 5px;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(180deg, #0022f6 0%, #3026b6 50%, #c53d89 100%);
    box-shadow: 0 16px 36px -14px rgba(30, 18, 110, .6);
    transform: translateY(-50%);
  }

  .side-social a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    transition: background .25s ease, color .25s ease, transform .25s ease;
  }

  .side-social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }

  .side-social a:hover,
  .side-social a:focus-visible {
    background: #fff;
    color: #3026b6;
    transform: scale(1.08);
  }

  .side-social a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .worldsocials--sidebar {
    display: none !important;
  }
}
