/*
  ----------------------------------------
  Marketing layout and public page styles
  ----------------------------------------
*/

@layer styles {
  /* Homepage Hero
  ---------------------------------- */
  .ui-video-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(42rem, 78vh, 50rem);
    padding: clamp(5rem, 11vw, 7rem) var(--space-lg) clamp(4rem, 9vw, 5.5rem);
    overflow: hidden;
  }

  /* Full-bleed background video */
  .ui-video-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
  }

  /* Dark overlay so text is readable */
  .ui-video-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.7) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .ui-video-hero__content {
    position: relative;
    z-index: 10;
    width: min(100%, 62rem);
    margin: 0 auto;
    text-align: center;
  }

  .ui-video-hero__title {
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.95rem + 1.9vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--white);
  }

  .ui-video-hero__subtitle {
    margin-inline: auto;
    max-width: 42rem;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
    line-height: 1.5;
    color: var(--white);
    text-wrap: balance;
  }

  .ui-video-hero__search {
    width: min(100%, 28rem);
    margin: var(--space-lg) auto 0;
  }

  .ui-video-hero__search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .ui-video-hero__search-input {
    height: 2.625rem;
    width: 100%;
    min-width: 0;
    padding: 0 0.875rem;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: var(--rounded-md);
    background: rgb(255 255 255 / 0.96);
    color: var(--darker);
    font-size: 1rem;
    line-height: 1.5rem;

    &::placeholder {
      color: var(--gray-500);
    }

    &:focus {
      outline: none;
      border-color: rgb(255 255 255 / 0.6);
      box-shadow: 0 0 0 3px rgb(255 255 255 / 0.15);
    }
  }

  .ui-video-hero__search-button {
    min-width: 4.75rem;
    height: 2.625rem;
    box-shadow: var(--shadow-sm);
  }

  .ui-video-hero__sponsors {
    position: relative;
    z-index: 10;
    width: min(100%, 62rem);
    margin-top: clamp(2.5rem, 6vw, 4rem);
  }

  .ui-video-hero__sponsors-title {
    margin: 0 auto 1.25rem;
    width: fit-content;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--white);
  }

  .ui-video-hero__sponsors-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 3.5rem;
  }

  .ui-video-hero__sponsors-viewport {
    width: 100%;
    min-width: 0;
  }

  .ui-video-hero__sponsor-slide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
  }

  .ui-video-hero__sponsor-slide[hidden] {
    display: none;
  }

  .ui-video-hero__sponsor-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .ui-video-hero__sponsor-card {
    height: 7.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ui-video-hero__sponsor-image {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: 4px solid rgb(255 255 255 / 0.95);
    border-radius: 0.625rem;
    object-fit: contain;
  }

  .ui-video-hero__sponsor-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--white);
  }

  .ui-video-hero__sponsors-nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: opacity 120ms ease, transform 120ms ease;
    transform: translateY(-50%);

    &:first-of-type {
      left: 0;
    }

    &:last-of-type {
      right: 0;
    }

    &:hover {
      opacity: 0.8;
    }

    &:active {
      transform: translateY(-50%) scale(0.96);
    }
  }

  /* General section wrapper */
  .ui-marketing-band {
    width: 100%;
  }

  /* Upcoming Tournaments
  ---------------------------------- */

  .ui-featured-events__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: var(--space-lg);
    text-align: center;
  }

  .ui-featured-events__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.75rem);
    font-weight: 700;
    line-height: 0.95;
    color: var(--darker);
    text-transform: none;
  }

  .ui-featured-events__filter {
    position: relative;
    margin: 0;

    &[open] {
      .ui-featured-events__state-icon {
        transform: rotate(180deg);
      }
    }
  }

  .ui-featured-events__state-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .ui-featured-events__state-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding-bottom: 0.125rem;
    border-bottom: 3px solid var(--darker);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--darker);
  }

  .ui-featured-events__state-icon {
    display: inline-flex;
    align-items: center;
    color: var(--darker);
    transition: transform 120ms ease;
  }

  .ui-featured-events__state-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    z-index: 20;
    min-width: 14rem;
    max-height: 15rem;
    padding: 0.375rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
    display: grid;
    gap: 0.125rem;
    overflow-y: auto;
    transform: translateX(-50%);
  }

  .ui-featured-events__state-option {
    display: block;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    color: #374151;

    &:hover,
    &.is-active {
      background: #f4f4f5;
      color: var(--darker);
    }
  }

  .ui-featured-event-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4375rem;
    align-items: stretch;
    width: min(100%, 70rem);
    margin-inline: auto;
  }

  .ui-featured-event-card {
    min-height: 8.5rem;
    padding: 2.625rem 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f4f4f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;

    &:hover {
      border-color: rgb(27 58 126 / 0.24);
      box-shadow: 0 8px 24px rgb(15 23 42 / 0.08);
      transform: translateY(-1px);
    }
  }

  .ui-featured-event-card--empty {
    grid-column: 1 / -1;
    pointer-events: none;
  }

  .ui-featured-event-card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
    color: var(--darker);
  }

  .ui-featured-event-meta {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    color: #374151;
  }

  .ui-featured-events__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
  }

  /* Results Snapshot
  ---------------------------------- */
  .ui-results-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3125rem;
    align-items: start;
  }

  .ui-results-snapshot {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
  }

  .ui-results-snapshot__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .ui-results-snapshot__eyebrow { margin: 0; }

  .ui-results-snapshot__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.7rem + 1.2vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--darker);
  }

  .ui-results-snapshot-table {
    tbody td {
      font-size: 1rem;
      line-height: 1.5;
      color: #344054;
    }
  }

  .ui-results-snapshot-table__points {
    width: 6rem;
    text-align: right !important;
  }

  .ui-results-snapshot-table__identifier {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #475467;
  }

  .ui-results-snapshot-table__empty {
    text-align: center !important;
    color: #667085;
  }

  .ui-results-snapshot__cta {
    display: flex;
  }

  /* Lead Local CTA
  ---------------------------------- */
  .ui-image-cta {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    min-height: 25.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    isolation: isolate;
  }

  .ui-image-cta__image,
  .ui-image-cta__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .ui-image-cta__image {
    object-fit: cover;
  }

  .ui-image-cta__backdrop {
    background: linear-gradient(0deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5));
  }

  .ui-image-cta__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: min(100%, 40rem);
    text-align: center;
    color: var(--white);
  }

  .ui-image-cta__eyebrow { margin: 0; }

  .ui-image-cta__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2rem + 1.8vw, 4rem);
    font-weight: 700;
    line-height: 0.95;
    color: var(--white);
  }

  .ui-image-cta__copy {
    font-size: 1rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.92);
  }

  /* Angler Benefits
  ---------------------------------- */
  .ui-benefit-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding: 5.25rem 1.75rem;
    border-radius: 0.5rem;
    background: #f4f4f5;
  }

  .ui-benefit-showcase__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: min(100%, 40rem);
    text-align: center;
  }

  .ui-benefit-showcase__eyebrow { margin: 0; }

  .ui-benefit-showcase__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2.1rem + 1.5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--darker);
  }

  .ui-benefit-showcase__copy {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--darker);
  }

  .ui-benefit-showcase__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6875rem;
    width: 100%;
  }

  .ui-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    min-height: 7.875rem;
    padding: 1.3125rem 0.6875rem;
    border-radius: 0.5rem;
    background: var(--white);
    text-align: center;
  }

  .ui-benefit-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: #162d5c;
    color: var(--white);
  }

  .ui-benefit-card__icon {
    stroke-width: 2.2;
  }

  .ui-benefit-card__title {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 11rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--darker);
  }

  /* Social Channels
  ---------------------------------- */
  .ui-social-showcase {
    padding: 2.5rem 1.75rem;
    border-radius: 0.5rem;
    background: #ece9e6;
  }

  .ui-social-showcase__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr);
    gap: 2rem;
    padding: 2rem 1.75rem;
    background: var(--white);
    border: 1px solid #e7e5e4;
    box-shadow: inset 0 0 0 1px #f5f5f4;
  }

  .ui-social-showcase__column {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    min-width: 0;
  }

  .ui-social-showcase__channel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #ececec;
  }

  .ui-social-showcase__channel-meta {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
  }

  .ui-social-showcase__channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: var(--white);
    flex-shrink: 0;
  }

  .ui-social-showcase__channel-icon--youtube {
    background: #ff0000;
  }

  .ui-social-showcase__channel-icon--facebook {
    background: #1877f2;
  }

  .ui-social-showcase__channel-label {
    line-height: 1.25rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ui-social-showcase__channel-link {
    color: #dc2626;
    line-height: 1.25rem;
    margin-left: auto;
  }

  .ui-social-showcase__embed-shell {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
  }

  .ui-social-showcase__embed {
    display: block;
    width: 100%;
    border: 0;
  }

  .ui-social-showcase__embed--youtube {
    aspect-ratio: 16 / 9;
    min-height: 12rem;
  }

  .ui-social-showcase__video-stack {
    gap: 1rem;
  }

  .ui-social-showcase__video-list {
    gap: 0.875rem;
  }

  .ui-social-showcase__channel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d6d3d1;
    border-radius: 999px;
    background: var(--white);
    color: var(--darker);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0.5rem 1rem rgb(15 23 42 / 0.04);
  }

  .ui-media-card {
    display: flex;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
  }

  .ui-media-card--featured {
    flex-direction: column;
    gap: 0.875rem;
  }

  .ui-media-card--compact {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.875rem;
  }

  .ui-media-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #0f172a;
    aspect-ratio: 16 / 9;
  }

  .ui-media-card__media--featured {
    min-height: 26rem;
    border-radius: 1rem;
  }

  .ui-media-card__media--compact {
    width: 8.5rem;
    min-height: 0;
  }

  .ui-media-card__badge {
    position: absolute;
    inset: 0.75rem auto auto 0.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    background: rgb(15 23 42 / 0.92);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ui-media-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ui-media-card__play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: rgb(220 38 38 / 0.95);
    color: var(--white);
    box-shadow: 0 1rem 2rem rgb(15 23 42 / 0.3);
  }

  .ui-media-card__play--compact {
    width: 2.5rem;
    height: 2.5rem;
  }

  .ui-media-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }

  .ui-media-card__body--featured {
    gap: 0.4rem;
  }

  .ui-media-card__title {
    margin: 0;
    font-size: 1.025rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--darker);
  }

  .ui-media-card__title--featured {
    font-size: 1.55rem;
    line-height: 1.2;
  }

  .ui-media-card__meta {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #64748b;
  }

  .ui-media-player {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .ui-media-player__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--darker);
  }

  .ui-social-showcase__embed--player {
    aspect-ratio: 16 / 9;
    min-height: min(70vh, 40rem);
  }

  .ui-social-showcase__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42rem;
    border: 2px dashed #cbd5e1;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  }

  .ui-social-showcase__placeholder-label {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #64748b;
  }

  /* Recruitment Poster
  ---------------------------------- */
  .ui-sam-bass-challenge-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 32rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(12rem, 26vw, 18rem);
    overflow: hidden;
    border-radius: 1.25rem;
    isolation: isolate;
    background: #081248;
    box-shadow: 0 0.5rem 1.25rem rgb(15 23 42 / 0.08);
    color: white;
    text-decoration: none;
  }

  .ui-sam-bass-challenge-banner:hover {
    color: white;
    text-decoration: none;
  }

  .ui-sam-bass-challenge-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(3 8 32 / 0.56) 0%, rgb(5 12 44 / 0.8) 45%, rgb(8 18 72 / 0.97) 100%);
    z-index: 1;
  }

  .ui-sam-bass-challenge-banner__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ui-sam-bass-challenge-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: clamp(1.5rem, 3vw, 2rem);
    color: white;
  }

  .ui-sam-bass-challenge-banner__copy {
    min-width: 0;
  }

  .ui-sam-bass-challenge-banner__eyebrow {
    margin: 0;
    color: white;
    font-size: clamp(0.625rem, 1vw, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
  }

  .ui-sam-bass-challenge-banner__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    color: white;
  }

  .ui-sam-bass-challenge-banner__cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.375rem;
    padding: 0.875rem 1.125rem;
    border-radius: 0.75rem;
    background: var(--brand-navy);
    color: white;
    font-size: clamp(0.6875rem, 0.95vw, 0.875rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 150ms ease, filter 150ms ease;
  }

  .ui-sam-bass-challenge-banner__cta:hover {
    color: white;
    filter: brightness(1.1);
  }

  .ui-sam-bass-challenge-banner__cta:active {
    transform: scale(0.98);
  }

  .ui-sam-bass-challenge-banner__cta-icon {
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .ui-sam-bass-challenge-banner__content {
      flex-direction: column;
      align-items: flex-start;
    }
  }


  /* Sponsors
  ---------------------------------- */
  .ui-sponsor-strip,
  .ui-marketing-page__sponsors {
    width: 100%;
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
    border-radius: 0.5rem;
    background: var(--lighter);
  }
  .ui-tournament-page__layout {
    display: grid;
    align-items: start;
  }

  .ui-tournament-page__layout {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  }

  .ui-tournament-page__layout--single {
    grid-template-columns: 1fr;
  }

  .ui-tournament-page__layout > * {
    min-width: 0;
  }

  .ui-division-page__year-filter {
    max-width: 16rem;
  }

  .ui-division-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    align-items: start;
  }

  .ui-division-page__layout > * {
    min-width: 0;
  }

  .ui-division-page__next-row > * {
    min-width: 0;
  }

  .ui-tournament-page__details,
  .ui-division-page__info {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  /* Newsletter
  ---------------------------------- */
  .ui-newsletter-signup {
    margin: 0 auto;
    padding: 5.25rem 1.75rem;
    background: #f4f4f5;
    border-radius: 0.5rem;
  }

  .ui-newsletter-signup__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3125rem;
    max-width: 66.5rem;
    margin: 0 auto;
    text-align: center;
  }

  .ui-newsletter-signup__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: 48rem;
  }

  .ui-newsletter-signup__eyebrow {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-transform: uppercase;
    color: #909090;
  }

  .ui-newsletter-signup__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.5rem;
    color: #27272a;
  }

  .ui-newsletter-signup__copy {
    margin: 0;
    max-width: 48rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #27272a;
  }

  .ui-newsletter-signup__form {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    max-width: 33.75rem;
  }

  .ui-newsletter-signup__field {
    width: 100%;
    min-width: 0;
    height: 2.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #f9fafb;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #374151;
  }

  .ui-newsletter-signup__field::placeholder {
    color: #4b5563;
  }

  .ui-newsletter-signup__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.625rem;
    padding: 0.6875rem 0.875rem;
    border: 0;
    border-radius: 0.375rem;
    background: #162d5c;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--white);
  }

  /* Responsive overrides — single-column on narrow screens */
  @media (max-width: 36rem) { /* --bp-sm */
    .ui-feature-card { max-width: 100%; }

    .ui-news-grid {
      flex-direction: column;
    }

    .ui-news-main,
    .ui-news-sidebar {
      flex: 1 1 auto;
      width: 100%;
    }

    .ui-article-row {
      flex-direction: column;

      .ui-article-thumb { width: 100%; min-height: 8rem; }
    }

    .ui-newsletter-signup {
      padding: 3rem 1rem;
    }

    .ui-newsletter-signup__form {
      flex-direction: column;
      align-items: stretch;
    }

    .ui-newsletter-signup__button {
      width: 100%;
      justify-content: center;
    }

    .ui-tournament-page__details {
      grid-template-columns: 1fr;
    }

    .ui-division-page__year-filter {
      max-width: 100%;
    }

    .ui-division-page__meta {
      gap: var(--space-2xs);
    }

    .ui-division-page__next-row {
      flex-direction: column;
      align-items: stretch;
    }

    .ui-division-page__next-action .ui-button,
    .ui-division-page__next-action form {
      width: 100%;
    }

    .ui-division-page__next-action .ui-button {
      justify-content: center;
    }

    .ui-division-page__info {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 56rem) { /* --bp-lg */
    .ui-tournament-page__layout {
      grid-template-columns: 1fr;
    }

    .ui-division-page__layout {
      grid-template-columns: 1fr;
    }

    .ui-division-page__sidebar {
      order: -1;
    }
  }

  .ui-featured-events {
    scroll-margin-top: calc(4rem + var(--space-md));
  }

  /* Marketing Header
  ---------------------------------- */
  .ui-marketing-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--brand-1-900);
    border-bottom: 1px solid var(--brand-1-900);
    padding: 0.75rem 0;
  }

  .ui-marketing-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 2.8975rem;
   gap: 1.5rem;
   width: 100%;
  }

  .ui-marketing-nav__logo {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   text-decoration: none;
   color: var(--white);
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.5rem;

   img {
     height: 2.8975rem;
     width: auto;
   }

   span {
     white-space: nowrap;
   }
  }

  .ui-marketing-nav__desktop-content {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   min-width: 0;
  }

  .ui-marketing-nav__links {
   display: flex;
   align-items: center;
   gap: 1.3125rem;
   padding: 0;
   margin: 0;

   li {
     display: flex;
     align-items: center;
   }

   a {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 0.9375rem;
     line-height: 1.25rem;
     color: var(--white);
     text-decoration: none;
     white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: 0;

     &:hover { color: rgb(255 255 255 / 0.78); }
   }
  }

  .ui-marketing-nav__actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
  }

  .ui-marketing-nav__action-form {
   display: flex;
  }

  .ui-marketing-nav__cta {
   min-width: 9.625rem;
   font-size: 0.9375rem;
   font-weight: 500;
   letter-spacing: 0;
   text-transform: none;
   white-space: nowrap;
   box-shadow: var(--shadow-sm);
  }

  .ui-marketing-nav__secondary-action {
   min-width: 4.625rem;
   background: var(--white);
   color: var(--secondary-text);
   box-shadow: var(--shadow-sm);

   &:hover {
     background: var(--white) !important;
     color: var(--brand-1) !important;
   }
  }

  .ui-marketing-nav__toggle {
   display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: var(--rounded-full);
    background: rgb(255 255 255 / 0.05);
    color: var(--white);
    cursor: pointer;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      transform 180ms ease;

    &:hover {
      border-color: rgb(255 255 255 / 0.3);
      background: rgb(255 255 255 / 0.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .ui-marketing-nav__toggle-icon {
    display: block;
  }

  /* Responsive: collapse nav a bit earlier for the marketing header */
  @media (max-width: 64rem) { /* --bp-xl */
    .ui-marketing-nav__desktop-content {
      display: none;
    }

    .ui-marketing-nav__toggle {
      display: inline-flex;
    }

    .ui-featured-event-grid {
      grid-template-columns: 1fr;
    }

    .ui-results-snapshot-grid {
      grid-template-columns: 1fr;
    }

    .ui-benefit-showcase__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-social-showcase__panel {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 48rem) { /* --bp-md */
    .ui-video-hero {
      min-height: auto;
      padding-block: 4.5rem 3.5rem;
    }

    .ui-video-hero__search-row {
      flex-direction: column;
    }

    .ui-video-hero__search-button {
      width: 100%;
    }

    .ui-video-hero__sponsors-shell {
      padding-inline: 0;
    }

    .ui-video-hero__sponsor-slide {
      grid-template-columns: 1fr;
    }

    .ui-video-hero__sponsors-nav {
      display: none;
    }

    .ui-featured-events__state-label {
      font-size: clamp(1.375rem, 7vw, 1.875rem);
    }

    .ui-image-cta {
      min-height: 22rem;
      padding: 1.5rem;
    }

    .ui-benefit-showcase {
      padding: 3rem 1rem;
    }

    .ui-benefit-showcase__grid {
      grid-template-columns: 1fr;
    }

    .ui-social-showcase {
      padding: 1rem;
    }

    .ui-social-showcase__panel {
      padding: 1rem;
    }

    .ui-social-showcase__channel-header {
      flex-direction: column;
      align-items: start;
    }

    .ui-social-showcase__channel-meta {
      width: 100%;
    }

    .ui-social-showcase__channel-link {
      margin-left: 0;
    }

    .ui-media-card--compact {
      grid-template-columns: 1fr;
    }

    .ui-social-showcase__embed--youtube {
      min-height: 16rem;
    }

    .ui-media-card__media--featured {
      min-height: 16rem;
    }

    .ui-marketing-nav__logo {
      span {
        font-size: 0.9375rem;
      }

      img {
        height: 2.5rem;
      }
    }
  }

  .ui-marketing-mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgb(17 24 39 / 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease;

    @media (min-width: 64.01rem) { /* above --bp-xl */
      display: none;
    }

    [data-ui-hamburger-open-value="true"] & {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .ui-marketing-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    color: var(--white);
    pointer-events: none;

    @media (min-width: 64.01rem) { /* above --bp-xl */
      display: none;
    }
  }

  .ui-marketing-mobile-menu__panel {
    /* 1. LOCK TO THE RIGHT SCREEN EDGE */
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999; /* Ensure it stays above page content */

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: min(30rem, 95vw);
    height: 100dvh;
    max-height: 100dvh;
    background:
      radial-gradient(circle at 85% 0%, rgb(172 9 24 / 0.24) 0%, transparent 55%),
      radial-gradient(circle at 0% 100%, rgb(172 9 24 / 0.18) 0%, transparent 50%),
      linear-gradient(180deg, var(--brand-1-900) 0%, var(--brand-1) 100%);
    border-left: 1px solid rgb(255 255 255 / 0.08);
    overflow: hidden;
    pointer-events: auto;
    will-change: transform, opacity;

    /* 2. HIDE OFFSCREEN TO THE RIGHT */
    opacity: 0;
    transform: translateX(100%);
    box-shadow: none;

    /* 3. TRANSITION MECHANICS */
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 420ms ease,
      box-shadow 420ms ease;

    /* 4. SLIDE IN TO THE LEFT */
    [data-ui-hamburger-open-value="true"] & {
      opacity: 1;
      transform: translateX(0);
      box-shadow: -24px 0 48px rgb(2 20 56 / 0.45);
    }
  }

  @media (max-width: 30rem) {
    .ui-marketing-mobile-menu__panel {
      max-width: 100vw;
      min-width: 0;
      border-left: 0;
    }

    .ui-marketing-mobile-menu__nav {
      padding-inline: var(--space-sm);
    }

    .ui-marketing-mobile-menu__footer {
      padding-inline: var(--space-sm);
    }

    .ui-marketing-mobile-menu__link-text {
      font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
      white-space: normal;
    }
  }

  @media (max-width: 40rem) {
    .ui-marketing-mobile-menu__action {
      width: 100%;
      min-height: 2.875rem;
      font-size: 0.6875rem;
      letter-spacing: 0.14em;
    }

    .ui-marketing-mobile-menu__eyebrow {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .ui-marketing-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: var(--space-sm);
    min-height: 4rem;
    padding: 0 var(--space-sm);
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
    opacity: 0;
    transform: translateX(1.25rem);
    transition:
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 240ms ease;
    transition-delay: 0ms;

    [data-ui-hamburger-open-value="true"] & {
      opacity: 1;
      transform: translateX(0);
      transition-delay: 80ms;
    }
  }

  .ui-marketing-mobile-menu__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;

    img {
      width: 2.25rem;
      max-height: 2.25rem;
    }
  }

  .ui-marketing-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--rounded-full);
    background: rgb(255 255 255 / 0.05);
    color: var(--white);
    cursor: pointer;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      transform 180ms ease;

    &:hover {
      border-color: rgb(255 255 255 / 0.4);
      background: rgb(255 255 255 / 0.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .ui-marketing-mobile-menu__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    opacity: 0;
    transition: opacity 220ms ease;

    [data-ui-hamburger-open-value="true"] & {
      opacity: 1;
      transition-delay: 120ms;
    }
  }

  .ui-marketing-mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .ui-marketing-mobile-menu__item {
    transform: translateX(1.5rem);
    opacity: 0;
    transition:
      transform 420ms ease,
      opacity 420ms ease;

    [data-ui-hamburger-open-value="true"] & {
      transform: translateX(0);
      opacity: 1;
      transition-delay: calc(120ms + (var(--item-index) * 70ms));
    }
  }

  .ui-marketing-mobile-menu__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
    color: var(--white);
    text-decoration: none;
    transition: border-color 180ms ease;

    &:hover {
      border-color: rgb(255 255 255 / 0.28);
    }
  }

  .ui-marketing-mobile-menu__link-meta {
    color: rgb(255 255 255 / 0.45);
    font-size: 0.75rem;
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }

  .ui-marketing-mobile-menu__link-text {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.2813rem + 1.0938vw, 1.9375rem);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ui-marketing-mobile-menu__link-icon {
    color: var(--error);
    opacity: 0.4;
    transform: translateX(-0.5rem);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .ui-marketing-mobile-menu__link:hover .ui-marketing-mobile-menu__link-icon {
    opacity: 1;
    transform: translateX(0);
  }

  .ui-marketing-mobile-menu__footer {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    border-top: 1px solid rgb(255 255 255 / 0.1);
    overflow-x: clip;
    opacity: 0;
    transform: translateX(1.25rem);
    transition:
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 240ms ease;

    [data-ui-hamburger-open-value="true"] & {
      opacity: 1;
      transform: translateX(0);
      transition-delay: 180ms;
    }
  }

  .ui-marketing-mobile-menu__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    width: 100%;
    min-width: 0;
  }

  .ui-marketing-mobile-menu__action-form {
    display: contents;
  }

  .ui-marketing-mobile-menu__action {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--rounded-full);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      transform 180ms ease;

    &:active {
      transform: scale(0.98);
    }
  }

  .ui-marketing-mobile-menu__action--secondary {
    background: rgb(255 255 255 / 0.05);

    &:hover {
      border-color: rgb(255 255 255 / 0.4);
      background: rgb(255 255 255 / 0.1);
    }
  }

  .ui-marketing-mobile-menu__action--primary {
    border-color: transparent;
    background: var(--error);
    box-shadow: 0 18px 40px -12px rgb(172 9 24 / 0.7);

    &:hover {
      background: var(--error-dark);
    }
  }

  .ui-marketing-mobile-menu__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    color: rgb(255 255 255 / 0.45);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    flex-wrap: wrap;
  }

  .ui-marketing-mobile-menu__eyebrow span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Marketing Footer
  ---------------------------------- */
  .ui-marketing-footer {
    margin-top: var(--space-xl);
  }

  .ui-marketing-footer__sponsors {
    width: 100%;
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: var(--lighter);
  }

  .ui-marketing-footer__body {
    position: relative;
    background: var(--brand-1-900);
    border-top: 1px solid var(--brand-1-900);
    padding: var(--space-xl) 0;
  }

  .ui-marketing-footer--spaced {
    margin-top: var(--space-2xl);
  }

  .ui-marketing-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) max-content max-content;
    gap: var(--space-xl);
    align-items: start;
  }

  .ui-marketing-footer__brand {
    min-width: 0;
    .main-logo--footer {
      max-height: 2.5rem;
      height: auto;
      width: auto;
    }
  }

  .ui-marketing-footer__heading {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--white);
  }

  .ui-marketing-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    a {
      white-space: nowrap;
      text-decoration: none;

      &:hover {
        color: var(--white);
      }
    }
  }

  .ui-marketing-footer__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Pill-style tag badge */
  .ui-marketing-footer__tag {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--midtone);
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--light);
    border-radius: var(--rounded-full);
    padding: 0.2rem 0.6rem;

    &:hover {
      color: var(--brand-1);
      border-color: var(--brand-1);
    }
  }

  /* Back-to-top circular button */
  .ui-back-to-top {
    position: absolute;
    top: calc(-1.5rem);
    right: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--rounded-full);
    background: var(--error);
    color: var(--white);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background 0.15s ease;

    &:hover { background: var(--error-dark); color: var(--white); }
  }

  @media (max-width: 48rem) { /* --bp-md */
    .ui-marketing-footer__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 36rem) { /* --bp-sm */
    .ui-marketing-footer__grid { grid-template-columns: 1fr; }
  }

  /* About Page
  ---------------------------------- */
  .ui-page-hero-shell {
    position: relative;
    z-index: 3;
  }

  .ui-page-hero-shell--with-badge {
    margin-bottom: clamp(4rem, 6vw, 5.5rem);
  }

  .ui-page-hero-shell--with-inline-badge {
    margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
  }

  .ui-page-hero {
    position: relative;
    overflow: hidden;
    background: var(--brand-1-900);
    color: var(--white);
    min-height: 17.5rem;
  }

  .ui-page-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: var(--lighter);
  }

  .ui-page-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / 0.5);
  }

  .ui-page-hero__inner {
    position: relative;
    z-index: 1;
    min-height: 17.5rem;
    display: flex;
    align-items: center;
    padding: var(--container-padding);
  }

  .ui-page-hero--inline-badge {
    overflow: visible;
  }

  .ui-page-hero-overhang {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: min(100%, var(--container-max));
    padding: var(--container-padding);
    z-index: 4;
    pointer-events: none;
  }

  .ui-page-hero__badge {
    width: clamp(8.5rem, 11vw, 11rem);
    height: clamp(8.5rem, 11vw, 11rem);
    aspect-ratio: 1;
    border-radius: var(--rounded-full);
    background: var(--white);
    border: 7px solid var(--brand-1-900);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.85rem, 1.2vw, 1rem);
    transform: translateY(22%);
    pointer-events: auto;
    flex-shrink: 0;
  }

  .ui-page-hero__logo {
    width: auto;
    height: clamp(6rem, 7vw, 7.75rem);
    max-height: none;
  }

  .ui-page-hero__copy {
    width: 100%;
    text-align: left;
  }

  .ui-page-hero__content-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 2.25vw, 2rem);
    max-width: 100%;
    transform: translateY(clamp(1.5rem, 4vw, 2.75rem));
  }

  .ui-page-hero__title,
  .ui-story-section-header .ui-marketing-section-header__title {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .ui-page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.35rem + 1.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    color: var(--white);
    text-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  }

  .ui-page-hero__badge--inline {
    width: 12.5rem;
    height: 12.5rem;
    transform: translateY(clamp(1rem, 3vw, 2.5rem));
    box-shadow: none;
  }

  .ui-page-hero__logo--inline {
    height: 7.75rem;
  }

  .ui-page-hero__title--inline {
    text-align: left;
  }

  .ui-marketing-page {
    --ui-marketing-section-gap: clamp(3.5rem, 5vw, 4.5rem);
    background: var(--white);
  }

  .ui-marketing-root {
    min-height: 100%;
    font-family: var(--font-body);
  }

  .ui-marketing-layout {
    min-height: 100dvh;
    width: 100%;
    overflow-x: clip;
  }

  .ui-marketing-layout #user-main {
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
    min-width: 0;
  }

  .ui-marketing-layout .container {
    width: min(100%, calc(var(--container-max) + (var(--space-lg) * 2)));
    max-width: 100%;
    margin-inline: auto;
    padding: var(--container-padding);
    box-sizing: border-box;
  }

  .ui-marketing-layout .ui-page-hero__inner,
  .ui-marketing-layout .ui-page-hero-overhang,
  .ui-marketing-layout .ui-marketing-footer {
    box-sizing: border-box;
    max-width: 100%;
  }

  .ui-marketing-page__body {
    padding-block: var(--space-lg);
  }

  .ui-marketing-page__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .ui-marketing-page__content > .ui-marketing-band {
    padding-block: 0;
  }

  .ui-marketing-page__content--narrow {
    width: min(100%, 48rem);
    margin: 0 auto;
    gap: var(--space-lg);
  }

  .ui-marketing-page__content--compact {
    gap: var(--space-lg);
  }

  /* Tournaments Index
  ---------------------------------- */
  .ui-competition-overview__section,
  .ui-competition-overview__faq {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .ui-competition-overview__section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 48rem;
  }

  .ui-competition-overview__eyebrow,
  .ui-competition-overview__final-eyebrow {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.25rem;
    text-transform: uppercase;
    color: #909090;
  }

  .ui-competition-overview__title,
  .ui-competition-overview__faq-title,
  .ui-competition-overview__director-title,
  .ui-competition-overview__final-title {
    margin: 0;
    color: #27272a;
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
  }

  .ui-competition-overview__intro,
  .ui-competition-overview__director-copy,
  .ui-competition-overview__final-copy {
    margin: 0;
    max-width: 42rem;
    color: #71717a;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ui-competition-overview__search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .ui-competition-overview__filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .ui-competition-overview__search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .ui-competition-overview__search-field {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #d4d4d8;
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--darker);
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-competition-overview__filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-competition-overview__filter-control {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .ui-competition-overview__filter-label {
    color: #71717a;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ui-competition-overview__filter-select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #d4d4d8;
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--darker);
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-competition-overview__pagination {
    display: flex;
    justify-content: flex-end;
  }

  .ui-competition-overview__workflow {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 0.75rem;
    background: #f4f4f5;
  }

  .ui-competition-overview__workflow-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  .ui-competition-overview__workflow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ui-competition-overview__workflow-card,
  .ui-competition-overview__benefit-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.125rem;
    border-radius: 0.5rem;
    background: var(--white);
  }

  .ui-competition-overview__workflow-card {
    align-items: center;
    justify-content: center;
    min-height: 6.75rem;
    text-align: center;
  }

  .ui-competition-overview__workflow-icon,
  .ui-competition-overview__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: #e4e4e7;
    color: #71717a;
  }

  .ui-competition-overview__workflow-title,
  .ui-competition-overview__coverage-title,
  .ui-competition-overview__benefit-title {
    margin: 0;
    color: #27272a;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .ui-competition-overview__coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
  }


  .ui-competition-overview__coverage-media {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    min-height: 0;
  }

  .ui-competition-overview__coverage-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease;
  }

  .ui-competition-overview__coverage-media img.is-active {
    opacity: 1;
    visibility: visible;
  }

  .ui-competition-overview__coverage-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .ui-competition-overview__coverage-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    padding: 1rem 1.125rem;
    border: 0;
    border-radius: 0.5rem;
    background: #f4f4f5;
    color: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 120ms ease, transform 120ms ease;
  }

  .ui-competition-overview__coverage-card:hover {
    background: #e4e4e7;
  }

  .ui-competition-overview__coverage-card:focus-visible {
    outline: 2px solid var(--brand-1-900);
    outline-offset: 2px;
  }

  .ui-competition-overview__coverage-card.is-active {
    background: var(--brand-1-900);
  }

  .ui-competition-overview__coverage-card.is-active .ui-competition-overview__coverage-title,
  .ui-competition-overview__coverage-card.is-active .ui-competition-overview__coverage-copy {
    color: var(--white);
  }

  .ui-competition-overview__coverage-copy,
  .ui-competition-overview__benefit-copy {
    margin: 0;
    color: #52525b;
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .ui-competition-overview__benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ui-competition-overview__director-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.75rem 1.5rem;
    border-radius: 0.75rem;
    background: #f4f4f5;
    text-align: center;
  }

  .ui-competition-overview__director-title,
  .ui-competition-overview__director-copy,
  .ui-competition-overview__final-title,
  .ui-competition-overview__final-copy {
    max-width: 42rem;
    text-align: center;
  }

  .ui-competition-overview__final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.75rem 1.5rem;
    border-radius: 0.75rem;
    background: var(--brand-1-900);
    text-align: center;
  }

  .ui-competition-overview__final-eyebrow,
  .ui-competition-overview__final-title,
  .ui-competition-overview__final-copy {
    color: var(--white);
  }

  .ui-competition-overview__final-copy {
    color: rgb(255 255 255 / 0.84);
  }

  /* Standings page
  ---------------------------------- */
  .ui-rankings__content {
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  .ui-rankings__section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .ui-rankings__filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: none;
  }

  .ui-rankings__search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .ui-rankings__search {
    position: relative;
    display: flex;
    width: 100%;
    max-width: none;
  }

  .ui-rankings__search-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .ui-rankings__search-input,
  .ui-rankings__filter-select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: var(--darker);
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-rankings__search-input {
    padding-left: 2.625rem;
  }

  .ui-rankings__search-input:focus,
  .ui-rankings__filter-select:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 3px rgb(226 232 240 / 0.8);
  }

  .ui-rankings__filter-select {
    padding-right: 2.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1rem;
  }

  .ui-rankings__filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    align-items: end;
  }

  .ui-rankings__filter-control {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .ui-rankings__filter-control--wide {
    grid-column: span 2;
  }

  .ui-rankings__filter-label {
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .ui-rankings__filter-action {
    display: flex;
    align-items: flex-end;
  }

  .ui-rankings__clear {
    min-width: 4.25rem;
  }

  .ui-rankings__division-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid #a1a1aa;
    border-radius: 0.75rem;
    background: var(--white);
  }

  .ui-rankings__division-title {
    margin: 0;
    color: #27272a;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.28rem + 0.8vw, 2rem);
    font-weight: 700;
    line-height: 1;
  }

  .ui-rankings__division-meta {
    margin: 0.5rem 0 0;
    color: #909090;
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-rankings__table th {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .ui-rankings__table th:last-child,
  .ui-rankings__table td:last-child {
    text-align: right;
  }

  .ui-rankings__table td {
    vertical-align: top;
  }

  .ui-rankings__place {
    color: #334155;
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
  }

  .ui-rankings__team-name {
    color: #334155;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
  }

  .ui-rankings__team-id {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .ui-rankings__points {
    color: var(--brand-1-900);
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .ui-rankings__empty {
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background: #f4f4f5;
    color: #52525b;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ui-rankings__benefits-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* Regionals page
  ---------------------------------- */
  .ui-qualifier__content {
    gap: var(--space-lg);
  }

  .ui-qualifier__section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .ui-qualifier__qualification-grid,
  .ui-qualifier__pathway-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ui-qualifier__qualification-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-qualifier__qualification-card,
  .ui-qualifier__pathway-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.125rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: var(--white);
  }

  .ui-qualifier__qualification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: var(--brand-1-900);
    color: var(--white);
  }

  .ui-qualifier__qualification-title,
  .ui-qualifier__pathway-title,
  .ui-qualifier__fishery-title {
    margin: 0;
    color: #27272a;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .ui-qualifier__qualification-copy,
  .ui-qualifier__pathway-copy,
  .ui-qualifier__fishery-copy {
    margin: 0;
    color: #52525b;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .ui-qualifier__pathways {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 0.75rem;
    background: #f4f4f5;
  }

  .ui-qualifier__pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-qualifier__pathway-card {
    justify-content: space-between;
    min-height: 100%;
  }

  .ui-qualifier__pathway-prize {
    display: flex;
    flex-direction: column;
    padding-top: 0.375rem;
    border-top: 1px solid #e4e4e7;
  }

  .ui-qualifier__pathway-prize-label {
    color: #52525b;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ui-qualifier__pathway-prize-copy {
    margin: 0;
    color: #71717a;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .ui-qualifier__pathway-button {
    align-self: flex-start;
    margin-top: auto;
  }

  .ui-qualifier__filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: none;
  }

  .ui-qualifier__search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .ui-qualifier__search {
    position: relative;
    display: flex;
    flex: 1 1 100%;
  }

  .ui-qualifier__search-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .ui-qualifier__search-input,
  .ui-qualifier__filter-select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: var(--darker);
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-qualifier__search-input {
    padding-left: 2.625rem;
  }

  .ui-qualifier__filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
  }

  .ui-qualifier__filter-control {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .ui-qualifier__filter-label {
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .ui-qualifier__filter-action {
    display: flex;
    align-items: flex-end;
  }

  .ui-qualifier__clear {
    min-width: 4.25rem;
  }

  .ui-qualifier__table th {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .ui-qualifier__table td:last-child,
  .ui-qualifier__table th:last-child {
    text-align: right;
  }

  .ui-qualifier__event-name {
    font-weight: 600;
  }

  .ui-qualifier__event-meta {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .ui-qualifier__prize {
    color: var(--brand-1-900);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .ui-qualifier__empty {
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background: #f4f4f5;
    color: #52525b;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ui-qualifier__fisheries-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .ui-qualifier__fishery-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    border-radius: 0.5rem;
    background: #f4f4f5;
  }

  .ui-qualifier__fishery-card.is-active {
    background: var(--brand-1-900);
  }

  .ui-qualifier__fishery-card.is-active .ui-qualifier__fishery-title,
  .ui-qualifier__fishery-card.is-active .ui-qualifier__fishery-copy {
    color: var(--white);
  }

  .ui-qualifier__fisheries-image {
    width: 100%;
    height: 100%;
    min-height: 24rem;
    border-radius: 0.5rem;
    object-fit: cover;
  }

  /* Championships page
  ---------------------------------- */
  .ui-advancement__content {
    gap: var(--space-lg);
  }

  .ui-advancement__section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .ui-advancement__split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .ui-advancement__split-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .ui-advancement__split-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    border-radius: 0.5rem;
    background: #f4f4f5;
  }

  .ui-advancement__center-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: clamp(2rem, 5vw, 3rem);
    border-radius: 0.75rem;
    background: #f4f4f5;
    text-align: center;
  }

  .ui-advancement__center-title {
    margin: 0;
    color: #27272a;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 0.95;
  }

  .ui-advancement__center-copy {
    max-width: 42rem;
    margin: 0;
    color: #52525b;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* Results page
  ---------------------------------- */
  .ui-tournament-results__content {
    gap: clamp(3rem, 4vw, 4rem);
  }

  .ui-tournament-results__section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .ui-tournament-results__hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(12rem, 18vw, 16rem);
    background: var(--brand-1-900);
  }

  .ui-tournament-results__hero-image,
  .ui-tournament-results__hero-backdrop {
    position: absolute;
    inset: 0;
  }

  .ui-tournament-results__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ui-tournament-results__hero-backdrop {
    background: linear-gradient(180deg, rgb(2 20 56 / 0.2), rgb(2 20 56 / 0.32));
  }

  .ui-tournament-results__hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    min-height: clamp(12rem, 18vw, 16rem);
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  .ui-tournament-results__hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2rem + 1.8vw, 3.75rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
  }

  .ui-tournament-results__filters {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
    max-width: none;
  }

  .ui-tournament-results__search-row {
    display: flex;
  }

  .ui-tournament-results__search {
    position: relative;
    width: 100%;
    max-width: none;
  }

  .ui-tournament-results__search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .ui-tournament-results__search-input,
  .ui-tournament-results__filter-select {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: #f9fafb;
    color: #1f2937;
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .ui-tournament-results__search-input {
    padding-left: 2.25rem;
  }

  .ui-tournament-results__filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
  }

  .ui-tournament-results__filter-control {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .ui-tournament-results__filter-control--wide {
    grid-column: span 2;
  }

  .ui-tournament-results__filter-label {
    color: #27272a;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .ui-tournament-results__filter-action {
    display: flex;
    align-items: flex-end;
  }

  .ui-tournament-results__clear {
    min-width: 0;
    min-height: 2.5rem;
    padding-inline: 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
  }

  .ui-tournament-results__event-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: var(--white);
  }

  .ui-tournament-results__event-title,
  .ui-tournament-results__history-title,
  .ui-tournament-results__director-title,
  .ui-tournament-results__final-title,
  .ui-tournament-results__faq-title {
    margin: 0;
    color: #27272a;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
  }

  .ui-tournament-results__event-title {
    font-size: 1.125rem;
  }

  .ui-tournament-results__event-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.1em;
  }

  .ui-tournament-results__event-meta {
    margin: 0;
    color: #71717a;
    line-height: 1.4;
  }

  .ui-tournament-results__table-wrap {
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: var(--white);
  }

  .ui-tournament-results__table th {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .ui-tournament-results__table td {
    vertical-align: top;
  }

  .ui-tournament-results__table-meta {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .ui-tournament-results__info-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #f5f5f5;
  }

  .ui-tournament-results__card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ui-tournament-results__info-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 9rem;
    padding: 1rem;
    border: 1px solid #ececec;
    border-radius: 0.5rem;
    background: var(--white);
  }

  .ui-tournament-results__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: var(--brand-1-900);
    color: var(--white);
  }

  .ui-tournament-results__info-title {
    margin: 0;
    color: #27272a;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .ui-tournament-results__info-copy {
    margin: 0;
    color: #71717a;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .ui-tournament-results__empty {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #f5f5f5;
    color: #52525b;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ui-tournament-results__director-cta {
    padding: 3rem 1.5rem;
    background: #f5f5f5;
  }

  .ui-tournament-results__faq-title {
    font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  }

  .ui-tournament-results__final-cta {
    padding: 3rem 1.5rem;
  }

  .ui-tournament-results__final-title {
    color: var(--white);
  }

  .ui-marketing-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .ui-marketing-section-header--narrow {
    max-width: 48rem;
  }

  .ui-marketing-section-header--center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .ui-marketing-section-header__eyebrow {
    margin: 0;
    color: #909090;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .ui-marketing-section-header__title,
  .ui-marketing-page__heading {
    margin: 0;
    color: var(--darker);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }

  .ui-marketing-section-header__subtitle {
    margin: 0;
    color: #27272a;
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .ui-marketing-section-header__intro,
  .ui-marketing-page__intro {
    margin: 0;
    color: var(--midtone);
    font-size: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
    line-height: 1.55;
  }

  .ui-marketing-section-header--inverse .ui-marketing-section-header__eyebrow,
  .ui-marketing-section-header--inverse .ui-marketing-section-header__title,
  .ui-marketing-section-header--inverse .ui-marketing-section-header__subtitle {
    color: var(--white);
  }

  .ui-marketing-section-header--inverse .ui-marketing-section-header__intro {
    color: rgb(255 255 255 / 0.84);
  }

  .ui-marketing-page__copy {
    margin: 0;
    color: var(--dark);
    line-height: 1.65;
  }

  .ui-marketing-page__link {
    color: var(--error);
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .ui-marketing-copy {
    margin: 0;
    color: #909090;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ui-marketing-copy--emphasis {
    color: #27272a;
  }

  .ui-marketing-copy--wide {
    max-width: 34.125rem;
  }

  .ui-marketing-copy--feature {
    max-width: 29.375rem;
  }

  .ui-marketing-action-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3125rem;
  }

  .ui-marketing-action-block__button {
    align-self: flex-start;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0.04em;
  }

  .ui-tournament-results__faq .ui-marketing-section-header__title {
    font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  }

  .ui-marketing-page__sponsors {
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: var(--space-2xl);
  }

  @media (max-width: 64rem) { /* --bp-xl */
    .ui-competition-overview__workflow,
    .ui-qualifier__fisheries-grid,
    .ui-advancement__split {
      grid-template-columns: 1fr;
    }

    .ui-competition-overview__coverage-grid {
      grid-template-columns: 1fr;
    }

    .ui-competition-overview__coverage-media {
      aspect-ratio: 4 / 3;
    }

    .ui-competition-overview__filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-competition-overview__benefits-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-rankings__benefits-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-qualifier__qualification-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-tournament-results__card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 48rem) { /* --bp-md */
    .ui-competition-overview__workflow {
      padding: 1.5rem;
    }

    .ui-competition-overview__workflow-grid,
    .ui-competition-overview__benefits-grid,
    .ui-competition-overview__filter-grid,
    .ui-qualifier__filter-grid,
    .ui-qualifier__qualification-grid,
    .ui-qualifier__pathway-grid,
    .ui-competition-overview__coverage-grid {
      grid-template-columns: 1fr;
    }

    .ui-competition-overview__search {
      flex-direction: column;
      align-items: stretch;
    }

    .ui-competition-overview__search-row {
      align-items: stretch;
    }

    .ui-competition-overview__search-row > .ui-button {
      width: 100%;
      justify-content: center;
    }

    .ui-qualifier__pathways {
      padding: 1.5rem;
    }

    .ui-advancement__card-actions > .ui-button {
      width: 100%;
      justify-content: center;
    }

    .ui-qualifier__search {
      flex-basis: 100%;
    }

    .ui-qualifier__search-row > .ui-button {
      width: 100%;
      justify-content: center;
    }

    .ui-qualifier__table {
      min-width: 40rem;
    }

    .ui-qualifier__fisheries-image {
      min-height: 18rem;
    }

    .ui-rankings__filter-control--wide {
      grid-column: span 1;
    }

    .ui-rankings__division-card {
      padding: 1.25rem;
    }

    .ui-rankings__benefits-grid {
      grid-template-columns: 1fr;
    }

    .ui-tournament-results__filter-control--wide {
      grid-column: span 1;
    }

    .ui-tournament-results__filter-grid,
    .ui-tournament-results__card-grid {
      grid-template-columns: 1fr;
    }

    .ui-tournament-results__table {
      min-width: 36rem;
    }
  }

  @media (max-width: 40rem) {
    .ui-rankings__search {
      width: 100%;
    }

    .ui-rankings__table {
      min-width: 24rem;
    }

    .ui-rankings__table th {
      padding: 0.5rem 0.75rem;
      font-size: 0.8125rem;
    }

    .ui-rankings__table td {
      padding: 0.625rem 0.75rem;
    }

    .ui-rankings__team-id {
      margin-top: 0.125rem;
      font-size: 0.875rem;
    }

    .ui-rankings__place {
      font-size: 1rem;
    }

    .ui-rankings__points {
      font-size: 1.25rem;
    }

    .ui-tournament-results__search {
      width: 100%;
    }
  }

  .ui-legal-page__section {
    gap: var(--space-xs);
  }

  .ui-legal-page .ui-marketing-page__body {
    padding-block: clamp(3.5rem, 6vw, 5rem) clamp(5rem, 8vw, 7rem);
  }

  .ui-legal-page__heading {
    font-size: clamp(1.5rem, 1.3rem + 0.55vw, 2rem);
    line-height: 1.1;
  }

  .ui-contact-hub__intro {
    width: 100%;
    max-width: none;
  }

  .ui-contact-hub__directory .ui-table {
    width: max-content;
    min-width: 100%;
  }

  .ui-contact-hub__department {
    color: var(--dark);
    white-space: normal;
  }

  .ui-contact-form-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: clamp(1.5rem, 3vw, 2.625rem);
    border-radius: var(--rounded-lg);
    background: var(--brand-1-900);
    color: var(--white);
  }

  form.ui-contact-form:has(.ui-field) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
  }

  .ui-contact-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-sm);
  }

  .ui-contact-form .ui-field {
    min-width: 0;
    width: 100%;
  }

  .ui-contact-form .ui-field > .relative {
    width: 100%;
  }

  .ui-contact-form .ui-field input:not([type="checkbox"], [type="radio"]),
  .ui-contact-form .ui-field textarea,
  .ui-contact-form .ui-field select {
    box-sizing: border-box;
    width: 100%;
    background: var(--white);
    border-radius: var(--rounded);
  }

  .ui-contact-form .ui-field textarea {
    min-height: 8.6875rem;
  }

  .ui-contact-form .ui-error-summary {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.12);
    color: var(--white);
  }

  .ui-contact-form .ui-error-summary h3,
  .ui-contact-form .ui-error-summary li {
    color: var(--white);
  }

  .ui-contact-form__submit {
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ui-advertising-hero,
  .ui-advertising-opportunities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: stretch;
  }

  .ui-advertising-hero__benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ui-advertising-hero__benefit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem;
    border-radius: var(--rounded-lg);
    background: #f4f4f5;
    color: #27272a;
    font-weight: 700;
    line-height: 1.5;
  }

  .ui-advertising-hero__benefit-icon,
  .ui-advertising-opportunities__icon {
    color: var(--error);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
  }

  .ui-advertising-hero__benefit-text {
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
  }

  .ui-advertising-opportunities {
    padding: 1.75rem;
    background: #f4f4f5;
    border-radius: var(--rounded-lg);
  }

  .ui-advertising-opportunities__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ui-advertising-opportunities__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 7.5rem;
    padding: 1rem;
    border-radius: var(--rounded-lg);
    background: var(--white);
    color: #27272a;
    justify-content: center;
  }

  .ui-advertising-opportunities__label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
  }

  .ui-marketing-feature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    border: 1px solid #909090;
    border-radius: var(--rounded-lg);
    overflow: hidden;
    background: var(--white);
    min-height: 30rem;
  }

  .ui-marketing-feature__content {
    display: flex;
    padding: 1.75rem 2.625rem;
  }

  .ui-advertising-feature__content {
    align-items: center;
  }

  .ui-marketing-feature__media,
  .ui-story-block__media {
    min-height: 30rem;
    background: #f4f4f5;
  }

  .ui-marketing-feature__image {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
  }

  .ui-advertising-feature__image {
    background: #f4f4f5;
    filter: none;
  }

  .ui-marketing-faq {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .ui-marketing-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ui-marketing-faq__item {
    padding: 1rem 1rem 1.125rem;
    border-radius: var(--rounded-lg);
    background: #f4f4f5;
  }

  .ui-marketing-faq__item > summary {
    list-style: none;
  }

  .ui-marketing-faq__item > summary::-webkit-details-marker {
    display: none;
  }

  .ui-marketing-faq__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
  }

  .ui-marketing-faq__question {
    color: #27272a;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .ui-marketing-faq__chevron {
    color: #909090;
    transition: transform 120ms ease;
    flex-shrink: 0;
  }

  .ui-marketing-faq__item[open] .ui-marketing-faq__chevron {
    transform: rotate(180deg);
  }

  .ui-marketing-faq__answer {
    padding-top: 0.625rem;
    color: #27272a;
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-marketing-faq__answer p {
    margin: 0;
  }

  .ui-marketing-cta {
    padding: 5.25rem 1.75rem;
    border-radius: var(--rounded-lg);
    background: var(--brand-1-900);
  }

  .ui-marketing-cta__inner {
    width: min(100%, 66.5rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    text-align: center;
  }

  .ui-marketing-cta__copy {
    width: min(100%, 48rem);
    gap: 1.3125rem;
  }

  .ui-marketing-cta__button {
    min-height: 2.25rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    line-height: 1.4286;
    text-transform: uppercase;
  }

  .ui-story-section-intro {
    margin: 0;
    max-width: 48rem;
    color: var(--dark);
  }

  .ui-principle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6875rem;
  }

  .ui-principle-card {
    position: relative;
    min-height: 14.125rem;
    padding: 3.5rem 1.75rem 2.625rem;
    border-color: #909090;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: none;
  }

  .ui-icon-badge {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4rem;
    height: 4rem;
    border-radius: var(--rounded-full);
    background: var(--error);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-sm);
  }

  .ui-principle-card__content {
    display: grid;
    gap: 0.5rem;
    max-width: 31.25rem;
    margin-inline: auto;
  }

  .ui-emphasis-card-title {
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.55rem + 0.55vw, 1.875rem);
    line-height: 1.2;
    color: #27272a;
  }

  .ui-emphasis-card-copy {
    margin: 0;
    color: #909090;
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1rem, 0.88rem + 0.28vw, 1.125rem);
    font-weight: var(--font-medium);
    line-height: 1.56;
  }

  .ui-story-section-header {
    align-items: center;
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: 2rem;
  }

  .ui-story-section-header .ui-marketing-section-header__title {
    font-size: clamp(2rem, 1.75rem + 1.2vw, 2.9rem);
    line-height: 0.97;
  }

  .ui-principle-grid,
  .ui-value-grid,
  .ui-feature-stack,
  .ui-story-block,
  .ui-contact-card {
    max-width: 70rem;
    margin-inline: auto;
  }

  .ui-value-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6875rem;
  }

  .ui-value-card {
    grid-column: span 2;
    min-height: 14.875rem;
    background: var(--brand-1-900);
    color: var(--white);
    border-radius: 0.5rem;
    padding: 2.625rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.875rem;
    box-shadow: none;
  }

  .ui-value-card--featured {
    grid-column: span 3;
  }

  .ui-values-section .ui-story-section-header {
    max-width: 70rem;
    margin-bottom: 0.875rem;
  }

  .ui-value-card__icon {
    color: rgb(255 255 255 / 0.96);
    width: 2rem;
    height: 2rem;
  }

  .ui-value-card h3,
  .ui-feature-panel__content h3 {
    margin: 0;
    text-transform: uppercase;
  }

  .ui-value-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.333;
    letter-spacing: 0;
    color: var(--white);
  }

  .ui-value-card p {
    margin: 0;
    color: #f0f0f0;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 31rem;
  }

  .ui-feature-stack {
    display: grid;
    gap: 1.3125rem;
  }

  .ui-feature-panel--reverse {
    .ui-feature-panel__media {
      order: 2;
    }

    .ui-feature-panel__content {
      order: 1;
    }
  }

  .ui-feature-panel__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.3125rem;
  }

  .ui-feature-panel__text {
    display: grid;
    gap: 1.3125rem;
    max-width: 29.75rem;
  }

  .ui-feature-panel__title-group {
    display: grid;
    gap: 0.25rem;
  }

  .ui-membership-section .ui-story-section-header {
    max-width: 45rem;
    margin-bottom: 1.75rem;
  }

  .ui-values-section .ui-marketing-section-header__title,
  .ui-membership-section .ui-marketing-section-header__title,
  .ui-history-section .ui-marketing-section-header__title,
  .ui-director-section .ui-marketing-section-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2.15rem + 0.9vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
    color: #27272a;
  }

  @media (max-width: 40rem) {
    .ui-marketing-section-header__title,
    .ui-marketing-page__heading,
    .ui-story-section-header .ui-marketing-section-header__title {
      font-size: 1.75rem;
    }

    .ui-values-section .ui-marketing-section-header__title,
    .ui-membership-section .ui-marketing-section-header__title,
    .ui-history-section .ui-marketing-section-header__title,
    .ui-director-section .ui-marketing-section-header__title {
      font-size: 2.125rem;
    }
  }

  .ui-membership-section .ui-story-section-intro,
  .ui-director-section .ui-story-section-intro {
    max-width: 45rem;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
    line-height: 1.56;
    font-weight: var(--font-medium);
    color: #909090;
  }

  .ui-feature-panel__content .eyebrow {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1.25;
    letter-spacing: 0;
    color: #27272a;
    font-weight: var(--font-bold);
  }

  .ui-feature-panel__content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.333;
    color: #27272a;
  }

  .ui-feature-panel__body {
    max-width: 29.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #909090;
  }

  .ui-feature-panel__highlights {
    background: #f4f4f5;
    border: 0;
    border-radius: 0.5rem;
    padding: 1rem;
    max-width: 29.75rem;
    width: 100%;
  }

  .ui-feature-panel__highlights ul {
    gap: 0.2rem;
    padding: 0 0 0 1.1rem;
    color: #27272a;
    max-width: none;
  }

  .ui-feature-panel__highlights li {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1.333;
    font-weight: 600;
  }

  .ui-grayscale-image {
    filter: grayscale(100%);
  }

  .ui-history-section .ui-story-section-header {
    margin-bottom: 0.875rem;
  }

  .ui-story-block {
    background: var(--brand-1-900);
    color: var(--white);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    padding: 2.625rem;
    border: 1px solid #909090;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: none;
  }

  .ui-story-block__media {
    border-radius: 0.25rem;
    overflow: hidden;
    background: #f4f4f5;
  }

  .ui-story-block__content {
    padding: 0;
    justify-content: flex-start;
    gap: 1rem;
  }

  .ui-story-block__content p {
    color: var(--white);
    max-width: none;
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-contact-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    max-width: 70rem;
    margin: 0 auto;
    border-radius: 0.5rem;
    box-shadow: none;
  }

  .ui-director-section .ui-story-section-header {
    max-width: 45rem;
    margin-bottom: 1.5rem;
  }

  .ui-director-section .ui-story-section-intro {
    margin-inline: auto;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .ui-contact-card__details {
    background: var(--brand-1-900);
    color: var(--white);
    padding: 1.75rem;
    min-height: 27.8125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }

  .ui-contact-card__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: var(--font-bold);
    color: var(--white);
  }

  .ui-contact-card__address {
    font-style: normal;
    display: grid;
    gap: 0.05rem;
  }

  .ui-contact-card__address p {
    margin: 0;
    color: var(--white);
    font-size: 1rem;
    line-height: 1.5;
  }

  .ui-contact-card__form {
    padding: 1.75rem;
    background: #f4f4f5;
    border-left: 0;
    width: 100%;
  }

  .ui-contact-card__form h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: #27272a;
  }

  .ui-contact-card__form .text-midtone {
    display: none;
  }

  form.ui-contact-card-form:has(.ui-field) {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
    align-self: stretch;
  }

  .ui-contact-card-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  form.ui-contact-card-form:has(.ui-field) .ui-field {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 0;
    gap: 0.25rem;
  }

  .ui-contact-card-form .ui-field > label {
    font-size: 0.9375rem;
    line-height: 1.333;
    font-weight: 400;
    color: #374151;
  }

  .ui-contact-card-form .ui-field input:not([type="checkbox"], [type="radio"]),
  .ui-contact-card-form .ui-field textarea {
    width: 100%;
    border: 1px solid var(--light);
    border-radius: 0;
    background: var(--white);
    color: #374151;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: none;
  }

  .ui-contact-card-form .ui-field input:not([type="checkbox"], [type="radio"])::placeholder,
  .ui-contact-card-form .ui-field textarea::placeholder {
    color: #9ca3af;
  }

  .ui-contact-card-form .ui-field input:not([type="checkbox"], [type="radio"]):focus,
  .ui-contact-card-form .ui-field textarea:focus {
    box-shadow: none;
  }

  .ui-contact-card-form .ui-field textarea {
    min-height: 4.0625rem;
    resize: none;
  }

  .ui-contact-card-form .ui-button {
    height: 2.625rem;
    min-width: 5.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.333;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 0.375rem;
    justify-content: center;
  }

  .ui-contact-email-link {
    color: var(--error);
    font-weight: var(--font-medium);
  }

  @media (max-width: 56rem) { /* --bp-lg */
    .ui-feature-panel,
    .ui-feature-panel--reverse,
    .ui-story-block,
    .ui-contact-card {
      grid-template-columns: 1fr;
    }

    .ui-feature-panel__text,
    .ui-feature-panel__body,
    .ui-feature-panel__highlights {
      max-width: none;
    }

    .ui-feature-panel__media,
    .ui-story-block__media {
      min-height: 18rem;
    }

    .ui-story-block {
      min-height: auto;
    }

    .ui-feature-panel--reverse {
      .ui-feature-panel__media,
      .ui-feature-panel__content {
        order: initial;
      }
    }
  }

  @media (max-width: 64rem) { /* --bp-xl */
    .ui-page-hero-overhang {
      width: 100%;
      left: 0;
      bottom: 0;
      transform: none;
      padding-inline: var(--space-lg);
    }

    .ui-page-hero__badge {
      width: 7.75rem;
      height: 7.75rem;
      border-width: 6px;
      padding: 0.72rem;
      transform: translateY(18%);
    }

    .ui-page-hero__logo {
      height: 5.85rem;
    }

    .ui-page-hero__badge--inline {
      width: 12.5rem;
      height: 12.5rem;
      border-width: 7px;
      padding: clamp(0.85rem, 1.2vw, 1rem);
    }

    .ui-page-hero__logo--inline {
      height: 7.75rem;
    }

    .ui-advertising-opportunities {
      grid-template-columns: 1fr;
    }

    .ui-advertising-opportunities__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-advertising-opportunities__card {
      padding-bottom: 0.75rem;
    }
  }

  @media (max-width: 48rem) { /* --bp-md */
    .ui-principle-grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }

    .ui-page-hero__copy {
      max-width: none;
      text-align: center;
    }

    .ui-page-hero__content-group {
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
      transform: translateY(0.75rem);
      text-align: center;
    }

    .ui-page-hero-shell--with-badge .ui-page-hero__inner {
      padding-bottom: clamp(6rem, 22vw, 7.5rem);
    }

    .ui-page-hero-shell--with-badge .ui-page-hero__copy {
      margin-top: -10%;
    }

    .ui-page-hero__badge {
      transform: translateY(24%);
    }

    .ui-page-hero__title {
      font-size: clamp(1.9rem, 1.45rem + 2vw, 2.75rem);
      white-space: normal;
    }

    .ui-page-hero__badge--inline {
      width: 7.75rem;
      height: 7.75rem;
      border-width: 6px;
      padding: 0.72rem;
      transform: translateY(0);
    }

    .ui-page-hero__logo--inline {
      height: 5.85rem;
    }

    .ui-page-hero__title--inline {
      width: 100%;
      text-align: center;
    }

    .ui-value-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-feature-panel__content {
      padding-inline: var(--space-lg);
    }

    .ui-feature-panel__text,
    .ui-feature-panel__title-group,
    .ui-feature-panel__body,
    .ui-feature-panel__highlights {
      width: 100%;
      max-width: none;
    }

    .ui-value-card,
    .ui-value-card--featured {
      grid-column: span 1;
    }

    .ui-marketing-feature__media,
    .ui-story-block__media {
      min-height: 15rem;
    }

    .ui-advertising-hero,
    .ui-advertising-opportunities,
    .ui-marketing-feature {
      grid-template-columns: 1fr;
    }

    .ui-advertising-feature__image {
      min-height: 16rem;
    }

    .ui-contact-hub__directory .ui-table {
      min-width: 46rem;
    }
  }

  @media (max-width: 36rem) { /* --bp-sm */
    .ui-page-hero {
      min-height: 12.5rem;
    }

    .ui-page-hero__inner {
      min-height: 12.5rem;
    }

    .ui-page-hero--inline-badge,
    .ui-page-hero--inline-badge .ui-page-hero__inner {
      min-height: 17.5rem;
    }

    .ui-page-hero__copy {
      padding-inline: 0;
    }

    .ui-page-hero__content-group {
      gap: 0.4rem;
      transform: translateY(0.5rem);
    }

    .ui-page-hero-shell--with-badge .ui-page-hero__inner {
      min-height: 12.5rem;
      padding-bottom: 6.25rem;
    }


    .ui-value-grid {
      grid-template-columns: 1fr;
    }

    .ui-principle-grid {
      gap: 3rem;
    }

    .ui-advertising-opportunities__card {
      min-height: auto;
    }

    .ui-marketing-feature__content {
      padding: var(--space-md);
    }

    .ui-advertising-feature__image {
      min-height: 15rem;
    }

    .ui-principle-card,
    .ui-feature-panel__content,
    .ui-story-block__content,
    .ui-contact-card__details,
    .ui-contact-card__form {
      padding: var(--space-md);
    }

    .ui-marketing-page__body {
      padding-block: 3rem;
    }

    .ui-contact-form-shell {
      padding: var(--space-md);
    }

    .ui-contact-form__submit {
      width: 100%;
      justify-content: center;
    }

    .ui-advertising-opportunities,
    .ui-marketing-cta {
      padding: var(--space-md);
    }

    .ui-advertising-hero__benefit,
    .ui-marketing-faq__item {
      padding: 0.875rem;
    }

    .ui-advertising-opportunities__grid {
      grid-template-columns: 1fr;
    }

    .ui-marketing-cta__button {
      width: 100%;
      justify-content: center;
    }

    .ui-story-block {
      gap: 1rem;
      min-height: auto;
      padding: var(--space-md);
    }

    .ui-contact-card-form__row {
      grid-template-columns: 1fr;
    }

    .ui-principle-card {
      min-height: auto;
      padding: 3.25rem 1.25rem 2rem;
    }

    .ui-emphasis-card-title {
      font-size: 1.75rem;
    }
  }

}
