:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif;
  --navy: #061b69;
  --blue: #0799f6;
  --cyan: #12c3f4;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  background: #dcefff;
}

html {
  overflow: hidden;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

.welcome-fit {
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  padding:
    var(--safe-top)
    var(--safe-right)
    var(--safe-bottom)
    var(--safe-left);
  display: grid;
  place-items: start center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.52), transparent 39%),
    linear-gradient(180deg, #cfe9ff 0%, #74c2fa 57%, #dff2ff 100%);
}

.welcome-canvas {
  position: relative;
  container-type: inline-size;
  width: min(
    calc(100vw - var(--safe-left) - var(--safe-right)),
    calc((100dvh - var(--safe-top) - var(--safe-bottom)) * 0.5710843373)
  );
  max-width: 948px;
  aspect-ratio: 948 / 1660;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  background: url("/assets/welcome_bg.png") center center / 100% 100% no-repeat;
}

.welcome-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 17%, transparent 84%, rgba(235,248,255,.16) 100%);
}

.hero-header,
.hero-copy,
.athlete-stage,
.people-message,
.capability-grid,
.tournament-feature,
.carousel-dots,
.welcome-footer {
  position: absolute;
  z-index: 10;
}

.hero-header {
  inset: 0;
  pointer-events: none;
}

.brand-home,
.auth-entry {
  position: absolute;
  pointer-events: auto;
}

.brand-home {
  left: 6.7%;
  top: 6.35%;
  width: 40.3%;
}

.brand-lockup {
  display: block;
  width: 100%;
  height: auto;
}

.auth-entry {
  top: 5.5%;
  right: 4.0%;
  width: 26.5%;
  height: 4.15%;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.78);
  background: linear-gradient(180deg, rgba(20,153,255,.98), rgba(0,112,238,.98));
  box-shadow:
    0 .6cqw 1.8cqw rgba(0,74,176,.18),
    inset 0 .14cqw 0 rgba(255,255,255,.45);
  color: #fff;
  font-size: 2.0cqw;
  line-height: 1;
  font-weight: 760;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.hero-copy {
  left: 5.55%;
  top: 14.9%;
  width: 51%;
}

.eyebrow {
  margin: 0 0 1.15cqw;
  color: rgba(29,45,111,.66);
  font-size: 1.72cqw;
  line-height: 1;
  font-weight: 570;
  letter-spacing: .43cqw;
  white-space: nowrap;
}

.eyebrow span {
  letter-spacing: .18cqw;
}

.hero-copy h1 {
  margin: 0;
  color: #071c73;
  font-size: 7.3cqw;
  line-height: .9;
  font-weight: 860;
  letter-spacing: -.055em;
}

.hero-copy h1 > span {
  display: block;
  white-space: nowrap;
}

.hero-copy h1 strong {
  color: #098ef2;
  font: inherit;
}

.hero-description {
  margin: 1.55cqw 0 0;
  color: rgba(34,54,120,.72);
  font-size: 2.45cqw;
  line-height: 1.2;
  font-weight: 520;
  letter-spacing: -.025em;
}

