div.outline {
    background: transparent;
    border: 1px solid #cfd0ee;
    color: #ffffff;
    width: 100%;
    padding: 1.4rem 1.6rem;
}


.form-validation {
    color: #d00;
    font-size: 12px;
}

#form-output-global {
    z-index: 2000;
    display: none;
}

.shown {
    display: flex !important;
}

.body-sm a, .body-lg a {
    color: #c1d31f;
}

/* Homepage hero background video (see resources/scss/_homepage.scss) */
.homepage-hero .hero-video {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #0e083f;
}

.homepage-hero .hero-video__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .homepage-hero .hero-video__media {
        display: none;
    }

    .homepage-hero .hero-video {
        background: #0e083f url('../videos/hero-prow-poster.webp') center / cover no-repeat;
    }
}

.homepage-hero .hero-video__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, #0e083f 0%, transparent 18%),
        linear-gradient(to top, #0e083f 0%, transparent 18%),
        rgba(14, 8, 63, 0.5);
}

/* Footer background — subtle diagonal lavender light beam (Figma) instead of
   the old colourful mesh-gradient blobs. */
.footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 80rem;
    height: 30rem;
    top: 46%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(-30deg);
    background: radial-gradient(
        ellipse at center,
        rgba(214, 221, 255, 0.6) 0%,
        rgba(170, 180, 255, 0.32) 22%,
        rgba(164, 173, 253, 0.12) 42%,
        transparent 62%
    );
}

/* Footer logo lockup — keep the yellow slash beside the logo on all breakpoints (Figma) */
.footer-logo-lockup {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

@media (max-width: 767px) {
    .container-title .divider {
        display: block;
        height: 8rem;
    }
}

/* Footer: add vertical gap above Social Updates / "Brought to you by" when it
   wraps below the tall Links column (this project's lg breakpoint is 1280px,
   so the 2-column footer spans 768-1279px). */
@media (min-width: 768px) and (max-width: 1279px) {
    .footer .social-logos {
        margin-top: 4.8rem;
    }
}

/* About page — Founder's Vision: PROW slash pattern over the dark page
   background (matches .joinus-section / .event-section--2026). Mirrors
   resources/scss/_about.scss, which compiles to the un-rebuilt style.css. */
.founders-section {
    position: relative;
}
.founders-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='60' viewBox='0 0 48 60'%3E%3Cpath d='M14 50 L34 10' fill='none' stroke='%23cfd0ee' stroke-width='5' stroke-opacity='0.13' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 4.8rem 6rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.founders-section > .row,
.founders-section > .container {
    position: relative;
    z-index: 1;
}

/* === HOMEPAGE 2026 — auto-generated from resources/scss/_homepage-2026.scss; do not edit below this line === */
.homepage-hero .hero-content {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
}
@media (max-width: 1279px) {
  .homepage-hero .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.4rem;
  }
}
.homepage-hero .hero-logo {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  .homepage-hero .hero-logo {
    gap: 3.2rem;
  }
}
.homepage-hero .logo-landing {
  width: 27.7rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .homepage-hero .logo-landing {
    width: 19.4rem;
  }
}
.homepage-hero .logo-landing img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.homepage-hero .hero-divider {
  height: 14.1rem;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .homepage-hero .hero-divider {
    height: 9.9rem;
  }
}
.homepage-hero .hero-intro {
  width: 59.2rem;
  max-width: 100%;
}
@media (max-width: 1279px) {
  .homepage-hero .hero-intro {
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .homepage-hero .hero-tagline {
    font-size: 3rem;
    line-height: 4.4rem;
  }
}
.homepage-hero .hero-date {
  font-weight: 600;
}
@media (max-width: 1279px) {
  .homepage-hero .title-button {
    margin: 0 auto;
  }
}

@media (min-width: 1280px) {
  .homepage-hero .whattoexpect .card {
    background: transparent;
    padding: 0 0 2.4rem;
    position: relative;
  }
  .homepage-hero .whattoexpect .card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0.6rem;
    border-radius: 0.6rem;
    background: #cfd0ee;
  }
}
@media (max-width: 1279px) {
  .homepage-hero .whattoexpect .card {
    border-radius: 0;
  }
}
.why-section {
  position: relative;
  overflow: hidden;
}
.why-section::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10%;
  width: 60rem;
  height: 60rem;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(217, 232, 104, 0.4) 0%, rgba(217, 232, 104, 0.12) 22%, transparent 55%);
}
@media (max-width: 767px) {
  .why-section::before {
    width: 36rem;
    height: 36rem;
    right: -25%;
  }
}
.why-section .container {
  position: relative;
  z-index: 1;
}
.why-section .why-button {
  text-align: center;
}
.why-section .why-button button {
  display: inline-flex;
  width: auto;
}
@media (max-width: 767px) {
  .why-section > .container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding-top: 6.4rem;
    padding-bottom: 1.6rem;
  }
  .why-section .why-video {
    margin: 0;
  }
}