.athlete-stage {
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.athlete {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.athlete-pickleball {
  top: 10.45%;
  left: 48.6%;
  width: 54.7%;
  z-index: 3;
}

.athlete-badminton {
  top: 28.15%;
  left: 39.7%;
  width: 42.5%;
  z-index: 4;
}

.athlete-tennis {
  top: 32.35%;
  left: 67.2%;
  width: 38.2%;
  z-index: 5;
}

.sports-label {
  position: absolute;
  top: 26.5%;
  right: 2.55%;
  margin: 0;
  color: #fff;
  font-size: 1.75cqw;
  line-height: 1.13;
  font-weight: 820;
  letter-spacing: -.02em;
  text-shadow: 0 .12cqw .55cqw rgba(0,40,95,.4);
  z-index: 7;
}

.people-message {
  left: 6.2%;
  top: 37.05%;
  width: 24%;
  margin: 0;
  color: #fff;
  font-family: "Snell Roundhand", "Segoe Script", "Bradley Hand", cursive;
  font-size: 4.1cqw;
  line-height: .78;
  font-weight: 600;
  letter-spacing: -.055em;
  text-shadow:
    0 .24cqw .8cqw rgba(0,75,145,.24),
    0 0 .2cqw rgba(255,255,255,.5);
  transform: rotate(-4deg);
}

.people-message span {
  display: block;
  white-space: nowrap;
}

.people-message span:last-child {
  margin-left: 1.2cqw;
}

.capability-grid {
  left: 3.55%;
  top: 51.85%;
  width: 92.05%;
  height: 18.55%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .75cqw 1.35cqw;
  z-index: 20;
}

.capability-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 2.9cqw;
  border: .12cqw solid rgba(255,255,255,.74);
  background:
    linear-gradient(155deg, rgba(255,255,255,.37) 0%, rgba(205,236,255,.27) 31%, rgba(38,145,232,.36) 100%);
  -webkit-backdrop-filter: blur(2.2cqw) saturate(145%);
  backdrop-filter: blur(2.2cqw) saturate(145%);
  box-shadow:
    0 .7cqw 1.6cqw rgba(0,62,135,.18),
    inset 0 .16cqw 0 rgba(255,255,255,.44),
    inset 0 0 2.3cqw rgba(255,255,255,.1);
  color: #fff;
  padding: 1.65cqw 4.25cqw 1.2cqw 3.45cqw;
  display: flex;
  align-items: flex-end;
}

.card-icon {
  position: absolute;
  left: 3.5cqw;
  top: 2.6cqw;
  width: 5.6cqw;
  height: 5.6cqw;
  color: #fff;
}

.card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon svg path,
.card-icon svg circle {
  vector-effect: non-scaling-stroke;
}

.card-icon svg path[fill="none"],
.card-icon svg circle[fill="none"] {
  fill: none;
}

.capability-card:nth-child(3) .card-icon svg,
.capability-card:nth-child(5) .card-icon svg,
.capability-card:nth-child(6) .card-icon svg {
  fill: none;
  stroke-width: 3.5;
}

.card-copy {
  min-width: 0;
  display: block;
  text-shadow: 0 .15cqw .45cqw rgba(0,47,106,.24);
}

.card-copy strong,
.card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.card-copy strong {
  font-size: 2.35cqw;
  line-height: 1.05;
  font-weight: 820;
  letter-spacing: -.035em;
}

.card-copy small {
  margin-top: .55cqw;
  font-size: 1.72cqw;
  line-height: 1;
  font-weight: 510;
}

.card-arrow {
  position: absolute;
  right: 2.15cqw;
  top: 50%;
  width: 5.0cqw;
  height: 5.0cqw;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  color: #fff;
  font-size: 4.3cqw;
  line-height: .72;
  font-weight: 420;
  box-shadow: inset 0 .1cqw .2cqw rgba(255,255,255,.34);
}

.tournament-feature {
  left: 3.15%;
  top: 71.75%;
  width: 92.1%;
  height: 20%;
  overflow: hidden;
  border-radius: 2.55cqw;
  background: #031a54;
  box-shadow: 0 1.0cqw 2.5cqw rgba(0,54,121,.26);
  z-index: 20;
}

.tournament-feature img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.carousel-dots {
  left: 50%;
  top: 92.75%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.0cqw;
  z-index: 20;
}

.carousel-dots span {
  width: 1.55cqw;
  height: 1.55cqw;
  border-radius: 50%;
  background: rgba(60,103,156,.35);
}

.carousel-dots .is-active {
  background: #0c8df5;
}

.welcome-footer {
  left: 0;
  right: 0;
  top: 95.0%;
  margin: 0;
  text-align: center;
  color: rgba(36,65,128,.7);
  font-size: 2.05cqw;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.015em;
  z-index: 20;
}

@media (hover: hover) and (pointer: fine) {
  .auth-entry:hover,
  .capability-card:hover,
  .tournament-feature:hover {
    filter: brightness(1.035);
  }
}

@media (min-aspect-ratio: 948/1660) {
  .welcome-canvas {
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    width: auto;
  }
}

@media (max-width: 360px) {
  .card-copy strong {
    font-size: 2.45cqw;
  }

  .card-copy small {
    font-size: 1.78cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Welcome full-bleed adaptive canvas + paddle foreground 2026-09-22c ===== */

.welcome-fit {
  place-items: stretch;
  background: #dcefff;
}

.welcome-canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  flex: 1 1 auto;
  background-image: url("/assets/welcome_bg.png");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.paddle-layer {
  position: absolute;
  top: 7.4%;
  left: -31%;
  width: 85%;
  height: auto;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(0);
  -webkit-mask-image: radial-gradient(
    ellipse 40% 32% at 78% 75%,
    #000 0%,
    #000 54%,
    rgba(0,0,0,.96) 64%,
    rgba(0,0,0,.68) 76%,
    rgba(0,0,0,.24) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 40% 32% at 78% 75%,
    #000 0%,
    #000 54%,
    rgba(0,0,0,.96) 64%,
    rgba(0,0,0,.68) 76%,
    rgba(0,0,0,.24) 88%,
    transparent 100%
  );
}

@media (max-aspect-ratio: 9/19.5) {
  .welcome-canvas {
    background-position: 50% 50%;
  }

  .paddle-layer {
    top: 8.5%;
    left: -35%;
    width: 91%;
  }
}

@media (min-aspect-ratio: 3/5) {
  .welcome-canvas {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    background-size: cover;
    background-position: 50% 50%;
  }

  .paddle-layer {
    top: 5.5%;
    left: -29%;
    width: 81%;
  }
}

body {
  --welcome-pixel-audit-d: 1;
}

.welcome-canvas {
  container-type: size;
  background-size: 100% 100%;
  background-position: 50% 50%;
}

.brand-home {
  left: 7.1%;
  top: 6.35%;
  width: min(40.3%, 23cqh);
}

.auth-entry {
  top: 5.5%;
  right: 5.4%;
  width: 36.2%;
  height: 4.15%;
  font-size: min(2.15cqw, 1.23cqh);
}

.hero-copy {
  left: 5.5%;
  top: 14.9%;
  width: 48%;
}

.eyebrow {
  font-size: min(1.82cqw, 1.04cqh);
}

.hero-copy h1 {
  font-size: min(8.2cqw, 4.68cqh);
}

.hero-description {
  margin-top: min(1.55cqw, .89cqh);
  font-size: min(2.45cqw, 1.4cqh);
}

.athlete-pickleball {
  width: min(54.7%, 31.24cqh);
}

.athlete-badminton {
  width: min(42.5%, 24.27cqh);
}

.athlete-tennis {
  width: min(38.2%, 21.81cqh);
}

.sports-label {
  font-size: min(1.75cqw, 1cqh);
}

.people-message {
  left: 6.1%;
  top: 37.6%;
  width: 20.7%;
  font-size: min(3.55cqw, 2.03cqh);
  line-height: .8;
}

.capability-card {
  border-radius: min(2.9cqw, 1.66cqh);
  border-color: rgba(255,255,255,.8);
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.31) 0%,
      rgba(183,226,255,.29) 34%,
      rgba(45,151,233,.42) 73%,
      rgba(18,111,205,.5) 100%
    );
  -webkit-backdrop-filter: blur(min(2.2cqw, 1.26cqh)) saturate(150%);
  backdrop-filter: blur(min(2.2cqw, 1.26cqh)) saturate(150%);
  padding:
    min(1.65cqw,.94cqh)
    min(4.25cqw,2.43cqh)
    min(1.2cqw,.69cqh)
    min(3.45cqw,1.97cqh);
}

.card-icon {
  left: min(3.5cqw,2cqh);
  top: min(2.6cqw,1.49cqh);
  width: min(5.6cqw,3.2cqh);
  height: min(5.6cqw,3.2cqh);
}

.card-copy strong {
  font-size: min(2.35cqw,1.34cqh);
}

.card-copy small {
  margin-top: min(.55cqw,.31cqh);
  font-size: min(1.72cqw,.98cqh);
}

.card-arrow {
  width: min(5.4cqw,3.08cqh);
  height: min(5.4cqw,3.08cqh);
  right: min(2.4cqw,1.37cqh);
  font-size: min(4.3cqw,2.46cqh);
}

.tournament-feature img {
  object-position: 50% 58%;
}

.carousel-dots {
  gap: min(1cqw,.57cqh);
}

.carousel-dots span {
  width: min(1.55cqw,.89cqh);
  height: min(1.55cqw,.89cqh);
}

.welcome-footer {
  font-size: min(2.05cqw,1.17cqh);
}

.paddle-racket-layer,
.paddle-ball-layer,
.paddle-mark {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.paddle-racket-layer {
  width: 66cqh;
  height: auto;
  left: calc(36% - 54.1cqh);
  top: -9.7cqh;
  z-index: 6;
  -webkit-mask-image: radial-gradient(
    ellipse 25% 24% at 82% 72%,
    #000 0%,
    #000 62%,
    rgba(0,0,0,.92) 74%,
    rgba(0,0,0,.42) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 25% 24% at 82% 72%,
    #000 0%,
    #000 62%,
    rgba(0,0,0,.92) 74%,
    rgba(0,0,0,.42) 88%,
    transparent 100%
  );
}

.paddle-ball-layer {
  width: 52cqh;
  height: auto;
  left: calc(26.8% - 36.4cqh);
  top: calc(46.8% - 46.8cqh);
  z-index: 7;
  -webkit-mask-image: radial-gradient(
    circle 9% at 70% 76%,
    #000 0%,
    #000 63%,
    rgba(0,0,0,.9) 75%,
    rgba(0,0,0,.38) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 9% at 70% 76%,
    #000 0%,
    #000 63%,
    rgba(0,0,0,.9) 75%,
    rgba(0,0,0,.38) 88%,
    transparent 100%
  );
}

.paddle-mark {
  left: 34.8%;
  top: 43.1%;
  width: min(10.2cqw,5.83cqh);
  height: auto;
  z-index: 8;
  box-sizing: border-box;
  padding: min(.55cqw,.31cqh);
  border-radius: 50%;
  background: rgba(6,31,72,.86);
}

@media (max-aspect-ratio: 9/19.5) {
  .auth-entry {
    right: 4.7%;
  }

  .paddle-racket-layer {
    left: calc(34% - 54.1cqh);
  }

  .paddle-ball-layer {
    left: calc(24.8% - 36.4cqh);
  }

  .paddle-mark {
    left: 32.8%;
  }
}

@media (min-aspect-ratio: 3/5) {
  .welcome-canvas {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    background-size: 100% 100%;
  }
}

body {
  --welcome-stacked-paddlefull-e: 1;
}

.brand-home {
  left: 6.8%;
  top: 5.75%;
  width: min(31.5%, 18cqh);
  height: 8.4%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.brand-lockup {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.paddle-racket-layer,
.paddle-ball-layer,
.paddle-mark {
  display: none !important;
}

.paddle-full-layer {
  position: absolute;
  left: 18.2%;
  top: 38.8%;
  width: min(55%, 31.4cqh);
  height: auto;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-aspect-ratio: 9/19.5) {
  .paddle-full-layer {
    left: 17.2%;
    top: 39.0%;
    width: min(57%, 32.5cqh);
  }
}

@media (min-aspect-ratio: 3/5) {
  .paddle-full-layer {
    left: 18.8%;
    top: 38.5%;
    width: min(53%, 30.3cqh);
  }
}

body {
  --welcome-pixel-pass-f: 1;
}

.welcome-canvas {
  background-size: 100% 115%;
  background-position: 50% 100%;
}

.hero-copy h1 {
  font-size: min(8.55cqw, 4.95cqh);
  letter-spacing: -.048em;
}

.hero-description {
  margin-top: min(1.0cqw, .58cqh);
}

.athlete-pickleball {
  top: 10.55%;
  left: 50.2%;
  width: min(52.8%, 30.15cqh);
}

.athlete-badminton {
  top: 28.55%;
  left: 42.0%;
  width: min(45.0%, 25.75cqh);
}

.athlete-tennis {
  top: 32.55%;
  left: 68.8%;
  width: min(43.2%, 24.7cqh);
}

.people-message {
  left: 6.15%;
  top: 36.7%;
  width: 21.5%;
  font-size: min(4.1cqw, 2.35cqh);
  line-height: .79;
}

.paddle-full-layer {
  left: 18.0%;
  top: 36.7%;
  width: min(64%, 36.5cqh);
}

.capability-card {
  border-color: rgba(255,255,255,.88);
  background:
    linear-gradient(
      150deg,
      rgba(239,249,255,.34) 0%,
      rgba(137,205,250,.38) 30%,
      rgba(40,145,228,.55) 67%,
      rgba(13,96,190,.66) 100%
    );
  -webkit-backdrop-filter:
    blur(min(2.35cqw,1.34cqh))
    saturate(158%);
  backdrop-filter:
    blur(min(2.35cqw,1.34cqh))
    saturate(158%);
  box-shadow:
    0 min(.7cqw,.4cqh) min(1.7cqw,.97cqh) rgba(0,62,135,.23),
    inset 0 min(.16cqw,.09cqh) 0 rgba(255,255,255,.57),
    inset 0 0 min(2.3cqw,1.31cqh) rgba(255,255,255,.11);
}

.card-copy strong {
  font-size: min(2.42cqw,1.39cqh);
}

.card-copy small {
  margin-top: min(.55cqw,.31cqh);
  font-size: min(1.82cqw,1.05cqh);
}

.tournament-feature img {
  object-fit: fill;
  object-position: 50% 50%;
}

.carousel-dots {
  top: 92.65%;
}

.welcome-footer {
  top: 94.55%;
}

@media (max-aspect-ratio: 9/19.5) {
  .paddle-full-layer {
    left: 17.2%;
    top: 37.0%;
    width: min(65%, 37.1cqh);
  }
}

@media (min-aspect-ratio: 3/5) {
  .welcome-canvas {
    background-size: 100% 115%;
    background-position: 50% 100%;
  }

  .paddle-full-layer {
    left: 18.3%;
    top: 36.5%;
    width: min(62%, 35.4cqh);
  }
}

body {
  --welcome-liquid-glass-navy-g: 1;
}

.capability-card {
  color: var(--navy);
  border-color: rgba(255,255,255,.78);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.25) 0%,
      rgba(236,248,255,.18) 27%,
      rgba(160,216,251,.14) 62%,
      rgba(57,153,227,.16) 100%
    );
  -webkit-backdrop-filter:
    blur(min(3.15cqw,1.8cqh))
    saturate(138%)
    brightness(1.05);
  backdrop-filter:
    blur(min(3.15cqw,1.8cqh))
    saturate(138%)
    brightness(1.05);
  box-shadow:
    0 min(.65cqw,.37cqh) min(1.55cqw,.89cqh) rgba(7,48,105,.13),
    inset 0 min(.17cqw,.10cqh) 0 rgba(255,255,255,.72),
    inset min(.10cqw,.06cqh) 0 min(.8cqw,.46cqh) rgba(255,255,255,.18),
    inset 0 0 min(2.5cqw,1.43cqh) rgba(255,255,255,.09);
}

.card-icon {
  color: var(--navy);
  filter: none;
}

.card-icon svg {
  color: var(--navy);
}

.card-copy {
  color: var(--navy);
  text-shadow: none;
}

.card-copy strong {
  color: var(--navy);
  text-shadow: none;
}

.card-copy small {
  color: rgba(7,35,92,.78);
  text-shadow: none;
}

.card-arrow {
  color: var(--navy);
  background: rgba(255,255,255,.30);
  border: min(.08cqw,.05cqh) solid rgba(255,255,255,.34);
  box-shadow:
    inset 0 min(.10cqw,.06cqh) min(.22cqw,.13cqh) rgba(255,255,255,.46),
    0 min(.15cqw,.09cqh) min(.55cqw,.31cqh) rgba(4,44,99,.08);
  text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .capability-card:hover {
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.31) 0%,
        rgba(236,248,255,.22) 27%,
        rgba(160,216,251,.18) 62%,
        rgba(57,153,227,.20) 100%
      );
  }
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #dcefff;
}

body {
  --welcome-ios-edge-to-edge-i: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #dcefff;
}

.welcome-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
  background: #dcefff;
}

.welcome-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  aspect-ratio: auto;
}

.brand-home {
  top: max(
    5.75%,
    calc(env(safe-area-inset-top, 0px) + 6px)
  );
}

.auth-entry {
  top: max(
    5.5%,
    calc(env(safe-area-inset-top, 0px) + 6px)
  );
}

@supports (height: 100dvh) {
  html,
  body,
  .welcome-fit,
  .welcome-canvas {
    height: 100dvh;
  }
}

@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: -webkit-fill-available;
  }

  .welcome-fit {
    min-height: -webkit-fill-available;
  }
}

/* ===== Mobile-first frame + payload 2026-09-23 =====
   CourtCast is designed for phones. Every element above is positioned in %
   of .welcome-canvas and sized in container units, so on wide windows the
   full-bleed canvas stretched the composition. Cap the canvas at phone
   proportions (width <= 0.62 x height) and centre it; phones (~0.46) and
   small tablets (<= 0.62) are unchanged. The area outside the frame shows the
   same background. */

.welcome-fit {
  background-color: #dcefff;
  background-image:
    linear-gradient(rgba(220,239,255,.38), rgba(220,239,255,.38)),
    url("/assets/opt/welcome-bg-948.webp");
  background-image:
    linear-gradient(rgba(220,239,255,.38), rgba(220,239,255,.38)),
    image-set(
      url("/assets/opt/welcome-bg-948.avif") type("image/avif"),
      url("/assets/opt/welcome-bg-948.webp") type("image/webp")
    );
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.welcome-canvas {
  left: 0;
  right: 0;
  width: min(100%, 62vh);
  margin-inline: auto;
  background-image: url("/assets/welcome_bg.png");
  background-image: image-set(
    url("/assets/opt/welcome-bg-948.avif") type("image/avif"),
    url("/assets/opt/welcome-bg-948.webp") type("image/webp"),
    url("/assets/welcome_bg.png") type("image/png")
  );
}

@supports (height: 100dvh) {
  .welcome-canvas {
    width: min(100%, 62dvh);
  }
}

@media (min-aspect-ratio: 62/100) {
  .welcome-canvas {
    box-shadow: 0 0 64px rgba(3,43,91,.22);
  }
}

/* The event banner keeps its own 1024:509 proportions (never stretched):
   it fills the 20%-tall slot and is as wide as that allows, centred. */
.tournament-feature {
  left: 50%;
  width: min(92.1cqw, calc(20cqh * 1024 / 509));
  height: auto;
  max-height: 20cqh;
  aspect-ratio: 1024 / 509;
  transform: translateX(-50%);
}

.tournament-feature picture,
.tournament-feature img {
  display: block;
  width: 100%;
  height: 100%;
}

.tournament-feature img {
  object-fit: cover;
  object-position: 50% 50%;
}