.event-section--2026 {
  position: relative;
  overflow: hidden;
  background: #0e083f;
}
.event-section--2026 .event-title {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  color: #0e083f;
  background: #c6ceff;
  padding: 0.8rem 4rem 1.2rem;
  border-radius: 0;
}
@media (max-width: 767px) {
  .event-section--2026 .event-title {
    padding: 0.4rem 2.4rem 0.8rem;
  }
}
.event-section--2026 .event-ellipse {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90rem;
  height: 70rem;
  transform: translate(-50%, 28%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(66, 49, 176, 0.55) 0%, rgba(66, 49, 176, 0.2) 38%, transparent 68%);
}
@media (max-width: 767px) {
  .event-section--2026 .event-ellipse {
    width: 50rem;
    height: 44rem;
  }
}
.event-section--2026 .event-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='60' viewBox='0 0 48 60'%3E%3Cpath d='M14 50 L34 10' fill='none' stroke='%23cfd0ee' stroke-width='5' stroke-opacity='0.13' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 4.8rem 6rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.event-section--2026 .row {
  position: relative;
  z-index: 1;
}

.attend-section .card {
  background: #4231b0;
  border-radius: 0;
}

.meet-section .card .name {
  text-transform: uppercase;
  border-radius: 0.6rem;
}
.meet-section .viewSpeakers button {
  width: auto;
}

.joinus-section {
  background: #0e083f;
}
.joinus-section .pattern {
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='60' viewBox='0 0 48 60'%3E%3Cpath d='M14 50 L34 10' fill='none' stroke='%23cfd0ee' stroke-width='5' stroke-opacity='0.13' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 4.8rem 6rem;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.joinus-section .pattern::before, .joinus-section .pattern::after {
  display: none;
}
.joinus-section .row {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Workshop landing page (pages/workshops/success-metrics)
   ============================================================ */
.workshop-hero {
  position: relative;
  overflow: hidden;
}
.workshop-hero .mesh {
  position: absolute;
  top: -300px;
  left: 5vw;
  z-index: -1;
  width: 2200px;
  object-fit: contain;
  animation: animation-mesh1 30s linear infinite alternate;
}
@media (max-width: 1279px) {
  .workshop-hero .mesh {
    max-width: unset;
    top: -200px;
    left: -25vw;
    width: 1500px;
  }
}
@media (max-width: 767px) {
  .workshop-hero .mesh {
    max-width: unset;
    top: -120px;
    left: -50vw;
    width: 1000px;
  }
}
.workshop-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.workshop-subtitle {
  color: #a4adfd;
  font-weight: 500;
}
.workshop-lede {
  max-width: 74rem;
}

/* Key facts row */
.workshop-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}
.workshop-fact {
  display: flex;
  flex-direction: column;
  min-width: 19.2rem;
  flex: 1 1 19.2rem;
  padding: 2rem 2.4rem;
  background: #f5f7ff;
  border: 1px solid #ebeeff;
  border-radius: 1.6rem;
}
.workshop-fact__label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.2rem;
  font-weight: 600;
  color: #6e69c8;
}
.workshop-fact__value {
  margin-top: 0.6rem;
  font-size: 2rem;
  font-weight: 700;
  color: #0e083f;
}
.workshop-fact__sub {
  margin-top: 0.25rem;
  font-size: 1.4rem;
  color: #50428b;
}

/* CTA button wrappers */
.workshop-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.workshop-cta--center {
  justify-content: center;
}

/* Problem cards */
.workshop-problems {
  margin-top: 0.8rem;
}
.workshop-problem {
  height: 100%;
  padding: 2.4rem;
  background: #ffffff;
  border: 1px solid #ebeeff;
  border-radius: 1.6rem;
  box-shadow: 0 8px 24px rgba(14, 8, 63, 0.05);
}
.workshop-problem h5 {
  color: #5744e7;
}
.workshop-problem p {
  color: #322a7a;
}

/* Takeaway / deliverable list items with check icon */
.workshop-takeaway {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.2rem 0;
}
.workshop-takeaway__icon {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  margin-top: 0.25rem;
}
.workshop-takeaway p {
  margin: 0;
}

/* Agenda numbered list */
.workshop-agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(235, 238, 255, 0.25);
}
.workshop-agenda-item:last-child {
  border-bottom: 1px solid rgba(235, 238, 255, 0.25);
}
.workshop-agenda-item__number {
  flex: 0 0 auto;
  font-size: 2.4rem;
  font-weight: 700;
  color: #a4adfd;
  line-height: 1.2;
}
.workshop-agenda-item__content h5 {
  color: #f3f3fb;
}

/* Audience pills */
.workshop-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.workshop-pill {
  display: inline-block;
  padding: 1rem 1.8rem;
  background: #ebeeff;
  color: #322a7a;
  border-radius: 3.2rem;
  font-weight: 600;
}

/* Instructor */
.workshop-instructor__photo {
  position: relative;
  max-width: 35rem;
}
.workshop-instructor__photo .profile {
  width: 100%;
  border-radius: 1.6rem;
  display: block;
}
.workshop-instructor__photo .shape-profile {
  position: absolute;
  right: -1.2rem;
  bottom: -1.2rem;
  width: 6.4rem;
  z-index: -1;
}

/* Final CTA yellow card: .joinus only darkens headings; darken body copy too */
.yellow-card .joinus p {
  color: #0e083f;
}

@media (max-width: 767px) {
  .workshop-facts { gap: 1.6rem; }
  .workshop-fact { flex: 1 1 100%; }
  .workshop-instructor__photo { margin: 0 auto; }
}

/* Workshop ticket title linking to its details page (pages/tickets) */
.workshop-details-link p {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.workshop-details-link:hover p {
  color: #5744e7;
}

/* Workshop listing cards (pages/workshops/index) */
/* Matches .conference-ticket on the tickets page: the listing sits on the same
   dark background, so a light card would both clash and swallow the inherited
   light body copy. */
.workshop-card-cell {
  margin-bottom: 2.4rem;
}
.workshop-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  background: #241c64;
  border: 2px solid #322a7a;
  border-radius: 0.4rem;
}
.workshop-card__trainer {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.workshop-card__trainer p {
  margin: 0;
}
.workshop-card__photo {
  width: 5.6rem;
  height: 5.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.workshop-card__title {
  color: #f3f3fb;
}
.workshop-card__title:hover {
  color: #a4adfd;
}
.workshop-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
/* Muted against the dark card: three bright chips would out-shout the title. */
.workshop-card__facts .workshop-pill {
  padding: 0.6rem 1.4rem;
  font-size: 1.4rem;
  background: #322a7a;
  color: #d5d9ff;
}
/* Push the button to the bottom so cards of unequal copy length line up. */
.workshop-card__cta {
  margin-top: auto;
}

/* ============================================================
   Prowpeller landing page (pages/prowpeller, pages/prowpeller/terms)
   ============================================================ */
.prowpeller-hero {
  position: relative;
  overflow: hidden;
}
.prowpeller-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/images/prowpeller/hero-pitch.webp");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
@media (max-width: 767px) {
  /* A narrow viewport crops the 3:2 photo hard, so anchor on the founder on
     stage (~40% across) rather than the empty right edge of the screen. */
  .prowpeller-hero__bg {
    background-image: url("/images/prowpeller/hero-pitch-mobile.webp");
    background-position: 40% center;
  }
}
/*
   The photo is teal-lit with a bright projector screen on the right, so it is
   both tinted towards the brand navy and darkened enough for white copy to hold
   contrast over the screen.
*/
.prowpeller-hero__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(14, 8, 63, 0.95) 0%, rgba(14, 8, 63, 0.89) 45%, rgba(14, 8, 63, 0.78) 100%);
}
.prowpeller-hero__bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20rem;
  background: linear-gradient(to top, #0e083f 25%, transparent 100%);
}
.prowpeller-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.prowpeller-lede {
  max-width: 74rem;
}

/* Apply CTA */
.prowpeller-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.prowpeller-cta button {
  width: auto;
}
.prowpeller-cta--center {
  align-items: center;
}
.prowpeller-cta__note {
  margin: 0;
}

/* Stats bar */
.prowpeller-stats {
  margin-top: 0.8rem;
}
.prowpeller-stat {
  height: 100%;
  padding: 2.4rem;
  background: #6e69c8;
  text-align: center;
}
.prowpeller-stat h5 {
  font-weight: 500;
}
@media (max-width: 767px) {
  .prowpeller-stat h2 {
    font-size: 4rem;
    line-height: 5.2rem;
  }
}

/* Eligibility callout */
.prowpeller-eligibility {
  padding: 3.2rem;
  background: rgba(87, 68, 231, 0.14);
  border: 1px solid rgba(164, 173, 253, 0.35);
  border-radius: 1.6rem;
}
@media (max-width: 767px) {
  .prowpeller-eligibility {
    padding: 2.4rem 2rem;
  }
}

/* Inline text links */
.prowpeller-link {
  color: #d9e868;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prowpeller-link:hover {
  color: #cee02f;
}
.prowpeller-link--dark {
  color: #0e083f;
}
.prowpeller-link--dark:hover {
  color: #322a7a;
}

/* Timeline steps */
.prowpeller-step {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(235, 238, 255, 0.25);
}
.prowpeller-step:last-child {
  border-bottom: 1px solid rgba(235, 238, 255, 0.25);
}
.prowpeller-step__number {
  flex: 0 0 auto;
  font-size: 2.4rem;
  font-weight: 700;
  color: #a4adfd;
  line-height: 1.2;
}
.prowpeller-step__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem 1.6rem;
}
.prowpeller-step__heading h5 {
  color: #f3f3fb;
}
.prowpeller-step__date {
  padding: 0.4rem 1.4rem;
  background: rgba(217, 232, 104, 0.16);
  border-radius: 10rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: #d9e868;
  white-space: nowrap;
}

/* Final CTA card */
.prowpeller-final-copy {
  max-width: 68rem;
}
.prowpeller-final-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* Terms placeholder */
.prowpeller-terms-placeholder {
  padding: 3.2rem;
  background: rgba(87, 68, 231, 0.14);
  border: 1px solid rgba(164, 173, 253, 0.35);
  border-radius: 1.6rem;
}
@media (max-width: 767px) {
  .prowpeller-terms-placeholder {
    padding: 2.4rem 2rem;
  }
}
.prowpeller-terms-updated {
  color: #a4adfd;
}

/* Table of contents */
.prowpeller-toc {
  padding: 3.2rem;
  background: rgba(87, 68, 231, 0.14);
  border: 1px solid rgba(164, 173, 253, 0.35);
  border-radius: 1.6rem;
}
.prowpeller-toc ul {
  /* The headings carry their own numbering, so markers would double it up. */
  list-style: none;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.prowpeller-toc li + li {
  margin-top: 0.8rem;
}
.prowpeller-toc a {
  color: #d9e868;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prowpeller-toc a:hover {
  color: #cee02f;
}
@media (max-width: 767px) {
  .prowpeller-toc {
    padding: 2.4rem 2rem;
  }
  .prowpeller-toc ul {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

/*
   Long-form terms body rendered from the page's HTML content. The global reset
   in resources/scss/_reset.scss zeroes every margin and padding, so the prose
   rhythm and the list indents have to be restated here, and the display-sized
   headings from _typography.scss have to be scaled down to clause size.
*/
.prowpeller-terms {
  font-size: 1.8rem;
  line-height: 2.8rem;
  color: #ebeeff;
}
.prowpeller-terms p {
  margin-bottom: 1.6rem;
}
.prowpeller-terms h3,
.prowpeller-terms h4,
.prowpeller-terms h5 {
  /* Clear the fixed header when an anchor from the contents list is followed. */
  scroll-margin-top: 14rem;
}
.prowpeller-terms h3 {
  margin: 4.8rem 0 1.6rem;
  font-size: 2.8rem;
  line-height: 3.8rem;
  font-weight: 600;
  color: #d9e868;
}
.prowpeller-terms > h3:first-child {
  margin-top: 0;
}
.prowpeller-terms h4 {
  margin: 3.2rem 0 1.2rem;
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 600;
}
.prowpeller-terms h5 {
  margin: 2.4rem 0 1.2rem;
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: 600;
}
.prowpeller-terms ul,
.prowpeller-terms ol {
  margin-bottom: 1.6rem;
  padding-left: 2.4rem;
}
.prowpeller-terms li + li {
  margin-top: 0.8rem;
}
.prowpeller-terms li > ul,
.prowpeller-terms li > ol {
  margin-top: 0.8rem;
  margin-bottom: 0;
}
.prowpeller-terms a {
  color: #d9e868;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prowpeller-terms a:hover {
  color: #cee02f;
}
@media (max-width: 767px) {
  .prowpeller-terms {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
  .prowpeller-terms h3,
  .prowpeller-terms h4,
  .prowpeller-terms h5 {
    scroll-margin-top: 10rem;
  }
  .prowpeller-terms h3 {
    margin-top: 3.2rem;
    font-size: 2.2rem;
    line-height: 3rem;
  }
  .prowpeller-terms h4 {
    font-size: 1.8rem;
    line-height: 2.6rem;
  }
  .prowpeller-terms h5 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}