@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/fonts/barlow-condensed-900-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy: #04112d;
  --navy-2: #081a3d;
  --blue: #173bff;
  --blue-dark: #0d2bc5;
  --cyan: #43e7ff;
  --yellow: #efff31;
  --surface: #f6f8ff;
  --surface-2: #eef2ff;
  --white: #ffffff;
  --ink: #091226;
  --muted: #657086;
  --muted-2: #8a93a6;
  --line: #dce2f0;
  --success: #11a861;
  --danger: #d93c59;
  --purple: #6335d6;
  --shadow: 0 1.5rem 4rem rgba(2, 10, 29, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--navy);
}

body {
  min-width: 20rem;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(67, 231, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 231, 255, 0.08) 1px, transparent 1px),
    var(--navy);
  background-size: 5rem 5rem;
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

svg {
  display: block;
}

.prototype-stage {
  min-height: 100svh;
  display: grid;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 8vw, 9rem);
  grid-template-columns: minmax(18rem, 28rem) minmax(22rem, 27rem);
  padding: 2rem;
  overflow: hidden;
}

.prototype-intro {
  color: var(--white);
}

.prototype-intro__mark {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  padding: 0 0.75rem;
  margin-bottom: 3.5rem;
  transform: skew(-7deg);
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.prototype-intro__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.prototype-intro h1 {
  max-width: 8ch;
  margin: 0;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(5rem, 8vw, 8rem);
  font-weight: 900;
  line-height: 0.77;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.prototype-intro > p:not(.prototype-intro__eyebrow) {
  max-width: 31rem;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1rem;
  line-height: 1.7;
}

.prototype-intro__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.prototype-intro__steps span {
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.app-shell {
  position: relative;
  width: min(100%, 27rem);
  height: min(55rem, calc(100svh - 4rem));
  min-height: 42rem;
  overflow: hidden;
  border: 0.5rem solid #020916;
  border-radius: 2.9rem;
  background: var(--surface);
  box-shadow:
    1.25rem 1.25rem 0 var(--blue),
    var(--shadow);
}

.app-shell::before {
  position: absolute;
  z-index: 20;
  top: 0.55rem;
  left: 50%;
  width: 6.5rem;
  height: 1.55rem;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #020916;
  content: "";
  pointer-events: none;
}

.status-bar {
  position: relative;
  z-index: 10;
  display: flex;
  height: 2.8rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1.45rem 0;
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
}

.status-bar__icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.status-bar__icons svg {
  width: 1.15rem;
  height: 0.85rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.status-bar__icons svg:last-child {
  width: 1.4rem;
}

.status-bar__battery {
  fill: currentColor;
  stroke: none;
}

.app-viewport {
  height: calc(100% - 2.8rem);
  min-height: 0;
  background: var(--surface);
}

.screen-wrap {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  animation: screen-in 360ms var(--ease) both;
}

.screen-wrap--navy {
  background: var(--navy);
  color: var(--white);
}

.screen-wrap--yellow {
  background: var(--yellow);
}

.screen-scroll {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.screen-scroll::-webkit-scrollbar {
  display: none;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-header {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 248, 255, 0.96);
}

.app-header--dark {
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--navy);
  color: var(--white);
}

.app-header__title {
  min-width: 0;
  flex: 1;
}

.app-header__title small {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-header--dark .app-header__title small {
  color: var(--cyan);
}

.app-header__title strong {
  display: block;
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__logo {
  width: 7.6rem;
  height: auto;
}

.icon-button {
  display: inline-grid;
  width: 2.85rem;
  min-width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
}

.app-header--dark .icon-button {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
}

.icon-button svg,
.button svg,
.bottom-nav button svg,
.inline-action svg,
.payment-method svg,
.feature-row svg,
.detail-action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.avatar {
  display: inline-grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.bottom-nav {
  position: relative;
  z-index: 12;
  display: grid;
  min-height: 4.9rem;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.45rem 0.45rem max(0.45rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -0.8rem 2rem rgba(9, 18, 38, 0.06);
  backdrop-filter: blur(1rem);
}

.bottom-nav button {
  display: grid;
  min-width: 0;
  min-height: 3.8rem;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--muted-2);
  font-size: 0.54rem;
  font-weight: 800;
}

.bottom-nav button[aria-current="page"] {
  color: var(--blue);
}

.bottom-nav button[data-primary="true"] {
  color: var(--navy);
}

.bottom-nav button[data-primary="true"] svg {
  box-sizing: content-box;
  padding: 0.46rem;
  margin-top: -1.25rem;
  border: 0.25rem solid var(--white);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 0.45rem 1rem rgba(23, 59, 255, 0.2);
}

.home-hero {
  position: relative;
  min-height: 29rem;
  overflow: hidden;
  padding: 0 1.15rem 1.3rem;
  background: var(--navy);
  color: var(--white);
  isolation: isolate;
}

.home-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 17, 45, 0.28), var(--navy) 88%),
    linear-gradient(90deg, rgba(4, 17, 45, 0.92), rgba(4, 17, 45, 0.12)),
    url("./assets/marketing/play-real-court-800.webp") center / cover;
  content: "";
}

.home-hero::after {
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: 4rem;
  width: 14rem;
  height: 6rem;
  transform: rotate(-12deg);
  border: 1px solid rgba(67, 231, 255, 0.28);
  border-right: 0;
  content: "";
}

.home-top {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
}

.home-top img {
  width: 8.8rem;
  height: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.65rem;
  color: var(--cyan);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.7rem;
  height: 0.12rem;
  background: currentColor;
  content: "";
}

.home-hero h1,
.display-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 0.77;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}

.home-hero h1 span {
  display: block;
  color: var(--yellow);
}

.home-hero__copy {
  max-width: 22rem;
  margin: 1.05rem 0 1.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
}

.button {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0 1.1rem;
  border-radius: 0.85rem;
  background: var(--blue);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition:
    transform 180ms var(--ease),
    box-shadow 180ms ease,
    background 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px);
}

.button--yellow {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 0.35rem 0 #a7b400;
}

.button--dark {
  background: var(--navy);
  color: var(--white);
}

.button--white {
  background: var(--white);
  color: var(--navy);
}

.button--outline {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}

.button--block {
  width: 100%;
}

.button:disabled {
  transform: none;
  background: #d8ddeb;
  color: #9299aa;
  box-shadow: none;
  cursor: not-allowed;
}

.quick-availability {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(0.8rem);
}

.quick-availability__copy small {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--cyan);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quick-availability__copy strong {
  display: block;
  font-size: 0.86rem;
}

.quick-availability__time {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.content-section {
  padding: 1.35rem 1.15rem;
}

.content-section + .content-section {
  padding-top: 0.25rem;
}

.section-kicker {
  margin: 0 0 0.35rem;
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.section-copy {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.duration-strip {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
}

.duration-tile {
  padding: 0.85rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
  text-align: left;
}

.duration-tile strong {
  display: block;
  color: var(--navy);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.45rem;
  line-height: 1;
}

.duration-tile span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
}

.upcoming-card {
  position: relative;
  overflow: hidden;
  margin-top: 0.9rem;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--navy);
  color: var(--white);
}

.upcoming-card::after {
  position: absolute;
  right: -2.8rem;
  bottom: -3.8rem;
  width: 9rem;
  aspect-ratio: 1;
  border: 1.5rem solid rgba(67, 231, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.upcoming-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.upcoming-card__tag {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 99px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.upcoming-card__time {
  margin: 0.8rem 0 0.1rem;
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 0.9;
}

.upcoming-card p {
  position: relative;
  z-index: 1;
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.7rem;
}

.inline-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.booking-intro {
  padding: 1.3rem 1.15rem 1rem;
  background: var(--navy);
  color: var(--white);
}

.booking-intro__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.booking-intro__meta span {
  color: var(--cyan);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-label {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  padding: 0 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.52rem !important;
}

.booking-intro h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.booking-controls {
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.control-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.55rem;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
}

.control-label small {
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 700;
}

.date-rail {
  display: grid;
  gap: 0.4rem;
  grid-auto-columns: 3.65rem;
  grid-auto-flow: column;
  padding: 0.15rem 0 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.date-rail::-webkit-scrollbar {
  display: none;
}

.date-chip {
  display: grid;
  min-height: 4.3rem;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--white);
  color: var(--muted);
}

.date-chip span {
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
}

.date-chip strong {
  color: var(--ink);
  font-size: 1rem;
}

.date-chip small {
  font-size: 0.52rem;
}

.date-chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: rgba(255, 255, 255, 0.75);
}

.date-chip[aria-pressed="true"] strong {
  color: var(--white);
}

.segmented-control {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}

.segmented-control button {
  min-height: 2.7rem;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.segmented-control button[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
}

.period-rail {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.7rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.period-rail::-webkit-scrollbar {
  display: none;
}

.period-rail button {
  min-height: 2.3rem;
  flex: 0 0 auto;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
}

.period-rail button[aria-pressed="true"] {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--navy);
}

.slots-section {
  padding: 0.95rem 1.15rem 7rem;
}

.slots-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.slots-heading strong {
  font-size: 0.78rem;
}

.slots-heading span {
  color: var(--muted);
  font-size: 0.58rem;
}

.slots-list {
  display: grid;
  gap: 0.65rem;
}

.slot-card {
  position: relative;
  display: grid;
  width: 100%;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.slot-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.24rem;
  background: var(--blue);
  content: "";
}

.slot-card[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0.55rem 0.55rem 0 var(--yellow);
}

.slot-card[aria-pressed="true"]::before {
  background: var(--yellow);
}

.slot-card__time {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.slot-card__time strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 0.9;
}

.slot-card__time span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.slot-card[aria-pressed="true"] .slot-card__time span {
  color: rgba(255, 255, 255, 0.58);
}

.court-lanes {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.55rem;
}

.court-lane {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.45rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 800;
}

.court-lane::before {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--success);
  content: "";
}

.court-lane--off::before {
  background: #bdc4d2;
}

.slot-card[aria-pressed="true"] .court-lane {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.65);
}

.slot-card__price {
  text-align: right;
}

.slot-card__price strong {
  display: block;
  color: var(--blue);
  font-size: 0.88rem;
}

.slot-card[aria-pressed="true"] .slot-card__price strong {
  color: var(--yellow);
}

.slot-card__price span {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.52rem;
}

.slot-card[aria-pressed="true"] .slot-card__price span {
  color: rgba(255, 255, 255, 0.5);
}

.selection-dock {
  position: absolute;
  z-index: 15;
  right: 0;
  bottom: 4.9rem;
  left: 0;
  padding: 0.75rem 1rem 0.9rem;
  border-top: 1px solid var(--line);
  background: rgba(246, 248, 255, 0.97);
  box-shadow: 0 -1rem 2rem rgba(9, 18, 38, 0.09);
  backdrop-filter: blur(1rem);
}

.selection-dock__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.selection-dock__summary strong {
  font-size: 0.72rem;
}

.selection-dock__summary span {
  color: var(--muted);
  font-size: 0.58rem;
}

.empty-state {
  display: grid;
  min-height: 19rem;
  place-items: center;
  align-content: center;
  padding: 2rem 1rem;
  border: 1px dashed #cbd2e2;
  border-radius: 1rem;
  background: var(--white);
  text-align: center;
}

.empty-state__icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--blue);
}

.empty-state__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.empty-state h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.empty-state p {
  max-width: 17rem;
  margin: 0.55rem auto 1rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.auth-screen {
  position: relative;
  min-height: 100%;
  padding: 0 1.15rem 1.5rem;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.auth-screen::after {
  position: absolute;
  right: -8rem;
  bottom: -4rem;
  width: 19rem;
  height: 12rem;
  transform: rotate(-13deg);
  border: 2rem solid rgba(23, 59, 255, 0.28);
  content: "";
  pointer-events: none;
}

.auth-top {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
}

.auth-top img {
  width: 7.9rem;
}

.auth-content {
  position: relative;
  z-index: 1;
  padding-top: 1.4rem;
}

.auth-content h1 {
  max-width: 7ch;
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 4.3rem;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.auth-content h1 span {
  color: var(--yellow);
}

.auth-content > p {
  margin: 1rem 0 1.35rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
  line-height: 1.55;
}

.auth-tabs {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 1fr 1fr;
  padding: 0.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.05);
}

.auth-tabs button {
  min-height: 2.65rem;
  border-radius: 0.7rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
}

.auth-tabs button[aria-pressed="true"] {
  background: var(--white);
  color: var(--navy);
}

.field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.field label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.62rem;
  font-weight: 800;
}

.field input {
  width: 100%;
  min-height: 3.3rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 0.8rem;
}

.field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.phone-field {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 4rem 1fr;
}

.phone-prefix {
  display: grid;
  min-height: 3.3rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 800;
}

.auth-assist {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: flex-end;
}

.auth-assist button {
  padding: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 0.62rem;
  font-weight: 800;
}

.auth-legal {
  margin: 0.8rem 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.54rem;
  line-height: 1.45;
  text-align: center;
}

.checkout-top {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.hold-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #cad3ff;
  border-radius: 0.85rem;
  background: #e9edff;
  color: var(--navy);
}

.hold-banner__copy {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hold-banner__copy svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hold-banner__copy span {
  font-size: 0.61rem;
  font-weight: 800;
}

.hold-banner strong {
  color: var(--blue);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

.checkout-content {
  padding: 1rem 1.15rem 7.2rem;
}

.booking-ticket {
  position: relative;
  overflow: hidden;
  padding: 1.05rem;
  border-radius: 1rem;
  background: var(--navy);
  color: var(--white);
}

.booking-ticket::before,
.booking-ticket::after {
  position: absolute;
  top: 52%;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.booking-ticket::before {
  left: -0.5rem;
}

.booking-ticket::after {
  right: -0.5rem;
}

.booking-ticket__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--cyan);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-ticket__time {
  margin: 0.8rem 0 0.35rem;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.booking-ticket__date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
}

.booking-ticket__details {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr 1fr;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.booking-ticket__details div {
  min-width: 0;
}

.booking-ticket__details small {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.52rem;
}

.booking-ticket__details strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.67rem;
}

.checkout-section {
  margin-top: 1.1rem;
}

.checkout-section h2 {
  margin: 0 0 0.65rem;
  font-size: 0.76rem;
}

.price-breakdown {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.67rem;
}

.price-row strong {
  color: var(--ink);
}

.price-row--total {
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
}

.price-row--total strong {
  color: var(--blue);
  font-size: 0.9rem;
}

.payment-methods {
  display: grid;
  gap: 0.55rem;
}

.payment-method {
  display: grid;
  width: 100%;
  gap: 0.75rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.payment-method[aria-pressed="true"] {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.payment-method__icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--surface-2);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 900;
}

.payment-method__icon--yappy {
  background: #eee8ff;
  color: var(--purple);
}

.payment-method__copy strong {
  display: block;
  font-size: 0.7rem;
}

.payment-method__copy span {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.55rem;
}

.radio-dot {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid #aeb6c6;
  border-radius: 50%;
}

.payment-method[aria-pressed="true"] .radio-dot {
  border: 0.28rem solid var(--blue);
}

.policy-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 0;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.45;
}

.policy-check input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.05rem 0 0;
  accent-color: var(--blue);
}

.checkout-dock {
  position: absolute;
  z-index: 15;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.75rem 1rem max(0.9rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(246, 248, 255, 0.97);
  box-shadow: 0 -1rem 2rem rgba(9, 18, 38, 0.08);
  backdrop-filter: blur(1rem);
}

.form-error {
  margin: 0 0 0.5rem;
  color: var(--danger);
  font-size: 0.58rem;
  font-weight: 800;
}

.processing-screen {
  display: grid;
  height: 100%;
  place-items: center;
  align-content: center;
  padding: 2rem;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.processing-ball {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1.5rem;
  border: 0.55rem solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--yellow);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

.processing-ball::after {
  position: absolute;
  inset: 1.3rem;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.processing-screen h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.7rem;
  text-transform: uppercase;
}

.processing-screen p {
  max-width: 17rem;
  margin: 0.7rem auto 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  line-height: 1.5;
}

.confirmation-hero {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.15rem 1.7rem;
  background: var(--yellow);
}

.confirmation-hero::after {
  position: absolute;
  right: -3.5rem;
  bottom: -4rem;
  width: 12rem;
  aspect-ratio: 1;
  border: 1.5rem solid rgba(23, 59, 255, 0.13);
  border-radius: 50%;
  content: "";
}

.confirmation-check {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
}

.confirmation-check svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.confirmation-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 7ch;
  margin: 0;
  color: var(--navy);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 4rem;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.confirmation-hero p {
  position: relative;
  z-index: 1;
  max-width: 21rem;
  margin: 1rem 0 0;
  color: rgba(4, 17, 45, 0.68);
  font-size: 0.72rem;
  line-height: 1.5;
}

.confirmation-content {
  padding: 1rem 1.15rem 1.5rem;
}

.confirmation-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  color: var(--muted);
  font-size: 0.62rem;
}

.confirmation-code strong {
  color: var(--blue);
  letter-spacing: 0.08em;
}

.detail-actions {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.8rem;
}

.detail-action {
  display: grid;
  min-height: 4.5rem;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--white);
  color: var(--blue);
  font-size: 0.55rem;
  font-weight: 800;
}

.confirmation-footer {
  display: grid;
  gap: 0.6rem;
  padding: 0 1.15rem 1.5rem;
}

.tabs-row {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.25rem;
  margin: 1rem 1.15rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}

.tabs-row button {
  min-height: 2.5rem;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
}

.tabs-row button[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
}

.bookings-list {
  display: grid;
  gap: 0.7rem;
  padding: 0 1.15rem 1.5rem;
}

.booking-list-card {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.booking-list-card__top {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.9rem;
}

.booking-list-card__date {
  display: grid;
  width: 3.1rem;
  height: 3.4rem;
  place-items: center;
  align-content: center;
  border-radius: 0.75rem;
  background: var(--navy);
  color: var(--white);
}

.booking-list-card__date span {
  color: var(--cyan);
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.booking-list-card__date strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
}

.booking-list-card__copy strong {
  display: block;
  font-size: 0.74rem;
}

.booking-list-card__copy span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.56rem;
}

.status-pill {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 99px;
  background: #e6f8ef;
  color: var(--success);
  font-size: 0.5rem;
  font-weight: 900;
  text-transform: uppercase;
}

.booking-list-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.56rem;
}

.booking-list-card__bottom strong {
  color: var(--blue);
}

.booking-detail {
  padding: 1rem 1.15rem 1.5rem;
}

.detail-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.detail-status span:last-child {
  color: var(--muted);
  font-size: 0.56rem;
}

.detail-list {
  display: grid;
  margin-top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}

.detail-list__row {
  display: flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  font-size: 0.64rem;
}

.detail-list__row + .detail-list__row {
  border-top: 1px solid var(--line);
}

.detail-list__row span {
  color: var(--muted);
}

.detail-list__row strong {
  text-align: right;
}

.support-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  margin-top: 0.85rem;
  border: 1px solid #cad3ff;
  border-radius: 0.9rem;
  background: #e9edff;
}

.support-card strong {
  display: block;
  font-size: 0.68rem;
}

.support-card p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.55rem;
}

.profile-hero {
  padding: 1.3rem 1.15rem 1.5rem;
  background: var(--navy);
  color: var(--white);
}

.profile-hero__top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.profile-avatar {
  display: grid;
  width: 4.1rem;
  height: 4.1rem;
  place-items: center;
  border: 0.25rem solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
}

.profile-hero h1 {
  margin: 0;
  font-size: 1.15rem;
}

.profile-hero p {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
}

.loyalty-card {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  margin-top: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.07);
}

.loyalty-card::after {
  position: absolute;
  right: -2rem;
  bottom: -2.5rem;
  width: 7rem;
  aspect-ratio: 1;
  border: 1rem solid rgba(239, 255, 49, 0.1);
  border-radius: 50%;
  content: "";
}

.loyalty-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.loyalty-card__header span {
  color: var(--cyan);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.loyalty-card__header strong {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.loyalty-progress {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.33rem;
  grid-template-columns: repeat(10, 1fr);
  margin-top: 0.85rem;
}

.loyalty-progress span {
  height: 0.45rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.loyalty-progress span.is-earned {
  background: var(--yellow);
}

.loyalty-card p {
  position: relative;
  z-index: 1;
  margin: 0.75rem 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.58rem;
}

.profile-content {
  padding: 1rem 1.15rem 1.5rem;
}

.feature-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}

.feature-row {
  display: grid;
  width: 100%;
  min-height: 3.5rem;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.65rem 0.75rem;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.feature-row + .feature-row {
  border-top: 1px solid var(--line);
}

.feature-row__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--surface-2);
  color: var(--blue);
}

.feature-row strong {
  display: block;
  font-size: 0.66rem;
}

.feature-row span {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.52rem;
}

.feature-row > svg {
  width: 1rem;
  color: var(--muted-2);
}

.toast {
  position: absolute;
  z-index: 30;
  right: 1rem;
  bottom: 5.7rem;
  left: 1rem;
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.8rem;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1rem 2rem rgba(4, 17, 45, 0.24);
  animation: toast-in 280ms var(--ease) both;
}

.toast span {
  font-size: 0.62rem;
  font-weight: 800;
}

.toast button {
  padding: 0;
  background: transparent;
  color: var(--yellow);
  font-size: 0.56rem;
  font-weight: 800;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
}

/* Roadmap expansion */

.home-top__actions,
.loyalty-card__actions,
.section-heading-row,
.context-actions,
.mini-action-grid,
.team-actions,
.health-row {
  display: flex;
  align-items: center;
}

.home-top__actions {
  gap: 0.55rem;
}

.notification-button {
  position: relative;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.notification-button svg {
  width: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notification-button span {
  position: absolute;
  top: -0.2rem;
  right: -0.1rem;
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.46rem;
  font-weight: 800;
}

.section-heading-row {
  justify-content: space-between;
  gap: 1rem;
}

.section-heading-row .section-kicker,
.section-heading-row .module-title {
  margin-right: 0;
}

.module-title {
  margin: 0.15rem 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.text-link {
  flex: 0 0 auto;
  padding: 0.5rem 0;
  background: transparent;
  color: var(--blue);
  font-size: 0.6rem;
  font-weight: 800;
}

.content-section--flush {
  padding-top: 0;
}

.yellow-hour-card {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto;
  padding: 1rem;
  border: 1px solid #dce81d;
  border-radius: 1rem;
  background: var(--yellow);
  color: var(--navy);
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-dot::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--danger);
  content: "";
  box-shadow: 0 0 0 0.22rem rgba(217, 60, 89, 0.14);
}

.yellow-hour-card h2 {
  margin: 0.35rem 0 0.12rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}

.yellow-hour-card p {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 700;
}

.yellow-hour-card__deal {
  display: grid;
  justify-items: end;
}

.yellow-hour-card__deal del {
  color: rgba(4, 17, 45, 0.55);
  font-size: 0.55rem;
}

.yellow-hour-card__deal strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  line-height: 1;
}

.yellow-hour-card__deal button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0 0;
  background: transparent;
  color: var(--navy);
  font-size: 0.54rem;
  font-weight: 800;
}

.yellow-hour-card__deal svg,
.universe-card svg,
.context-action svg,
.open-match-card svg {
  width: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.context-actions {
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.context-actions--stack {
  display: grid;
}

.context-action {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.55rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.context-action > span:first-child {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--surface-2);
  color: var(--blue);
}

.context-action strong {
  min-width: 0;
  font-size: 0.6rem;
}

.context-action small {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 600;
}

.context-action > svg {
  color: var(--muted-2);
}

.universe-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.8rem;
}

.universe-card {
  position: relative;
  display: grid;
  min-height: 8.3rem;
  align-content: end;
  justify-items: start;
  overflow: hidden;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.universe-card--navy {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.universe-card--blue {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.universe-card--cyan {
  border-color: #24cde4;
  background: var(--cyan);
}

.universe-card--yellow {
  border-color: #dbe61e;
  background: var(--yellow);
}

.universe-card__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  margin-bottom: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.universe-card--white .universe-card__icon {
  background: var(--surface-2);
  color: var(--blue);
}

.universe-card strong {
  font-size: 0.72rem;
}

.universe-card small {
  margin-top: 0.12rem;
  opacity: 0.65;
  font-size: 0.48rem;
}

.universe-card__arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.home-trust {
  padding-bottom: 2.5rem;
}

.price-row--discount {
  color: var(--success);
}

.button--ghost-light,
.button--outline-light {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: var(--white);
}

.button--danger {
  background: var(--danger);
  color: var(--white);
}

.loyalty-card__actions {
  position: relative;
  z-index: 2;
  gap: 0.45rem;
}

.loyalty-card__actions .button {
  flex: 1;
  min-height: 2.6rem;
  padding-inline: 0.6rem;
  font-size: 0.54rem;
}

.profile-stat-strip {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 0.55rem 0 1.25rem;
}

.profile-stat-strip button {
  display: grid;
  min-height: 4.3rem;
  place-items: center;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
  color: var(--ink);
}

.profile-stat-strip strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
}

.profile-stat-strip span {
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 700;
}

.auth-content--centered {
  text-align: center;
}

.otp-icon,
.status-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(67, 231, 255, 0.12);
  color: var(--cyan);
}

.otp-icon svg,
.status-icon svg {
  width: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.status-icon--success {
  background: #dff8ea;
  color: var(--success);
}

.otp-row {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(6, 1fr);
  margin: 1.2rem 0;
}

.otp-row input {
  width: 100%;
  height: 3.3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.7rem;
  outline: none;
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
}

.otp-row input:focus {
  border-color: var(--yellow);
}

.auth-secondary {
  margin-top: 0.8rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.56rem;
  font-weight: 700;
}

.form-page {
  padding: 1.25rem 1.15rem 2rem;
}

.form-page__intro {
  margin-bottom: 1.2rem;
}

.form-page__intro h1 {
  margin: 0.55rem 0 0.35rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}

.form-page__intro p,
.micro-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.6;
}

.step-chip {
  display: inline-flex;
  min-height: 1.6rem;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 99px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step-chip--dark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cyan);
}

.optional-label {
  color: var(--muted-2);
  font-size: 0.48rem;
  font-weight: 600;
}

.field-help {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.5rem;
  line-height: 1.45;
}

.policy-check--surface {
  margin: 1rem 0;
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
}

.form-page .booking-ticket {
  margin-bottom: 1rem;
}

.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  outline: none;
  background: var(--white);
  color: var(--ink);
  font-size: 0.65rem;
}

.verified-field {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
}

.verified-field svg {
  width: 1rem;
  fill: none;
  stroke: var(--success);
  stroke-width: 2;
}

.open-intro {
  position: relative;
  min-height: 16rem;
  overflow: hidden;
  padding: 1.5rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.open-intro::before {
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: 16rem;
  height: 12rem;
  transform: rotate(-8deg);
  border: 1px solid rgba(67, 231, 255, 0.2);
  border-radius: 50%;
  content: "";
}

.open-intro__copy {
  position: relative;
  z-index: 1;
  max-width: 17rem;
}

.open-intro h1 {
  margin: 0.6rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.9rem;
  font-weight: 900;
  line-height: 0.83;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.open-intro h1 span {
  color: var(--yellow);
}

.open-intro p {
  max-width: 16rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.58rem;
  line-height: 1.55;
}

.open-intro__number {
  position: absolute;
  right: 1rem;
  bottom: 0.65rem;
  color: rgba(255, 255, 255, 0.1);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 1;
}

.open-intro__number span {
  font-size: 1.2rem;
}

.filter-row {
  display: flex;
  gap: 0.45rem;
  padding: 0.8rem 1.15rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  scrollbar-width: none;
}

.filter-row button,
.choice-chips button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 800;
}

.filter-row button[aria-pressed="true"],
.choice-chips button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.open-list,
.open-detail-content,
.league-content,
.media-content,
.stats-content,
.community-section,
.team-content,
.loyalty-content,
.manage-content,
.settings-content,
.ops-content,
.league-detail-content {
  padding: 1rem 1.15rem 1.8rem;
}

.open-match-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0.9rem;
  margin-top: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.open-match-card__stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.28rem;
  background: var(--yellow);
}

.open-match-card--cyan .open-match-card__stripe {
  background: var(--cyan);
}

.open-match-card--blue .open-match-card__stripe {
  background: var(--blue);
}

.open-match-card__top,
.open-match-card__meta,
.open-match-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.open-match-card__top {
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-host {
  color: var(--blue);
}

.open-match-card__time {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.65rem 0;
}

.open-match-card__time strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  line-height: 0.9;
}

.open-match-card__time span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.open-match-card__meta {
  justify-content: flex-start;
  padding-bottom: 0.7rem;
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 700;
}

.open-match-card__meta span + span::before {
  margin-right: 0.55rem;
  color: var(--line);
  content: "•";
}

.open-match-card__bottom {
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.open-match-card__bottom > div {
  flex: 1;
}

.open-match-card__bottom small {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.48rem;
}

.capacity-bar {
  height: 0.32rem;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-2);
}

.capacity-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.open-match-card--compact {
  margin-top: 0.8rem;
}

.create-match-card {
  padding: 1.15rem;
  margin: 0 1.15rem 1rem;
  border-radius: 1rem;
  background: var(--yellow);
}

.create-match-card__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
}

.create-match-card svg,
.conduct-note svg,
.open-rules svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.create-match-card span {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.create-match-card h2 {
  margin: 0.35rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  line-height: 0.9;
  text-transform: uppercase;
}

.create-match-card p {
  margin: 0 0 0.85rem;
  font-size: 0.58rem;
  line-height: 1.5;
}

.conduct-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  margin: 0 1.15rem 1.5rem;
  border: 1px solid #b9ddf0;
  border-radius: 0.8rem;
  background: #e9f9ff;
  color: var(--ink);
}

.conduct-note > svg {
  flex: 0 0 auto;
  color: var(--blue);
}

.conduct-note strong {
  display: block;
  font-size: 0.6rem;
}

.conduct-note p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.5rem;
  line-height: 1.45;
}

.open-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 1.3rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.open-detail-hero::after {
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border: 1.1rem solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  content: "";
}

.open-detail-hero--yellow {
  border-bottom: 0.3rem solid var(--yellow);
}

.open-detail-hero--cyan {
  border-bottom: 0.3rem solid var(--cyan);
}

.open-detail-hero--blue {
  border-bottom: 0.3rem solid var(--blue);
}

.open-detail-hero__top,
.open-detail-hero__format {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.open-detail-hero__top {
  color: var(--cyan);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.open-detail-hero__time {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 1.1rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 0.8;
}

.open-detail-hero__time span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 1rem;
}

.open-detail-hero__format {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
}

.open-detail-hero__format strong {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
}

.open-detail-hero__format span {
  margin-right: 0.7rem;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.48rem;
}

.joined-banner,
.open-policy-box,
.security-note,
.data-source-card,
.media-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid #bde9cf;
  border-radius: 0.8rem;
  background: #e9f9f0;
  color: var(--ink);
}

.joined-banner--wait {
  border-color: #d6ccfc;
  background: #f0edff;
}

.joined-banner svg,
.open-policy-box svg,
.security-note svg,
.data-source-card svg,
.media-notice svg {
  flex: 0 0 auto;
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.joined-banner span {
  font-size: 0.54rem;
  line-height: 1.5;
}

.joined-banner strong {
  display: block;
  margin-bottom: 0.1rem;
}

.capacity-panel {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}

.capacity-panel__copy span,
.capacity-panel__copy small {
  display: block;
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 700;
}

.capacity-panel__copy strong {
  display: block;
  margin: 0.1rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
}

.capacity-panel__visual {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(5, 1fr);
}

.capacity-panel__visual span {
  height: 0.7rem;
  border-radius: 0.2rem;
  background: var(--surface-2);
}

.capacity-panel__visual span.is-filled {
  background: var(--blue);
}

.player-preview {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.privacy-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.46rem;
  font-weight: 700;
}

.privacy-label svg {
  width: 0.8rem;
  fill: none;
  stroke: var(--success);
  stroke-width: 2;
}

.avatar-stack {
  display: flex;
  margin-top: 0.8rem;
}

.avatar-stack span {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  margin-left: -0.35rem;
  border: 0.18rem solid var(--surface);
  border-radius: 50%;
  background: hsl(calc(210 + var(--avatar-i) * 18) 75% 52%);
  color: var(--white);
  font-size: 0.48rem;
  font-weight: 800;
}

.avatar-stack span:first-child {
  margin-left: 0;
}

.avatar-stack .avatar-stack__more {
  background: var(--navy);
}

.open-rules {
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 0;
}

.open-rules > div {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0.6rem 0;
}

.open-rules > div > svg {
  width: 1.05rem;
  color: var(--blue);
}

.open-rules strong,
.open-rules small {
  display: block;
}

.open-rules strong {
  font-size: 0.58rem;
}

.open-rules small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.48rem;
  line-height: 1.4;
}

.open-price {
  display: grid;
  gap: 0.1rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.85rem;
  border-radius: 0.8rem;
  background: var(--navy);
  color: var(--white);
}

.open-price span,
.open-price small {
  font-size: 0.5rem;
}

.open-price small {
  color: rgba(255, 255, 255, 0.55);
}

.open-price strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
}

.join-mode {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 1fr 1fr;
  margin: 0.8rem 0;
}

.join-mode button {
  min-height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--white);
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 800;
}

.join-mode button[aria-pressed="true"] {
  border-color: var(--blue);
  background: #e9edff;
  color: var(--blue);
}

.open-detail-content > .button + .button {
  margin-top: 0.45rem;
}

.single-ticket {
  padding: 1rem;
  border-radius: 1rem;
  background: var(--navy);
  color: var(--white);
}

.single-ticket__tag {
  color: var(--cyan);
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
}

.single-ticket h1 {
  margin: 0.8rem 0 0.25rem;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.8rem;
  line-height: 0.8;
}

.single-ticket h1 small {
  margin-left: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.single-ticket p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.54rem;
}

.single-ticket > div {
  display: flex;
  justify-content: space-between;
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  font-size: 0.52rem;
}

.open-policy-box {
  border-color: #bed7ff;
  background: #edf3ff;
}

.open-policy-box p,
.security-note p,
.data-source-card p,
.media-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.5rem;
  line-height: 1.5;
}

.format-selector {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1rem;
}

.format-selector button {
  display: grid;
  min-height: 5.1rem;
  place-items: center;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
}

.format-selector button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.format-selector strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}

.format-selector span,
.format-selector small {
  font-size: 0.48rem;
}

.format-selector small {
  margin-top: 0.3rem;
  opacity: 0.65;
}

.date-rail--compact {
  grid-auto-columns: 3.3rem;
}

.choice-chips {
  display: flex;
  gap: 0.35rem;
}

.rule-summary {
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
}

.rule-summary > div {
  display: flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
}

.rule-summary > div + div {
  border-top: 1px solid var(--line);
}

.rule-summary span {
  color: var(--muted);
  font-size: 0.52rem;
}

.rule-summary strong {
  font-size: 0.56rem;
  text-align: right;
}

.seat-stepper {
  display: grid;
  gap: 1rem;
  grid-template-columns: 2.6rem 1fr 2.6rem;
  align-items: center;
}

.seat-stepper button {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
}

.seat-stepper svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.seat-stepper strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  text-align: center;
}

.seat-stepper strong span {
  display: block;
  color: var(--muted);
  font-family: "Manrope", sans-serif;
  font-size: 0.48rem;
}

.yellow-screen {
  background: var(--yellow);
}

.yellow-deal-hero {
  padding: 1.4rem 1.15rem 1rem;
}

.yellow-deal-hero h1 {
  margin: 0.8rem 0 0.6rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.15rem;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.yellow-deal-hero p {
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.55;
}

.yellow-deal-ticket {
  padding: 1rem;
  margin: 0.5rem 1.15rem 1rem;
  border-radius: 1rem;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0.7rem 0.7rem 0 rgba(23, 59, 255, 0.25);
}

.yellow-deal-ticket__time {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.yellow-deal-ticket__time strong {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
}

.yellow-deal-ticket__time span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

.yellow-deal-ticket__meta {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.5rem;
}

.yellow-deal-ticket__price {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 1rem 0;
  margin: 0.8rem 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.yellow-deal-ticket__price del,
.yellow-deal-ticket__price span {
  font-size: 0.5rem;
}

.yellow-deal-ticket__price span {
  color: var(--cyan);
}

.yellow-deal-ticket__price strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
}

.yellow-options {
  padding: 1rem 1.15rem 2rem;
}

.yellow-options h2 {
  margin: 0.25rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
}

.yellow-options p {
  margin: 0 0 0.8rem;
  font-size: 0.58rem;
  line-height: 1.5;
}

.kiosk-hero {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 1.2rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.kiosk-hero > div:first-child > span {
  color: var(--cyan);
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.kiosk-hero h1 {
  margin: 0.4rem 0 0.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.25rem;
  line-height: 0.9;
  text-transform: uppercase;
}

.kiosk-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.52rem;
}

.kiosk-pickup {
  display: grid;
  width: 6rem;
  min-height: 6rem;
  place-items: center;
  align-content: center;
  border-radius: 0.8rem;
  background: var(--yellow);
  color: var(--navy);
}

.kiosk-pickup svg,
.product-add svg,
.quantity-control svg,
.cart-dock svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.kiosk-pickup strong {
  margin-top: 0.3rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
}

.kiosk-pickup span {
  font-size: 0.42rem;
}

.product-list {
  padding: 1rem 1.15rem 7rem;
}

.product-card {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.product-mark {
  display: grid;
  width: 3rem;
  height: 3.4rem;
  place-items: center;
  transform: skew(-4deg);
  border-radius: 0.55rem;
  background: var(--blue);
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 900;
}

.product-card:nth-child(odd) .product-mark {
  background: var(--cyan);
  color: var(--navy);
}

.product-card__copy strong,
.product-card__copy span,
.product-card__copy small {
  display: block;
}

.product-card__copy strong {
  font-size: 0.64rem;
}

.product-card__copy span {
  margin: 0.12rem 0;
  color: var(--muted);
  font-size: 0.48rem;
}

.product-card__copy small {
  color: var(--blue);
  font-size: 0.54rem;
  font-weight: 800;
}

.product-add {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.55rem;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--blue);
  font-size: 0.5rem;
  font-weight: 800;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.quantity-control button {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
}

.quantity-control strong {
  font-size: 0.6rem;
}

.cart-dock {
  position: absolute;
  z-index: 13;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.65rem;
  border-radius: 0.9rem;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1rem 2rem rgba(4, 17, 45, 0.3);
}

.cart-dock > div {
  padding-left: 0.25rem;
}

.cart-dock strong,
.cart-dock span {
  display: block;
}

.cart-dock strong {
  font-size: 0.56rem;
}

.cart-dock span {
  margin-top: 0.1rem;
  color: var(--yellow);
  font-size: 0.65rem;
  font-weight: 800;
}

.cart-dock .button {
  min-height: 2.8rem;
  padding-inline: 0.8rem;
}

.order-confirmed {
  padding: 3rem 1.5rem;
  text-align: center;
}

.order-confirmed h2 {
  margin: 0.8rem 0 0.4rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
}

.order-confirmed p {
  margin: 0 auto 1rem;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.55;
}

.detail-module {
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}

.detail-module .context-actions {
  margin-top: 0.6rem;
}

.mini-action-grid {
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mini-action-grid button {
  display: flex;
  min-height: 3.2rem;
  flex: 1;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
  color: var(--ink);
  font-size: 0.52rem;
  font-weight: 800;
  text-align: left;
}

.mini-action-grid svg {
  width: 1rem;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
}

.booking-timeline {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.booking-timeline h2 {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
}

.booking-timeline > div {
  position: relative;
  display: grid;
  gap: 0.1rem 0.6rem;
  grid-template-columns: auto 1fr;
  padding: 0.45rem 0;
}

.timeline-dot {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.1rem;
  border: 2px solid var(--line);
  border-radius: 50%;
}

.timeline-dot.is-complete {
  border-color: var(--success);
  background: var(--success);
}

.booking-timeline strong {
  font-size: 0.55rem;
}

.booking-timeline small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.46rem;
}

.live-shell,
.scoreboard-screen,
.pair-screen {
  background: var(--navy);
  color: var(--white);
}

.live-header,
.scoreboard-header {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.live-header > img {
  width: 6.4rem;
  height: auto;
}

.live-header > strong {
  font-size: 0.7rem;
}

.live-status,
.sync-pill {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem;
  border-radius: 99px;
  background: rgba(67, 231, 255, 0.12);
  color: var(--cyan);
  font-size: 0.45rem;
  font-weight: 800;
  text-transform: uppercase;
}

.live-hero {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.15rem;
}

.live-hero::after {
  position: absolute;
  right: -2rem;
  bottom: -5rem;
  width: 12rem;
  height: 8rem;
  transform: rotate(-12deg);
  border: 1px solid rgba(239, 255, 49, 0.16);
  border-radius: 50%;
  content: "";
}

.live-hero h1 {
  margin: 0.6rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 0.8;
  text-transform: uppercase;
}

.live-hero h1 span {
  color: var(--yellow);
}

.live-hero p {
  max-width: 18rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.56rem;
  line-height: 1.55;
}

.live-booking-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: 1.35fr 0.75fr 1fr;
  margin: 0 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.1);
}

.live-booking-strip div {
  padding: 0.65rem;
  background: var(--navy-2);
}

.live-booking-strip span,
.live-booking-strip strong {
  display: block;
}

.live-booking-strip span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.42rem;
}

.live-booking-strip strong {
  margin-top: 0.16rem;
  font-size: 0.55rem;
}

.team-setup {
  padding: 1rem 1.15rem;
}

.section-heading-row--dark .section-kicker {
  color: var(--cyan);
}

.text-link--cyan {
  color: var(--cyan);
}

.team-color-row {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.7rem;
}

.team-chip {
  position: relative;
  display: grid;
  min-height: 6.2rem;
  align-content: end;
  overflow: hidden;
  padding: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
}

.team-chip > span {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  color: rgba(255, 255, 255, 0.12);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 900;
}

.team-chip strong {
  font-size: 0.54rem;
  line-height: 1.2;
}

.team-chip small {
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.42rem;
}

.team-chip--yellow {
  border-bottom: 0.22rem solid var(--yellow);
}

.team-chip--cyan {
  border-bottom: 0.22rem solid var(--cyan);
}

.team-chip--blue {
  border-bottom: 0.22rem solid #6680ff;
}

.pair-card {
  padding: 1rem;
  margin: 0.1rem 1.15rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  background: var(--blue);
}

.pair-card--paired {
  background: #087e53;
}

.pair-card__icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.pair-card__icon svg,
.live-secondary svg,
.scoreboard-header svg,
.clock-controls svg,
.rotation-card svg,
.score-team svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pair-card span {
  color: var(--cyan);
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pair-card h2 {
  margin: 0.35rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  line-height: 0.9;
  text-transform: uppercase;
}

.pair-card p {
  margin: 0 0 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.52rem;
  line-height: 1.5;
}

.live-secondary {
  margin: 0 1.15rem 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
}

.live-secondary button {
  display: grid;
  width: 100%;
  gap: 0.6rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  text-align: left;
}

.live-secondary button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.live-secondary strong,
.live-secondary small {
  display: block;
}

.live-secondary strong {
  font-size: 0.56rem;
}

.live-secondary small {
  margin-top: 0.12rem;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.46rem;
}

.pair-screen__content {
  padding: 1.6rem 1.15rem 2rem;
  text-align: center;
}

.pair-screen__content h1 {
  margin: 0.8rem 0 0.4rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 0.86;
  text-transform: uppercase;
}

.pair-screen__content > p,
.paired-success p {
  max-width: 18rem;
  margin: 0 auto 1rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.57rem;
  line-height: 1.55;
}

.mock-qr {
  display: grid;
  width: 14rem;
  height: 14rem;
  gap: 0.15rem;
  grid-template-columns: repeat(9, 1fr);
  padding: 0.75rem;
  margin: 1.1rem auto;
  border: 0.45rem solid var(--white);
  border-radius: 0.8rem;
  background: var(--white);
}

.mock-qr span {
  border-radius: 0.08rem;
  background: var(--white);
}

.mock-qr span.is-dark {
  background: var(--navy);
}

.short-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.7rem 0 1rem;
}

.short-code span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.5rem;
}

.short-code strong {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.security-note {
  margin-top: 0.8rem;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cyan);
  text-align: left;
}

.security-note p {
  color: rgba(255, 255, 255, 0.52);
}

.paired-success {
  padding-top: 3rem;
}

.paired-success > span {
  color: var(--cyan);
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
}

.scoreboard-screen {
  padding-bottom: 1.5rem;
}

.scoreboard-header > div {
  flex: 1;
}

.scoreboard-header > div span,
.scoreboard-header > div strong {
  display: block;
}

.scoreboard-header > div span {
  color: var(--cyan);
  font-size: 0.42rem;
  text-transform: uppercase;
}

.scoreboard-header > div strong {
  font-size: 0.62rem;
}

.sync-pill i,
.health-row i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #30e595;
  content: "";
}

.scoreboard-clock {
  padding: 1.1rem;
  text-align: center;
}

.scoreboard-clock span,
.scoreboard-clock small {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.48rem;
}

.scoreboard-clock strong {
  display: block;
  margin: 0.3rem 0;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 5.7rem;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
}

.scoreboard-teams {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.15rem;
}

.scoreboard-versus {
  color: rgba(255, 255, 255, 0.3);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
}

.score-team {
  padding: 0.8rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
  text-align: center;
}

.score-team--yellow {
  border-bottom: 0.28rem solid var(--yellow);
}

.score-team--cyan {
  border-bottom: 0.28rem solid var(--cyan);
}

.score-team__name {
  display: block;
  min-height: 2rem;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.2;
}

.score-team > strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 4rem;
  line-height: 1;
}

.score-team > div {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.score-team button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.clock-controls {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1.35fr 1fr;
  padding: 1rem 1.15rem;
}

.clock-controls button {
  display: grid;
  min-height: 3.7rem;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-size: 0.46rem;
  font-weight: 700;
}

.clock-controls .clock-main {
  background: var(--yellow);
  color: var(--navy);
}

.rotation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem;
  margin: 0 1.15rem;
  border-radius: 0.8rem;
  background: var(--blue);
}

.rotation-card span,
.rotation-card strong,
.rotation-card small {
  display: block;
}

.rotation-card span,
.rotation-card small {
  font-size: 0.44rem;
}

.rotation-card span {
  color: var(--cyan);
  font-weight: 800;
  text-transform: uppercase;
}

.rotation-card strong {
  margin: 0.12rem 0;
  font-size: 0.6rem;
}

.rotation-card small {
  color: rgba(255, 255, 255, 0.55);
}

.rotation-card button {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.6rem;
  border-radius: 99px;
  background: var(--white);
  color: var(--blue);
  font-size: 0.48rem;
  font-weight: 800;
}

.match-log {
  padding: 1rem 1.15rem 0;
}

.match-log > div:not(.slots-heading) {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.event-minute {
  color: var(--cyan);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.7rem;
}

.match-log strong {
  font-size: 0.52rem;
}

.match-log small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.46rem;
}

.finish-match {
  width: calc(100% - 2.3rem);
  margin: 1rem 1.15rem 0;
}

.veo-hero {
  padding: 1rem 1.15rem 0;
}

.veo-hero__image {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(4, 17, 45, 0.05), rgba(4, 17, 45, 0.88)),
    url("./assets/marketing/play-real-court-800.webp") center / cover;
  color: var(--white);
}

.veo-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.35rem 0.5rem;
  border-radius: 99px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.45rem;
  font-weight: 800;
}

.veo-hero__image > button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3.8rem;
  height: 3.8rem;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
}

.veo-hero__image > button svg,
.clip-card svg,
.processing-card svg,
.consent-card svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.veo-hero__image > div {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  left: 0.9rem;
}

.veo-hero__image > div span,
.veo-hero__image > div strong,
.veo-hero__image > div small {
  display: block;
}

.veo-hero__image > div span,
.veo-hero__image > div small {
  font-size: 0.46rem;
}

.veo-hero__image > div strong {
  margin: 0.15rem 0;
  font-size: 0.68rem;
}

.veo-hero__image > div small {
  color: rgba(255, 255, 255, 0.58);
}

.media-notice {
  border-color: #c4d2ff;
  background: #edf0ff;
  color: var(--blue);
}

.clip-rail,
.people-rail {
  display: grid;
  gap: 0.55rem;
  grid-auto-columns: 7.8rem;
  grid-auto-flow: column;
  overflow-x: auto;
  margin: 0.7rem -1.15rem 1rem;
  padding: 0 1.15rem;
  scrollbar-width: none;
}

.clip-card {
  display: grid;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.clip-card__visual {
  position: relative;
  display: grid;
  min-height: 6.4rem;
  place-items: center;
  overflow: hidden;
  border-radius: 0.75rem;
  background:
    linear-gradient(rgba(4, 17, 45, 0.18), rgba(4, 17, 45, 0.48)),
    url("./assets/marketing/play-real-court-800.webp") center / cover;
  color: var(--white);
}

.clip-card__visual small {
  position: absolute;
  right: 0.4rem;
  bottom: 0.35rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  background: rgba(4, 17, 45, 0.78);
  font-size: 0.4rem;
}

.clip-card > strong {
  margin-top: 0.4rem;
  font-size: 0.55rem;
}

.clip-card > span:last-child {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.44rem;
}

.processing-card,
.loyalty-next,
.privacy-card,
.support-case,
.league-rules {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 0.85rem;
  margin-top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
}

.processing-card__icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 0.6rem;
  background: var(--surface-2);
  color: var(--blue);
}

.processing-card strong {
  font-size: 0.58rem;
}

.processing-card p {
  margin: 0.15rem 0;
  color: var(--muted);
  font-size: 0.48rem;
  line-height: 1.4;
}

.processing-line {
  display: block;
  height: 0.28rem;
  overflow: hidden;
  margin-top: 0.45rem;
  border-radius: 99px;
  background: var(--surface-2);
}

.processing-line i {
  display: block;
  width: 68%;
  height: 100%;
  background: var(--blue);
}

.consent-card {
  padding: 1rem;
  margin-top: 0.8rem;
  border-radius: 0.9rem;
  background: var(--navy);
  color: var(--white);
}

.consent-card span {
  color: var(--cyan);
  font-size: 0.46rem;
  font-weight: 800;
  text-transform: uppercase;
}

.consent-card h2 {
  margin: 0.3rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
}

.consent-card p {
  margin: 0 0 0.8rem;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.5rem;
  line-height: 1.5;
}

.stats-hero {
  padding: 1.2rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.stats-hero__identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stats-hero__identity .profile-avatar {
  width: 3.3rem;
  height: 3.3rem;
  font-size: 1.2rem;
}

.stats-hero__identity span,
.stats-hero__identity strong,
.stats-hero__identity small {
  display: block;
}

.stats-hero__identity span {
  color: var(--cyan);
  font-size: 0.45rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stats-hero__identity strong {
  margin: 0.15rem 0;
  font-size: 0.64rem;
}

.stats-hero__identity small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.44rem;
}

.stat-big-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
}

.stat-big-grid article {
  padding: 0.7rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
}

.stat-big-grid strong,
.stat-big-grid span,
.stat-big-grid small {
  display: block;
}

.stat-big-grid strong {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
}

.stat-big-grid span {
  min-height: 1.4rem;
  font-size: 0.48rem;
  font-weight: 700;
}

.stat-big-grid small {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.38rem;
}

.stat-big-grid small svg {
  width: 0.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.tabs-row--sticky {
  position: sticky;
  z-index: 2;
  top: 0;
  background: rgba(246, 248, 255, 0.96);
  backdrop-filter: blur(0.8rem);
}

.streak-chart {
  display: flex;
  height: 9rem;
  align-items: end;
  gap: 0.45rem;
  padding: 0.9rem 0.7rem 0.6rem;
  margin-top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background:
    linear-gradient(rgba(23, 59, 255, 0.06) 1px, transparent 1px),
    var(--white);
  background-size: 100% 25%;
}

.streak-chart > span {
  position: relative;
  flex: 1;
  min-height: 1rem;
  border-radius: 0.3rem 0.3rem 0 0;
  background: var(--blue);
}

.streak-chart > span:nth-child(6),
.streak-chart > span:nth-child(8) {
  background: var(--yellow);
}

.streak-chart i {
  position: absolute;
  bottom: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.38rem;
  font-style: normal;
}

.community-stats {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.6rem;
}

.community-stats article {
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
}

.community-stats span,
.community-stats strong,
.community-stats small {
  display: block;
}

.community-stats span {
  color: var(--muted);
  font-size: 0.46rem;
}

.community-stats strong {
  margin: 0.2rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
}

.community-stats small {
  color: var(--blue);
  font-size: 0.42rem;
}

.data-source-card {
  margin-top: 0.8rem;
  border-color: #c7d0f7;
  background: #edf0ff;
  color: var(--blue);
}

.match-result {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.match-result > span {
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.match-result > div {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.match-result > div strong {
  font-size: 0.5rem;
}

.match-result > div strong:last-child {
  text-align: right;
}

.match-result b {
  padding: 0.25rem 0.35rem;
  border-radius: 0.35rem;
  background: var(--navy);
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.75rem;
}

.match-result > small {
  grid-column: 2;
  justify-self: end;
  color: var(--blue);
  font-size: 0.42rem;
  font-weight: 700;
}

.trust-legend h2 {
  margin: 0 0 0.8rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.trust-legend > div {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.trust-level {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--blue);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
}

.trust-level--2 {
  background: #fff8c9;
  color: #7b6900;
}

.trust-level--3 {
  background: #dff8ea;
  color: var(--success);
}

.trust-legend p {
  margin: 0;
  color: var(--muted);
  font-size: 0.52rem;
  line-height: 1.45;
}

.trust-legend strong {
  display: block;
  margin-bottom: 0.12rem;
  color: var(--ink);
}

.ranking-hero {
  position: relative;
  min-height: 14rem;
  overflow: hidden;
  padding: 1.4rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.ranking-hero h1 {
  margin: 0.65rem 0 0.3rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  line-height: 0.85;
  text-transform: uppercase;
}

.ranking-hero p {
  max-width: 18rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.54rem;
  line-height: 1.5;
}

.my-rank {
  position: absolute;
  right: 1.15rem;
  bottom: 1rem;
  display: grid;
  justify-items: end;
}

.my-rank span,
.my-rank small {
  font-size: 0.44rem;
}

.my-rank span {
  color: var(--cyan);
  text-transform: uppercase;
}

.my-rank strong {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.8rem;
  line-height: 0.9;
}

.my-rank small {
  color: rgba(255, 255, 255, 0.5);
}

.ranking-list {
  padding: 0.5rem 1.15rem 1.5rem;
}

.player-rank-row {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1.4rem auto 1fr auto;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.player-rank-row.is-me {
  padding-inline: 0.55rem;
  margin-inline: -0.55rem;
  border: 1px solid #c6d0ff;
  border-radius: 0.75rem;
  background: #edf0ff;
}

.rank-number {
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
}

.player-avatar {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--blue);
  font-size: 0.52rem;
  font-weight: 800;
}

.player-avatar--yellow {
  background: var(--yellow);
  color: var(--navy);
}

.player-avatar--cyan {
  background: var(--cyan);
  color: var(--navy);
}

.player-avatar--blue {
  background: var(--blue);
  color: var(--white);
}

.player-avatar--navy {
  background: var(--navy);
  color: var(--white);
}

.player-rank-row > strong {
  font-size: 0.58rem;
}

.player-rank-row > small {
  color: var(--muted);
  font-size: 0.48rem;
}

.ranking-method {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem;
  margin: 0.8rem 0;
  border-radius: 0.8rem;
  background: var(--yellow);
}

.ranking-method svg,
.setting-toggle svg {
  width: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.ranking-method p {
  margin: 0;
  font-size: 0.5rem;
  line-height: 1.5;
}

.ranking-method strong {
  display: block;
}

.setting-toggle {
  position: relative;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.setting-toggle strong,
.setting-toggle small {
  display: block;
}

.setting-toggle strong {
  font-size: 0.58rem;
}

.setting-toggle small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.47rem;
  line-height: 1.4;
}

.setting-toggle input {
  position: absolute;
  opacity: 0;
}

.setting-toggle i {
  position: relative;
  width: 2.4rem;
  height: 1.35rem;
  border-radius: 99px;
  background: var(--line);
  transition: background 180ms ease;
}

.setting-toggle i::after {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 0.99rem;
  height: 0.99rem;
  border-radius: 50%;
  background: var(--white);
  content: "";
  transition: transform 180ms ease;
}

.setting-toggle input:checked + i {
  background: var(--blue);
}

.setting-toggle input:checked + i::after {
  transform: translateX(1.05rem);
}

.community-hero,
.league-hero {
  position: relative;
  min-height: 16rem;
  overflow: hidden;
  padding: 1.4rem 1.15rem;
  background: var(--blue);
  color: var(--white);
}

.community-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 16rem;
}

.community-hero h1,
.league-hero h1 {
  margin: 0.65rem 0 0.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 0.82;
  text-transform: uppercase;
}

.community-hero p,
.league-hero p {
  margin: 0 0 0.8rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.55rem;
}

.community-ball {
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  display: grid;
  width: 10rem;
  height: 10rem;
  place-items: center;
  border: 1.3rem solid rgba(239, 255, 49, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.16);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 900;
}

.community-section + .community-section {
  border-top: 1px solid var(--line);
}

.community-person {
  display: grid;
  justify-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
}

.community-person .player-avatar {
  width: 3rem;
  height: 3rem;
}

.community-person strong {
  margin-top: 0.45rem;
  font-size: 0.55rem;
}

.community-person small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.42rem;
}

.challenge-card {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr;
  padding: 0.8rem;
  margin-top: 0.6rem;
  border-radius: 0.8rem;
  background: var(--yellow);
}

.challenge-card--quiet {
  border: 1px solid var(--line);
  background: var(--white);
}

.challenge-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
}

.challenge-icon svg,
.community-clip svg,
.team-actions svg,
.fixture-card svg,
.competition-card svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.challenge-card span:not(.challenge-icon),
.challenge-card strong,
.challenge-card p {
  display: block;
}

.challenge-card > div > span {
  font-size: 0.44rem;
  font-weight: 800;
  text-transform: uppercase;
}

.challenge-card strong {
  margin: 0.15rem 0;
  font-size: 0.6rem;
}

.challenge-card p {
  margin: 0;
  font-size: 0.48rem;
  line-height: 1.4;
}

.challenge-progress {
  height: 0.3rem;
  overflow: hidden;
  margin-top: 0.5rem;
  border-radius: 99px;
  background: rgba(4, 17, 45, 0.12);
}

.challenge-progress i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.community-clip {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  margin-top: 0.6rem;
}

.community-clip > div {
  display: grid;
  height: 3.5rem;
  place-items: center;
  border-radius: 0.7rem;
  background:
    linear-gradient(rgba(4, 17, 45, 0.25), rgba(4, 17, 45, 0.35)),
    url("./assets/marketing/play-real-court-800.webp") center / cover;
  color: var(--white);
}

.community-clip strong,
.community-clip small {
  display: block;
}

.community-clip strong {
  font-size: 0.57rem;
}

.community-clip small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.43rem;
}

.community-clip > button {
  background: transparent;
  color: var(--muted);
}

.conduct-note--surface {
  margin-top: 0.2rem;
  background: var(--white);
}

.team-hero {
  padding: 1.5rem 1.15rem;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.team-crest {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  margin: 0 auto 0.8rem;
  transform: rotate(-4deg);
  border: 0.25rem solid var(--yellow);
  border-radius: 1rem;
  background: var(--blue);
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
}

.team-hero > span {
  color: var(--cyan);
  font-size: 0.45rem;
  font-weight: 800;
  text-transform: uppercase;
}

.team-hero h1 {
  margin: 0.35rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
}

.team-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.5rem;
}

.team-actions {
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.team-actions button {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-size: 0.48rem;
  font-weight: 800;
}

.roster-row {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.roster-row strong,
.roster-row small {
  display: block;
}

.roster-row strong {
  font-size: 0.57rem;
}

.roster-row small {
  color: var(--muted);
  font-size: 0.44rem;
}

.roster-row button {
  background: transparent;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.recurring-invite {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.8rem;
  margin-top: 1rem;
  border-radius: 0.8rem;
  background: var(--yellow);
}

.recurring-invite > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.55rem;
  background: var(--navy);
  color: var(--yellow);
}

.recurring-invite svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.recurring-invite strong,
.recurring-invite p {
  display: block;
}

.recurring-invite strong {
  font-size: 0.57rem;
}

.recurring-invite p {
  margin: 0.15rem 0 0;
  font-size: 0.46rem;
}

.recurring-invite button {
  background: transparent;
  color: var(--blue);
  font-size: 0.48rem;
  font-weight: 800;
}

.team-history {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
}

.team-history h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.7rem;
}

.team-history div {
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
  text-align: center;
}

.team-history span,
.team-history small {
  display: block;
}

.team-history span {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
}

.team-history small {
  color: var(--muted);
  font-size: 0.4rem;
}

.league-hero {
  background:
    linear-gradient(90deg, rgba(4, 17, 45, 0.95), rgba(4, 17, 45, 0.4)),
    url("./assets/marketing/play-real-court-800.webp") center / cover;
}

.fixture-card {
  padding: 0.9rem;
  margin: 0.7rem 0 1.2rem;
  border-radius: 0.9rem;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.fixture-card > span,
.fixture-card > small {
  font-size: 0.45rem;
}

.fixture-card > span {
  color: var(--cyan);
  font-weight: 800;
}

.fixture-card > div {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0.8rem 0;
}

.fixture-card > div strong {
  font-size: 0.57rem;
}

.fixture-card > div b {
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
}

.fixture-card > small {
  color: rgba(255, 255, 255, 0.48);
}

.fixture-card button {
  margin-top: 0.8rem;
  background: transparent;
  color: var(--yellow);
  font-size: 0.48rem;
  font-weight: 800;
}

.competition-card {
  display: grid;
  width: 100%;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.75rem;
  margin-top: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.competition-card--corporate {
  border-color: #c7d0ff;
  background: #edf0ff;
}

.competition-mark {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--blue);
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
}

.competition-card strong,
.competition-card small {
  display: block;
}

.competition-card strong {
  font-size: 0.58rem;
}

.competition-card small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.46rem;
}

.league-detail-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.league-logo {
  display: grid;
  width: 4.2rem;
  height: 4.2rem;
  place-items: center;
  border: 0.2rem solid var(--yellow);
  border-radius: 1rem;
  background: var(--blue);
  color: var(--yellow);
}

.league-logo svg {
  width: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.league-detail-head span,
.league-detail-head p {
  color: var(--cyan);
  font-size: 0.43rem;
  font-weight: 800;
  text-transform: uppercase;
}

.league-detail-head h1 {
  margin: 0.2rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.league-detail-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
}

.standings-head,
.standing-row {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1.3rem 1fr repeat(3, 1.6rem);
  align-items: center;
  padding: 0.6rem 0;
}

.standings-head {
  grid-template-columns: 1fr auto;
  color: var(--muted);
  font-size: 0.42rem;
  font-weight: 800;
  text-transform: uppercase;
}

.standing-row {
  border-top: 1px solid var(--line);
  font-size: 0.5rem;
}

.standing-row.is-my-team {
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 0.55rem;
  background: var(--yellow);
}

.standing-row b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
}

.standing-row span {
  text-align: center;
}

.team-sheet h2 {
  margin: 0 0 0.3rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.7rem;
  text-transform: uppercase;
}

.team-sheet > p {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.5rem;
  line-height: 1.5;
}

.team-sheet > div {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.team-sheet svg {
  width: 0.9rem;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
}

.team-sheet strong,
.team-sheet span {
  font-size: 0.5rem;
}

.team-sheet span {
  color: var(--success);
}

.league-rules {
  grid-template-columns: auto 1fr auto;
  margin-top: 1rem;
}

.league-rules svg {
  width: 1rem;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
}

.league-rules strong {
  font-size: 0.56rem;
}

.league-rules p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.44rem;
  line-height: 1.4;
}

.league-rules button {
  background: transparent;
  color: var(--muted);
}

.loyalty-screen {
  background: #e9edff;
}

.loyalty-pass {
  position: relative;
  overflow: hidden;
  padding: 1.2rem;
  margin: 1rem 1.15rem;
  border-radius: 1rem;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0.7rem 0.7rem 0 var(--blue);
}

.loyalty-pass::after {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  border: 1.5rem solid rgba(239, 255, 49, 0.08);
  border-radius: 50%;
  content: "";
}

.loyalty-pass__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.loyalty-pass__top img {
  width: 6.5rem;
}

.loyalty-pass__top span,
.loyalty-pass > span {
  color: var(--cyan);
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.loyalty-pass > h1 {
  margin: 0.4rem 0 0.8rem;
  color: var(--yellow);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.2rem;
  line-height: 0.8;
}

.loyalty-pass .loyalty-progress {
  position: relative;
  z-index: 1;
}

.loyalty-pass > p {
  position: relative;
  z-index: 1;
  margin: 0.8rem 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.5rem;
}

.loyalty-pass .button {
  position: relative;
  z-index: 1;
}

.loyalty-next {
  border-color: #dbe51d;
  background: var(--yellow);
}

.loyalty-next > span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
}

.loyalty-next svg,
.loyalty-event svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.loyalty-next strong {
  font-size: 0.58rem;
}

.loyalty-next p {
  margin: 0.15rem 0 0;
  font-size: 0.48rem;
  line-height: 1.4;
}

.loyalty-content > h2 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.7rem;
}

.loyalty-event {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.loyalty-event > span {
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.7rem;
}

.loyalty-event strong,
.loyalty-event small {
  display: block;
}

.loyalty-event strong {
  font-size: 0.54rem;
}

.loyalty-event small {
  color: var(--muted);
  font-size: 0.42rem;
}

.loyalty-event b {
  color: var(--muted);
  font-size: 0.48rem;
}

.loyalty-event b.is-earned {
  color: var(--success);
}

.notification-list {
  padding: 0.4rem 1.15rem;
}

.notification-item {
  position: relative;
  display: grid;
  width: 100%;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.notification-item.is-unread::before {
  position: absolute;
  top: 0.9rem;
  left: -0.65rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

.notification-item__icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 0.65rem;
  background: var(--surface-2);
  color: var(--blue);
}

.notification-item svg,
.notification-settings svg,
.manage-option svg,
.policy-window svg,
.security-score svg,
.session-row svg,
.support-search svg,
.support-case svg,
.policy-list svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notification-item > span:nth-child(2) strong,
.notification-item > span:nth-child(2) small,
.notification-item > span:nth-child(2) em {
  display: block;
}

.notification-item strong {
  font-size: 0.57rem;
}

.notification-item small {
  margin: 0.14rem 0;
  color: var(--muted);
  font-size: 0.46rem;
  line-height: 1.4;
}

.notification-item em {
  color: var(--muted-2);
  font-size: 0.4rem;
  font-style: normal;
}

.notification-item > svg {
  align-self: center;
  color: var(--muted-2);
}

.notification-settings {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.8rem;
  margin: 0.8rem 1.15rem 1.5rem;
  border-radius: 0.8rem;
  background: var(--yellow);
}

.notification-settings strong {
  font-size: 0.55rem;
}

.notification-settings p {
  margin: 0.12rem 0 0;
  font-size: 0.44rem;
  line-height: 1.4;
}

.notification-settings button {
  background: transparent;
  color: var(--blue);
  font-size: 0.46rem;
  font-weight: 800;
}

.manage-summary {
  padding: 1.2rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.manage-summary h1 {
  margin: 0.7rem 0 0.2rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
}

.manage-summary p {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.5rem;
}

.policy-window {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid #bce4cc;
  border-radius: 0.8rem;
  background: #e9f9f0;
  color: var(--success);
}

.policy-window strong {
  display: block;
  color: var(--ink);
  font-size: 0.56rem;
}

.policy-window p {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font-size: 0.46rem;
}

.manage-option {
  display: grid;
  width: 100%;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.manage-option > span {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border-radius: 0.6rem;
  background: var(--surface-2);
  color: var(--blue);
}

.manage-option strong,
.manage-option small {
  display: block;
}

.manage-option strong {
  font-size: 0.57rem;
}

.manage-option small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.46rem;
  line-height: 1.4;
}

.manage-option > svg {
  color: var(--muted);
}

.refund-panel {
  padding: 0.9rem;
  margin-top: 0.8rem;
  border: 1px solid #efbec8;
  border-radius: 0.8rem;
  background: #fff1f4;
}

.refund-panel h2 {
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
}

.refund-panel > div {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  color: var(--muted);
  font-size: 0.52rem;
}

.refund-panel .refund-total {
  margin-bottom: 0.6rem;
  border-top: 1px solid #efbec8;
  color: var(--ink);
  font-weight: 800;
}

.refund-panel .button + .button {
  margin-top: 0.4rem;
}

.settings-content .field {
  margin-bottom: 0.85rem;
}

.settings-heading {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.68rem;
}

.danger-link {
  display: block;
  margin: 1rem auto;
  background: transparent;
  color: var(--danger);
  font-size: 0.5rem;
  font-weight: 800;
}

.security-score {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  border-radius: 0.8rem;
  background: var(--navy);
  color: var(--white);
}

.security-score > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(67, 231, 255, 0.12);
  color: var(--cyan);
}

.security-score strong {
  font-size: 0.58rem;
}

.security-score p {
  margin: 0.1rem 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.45rem;
}

.session-row {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.session-row > span {
  color: var(--blue);
}

.session-row strong,
.session-row small {
  display: block;
}

.session-row strong {
  font-size: 0.55rem;
}

.session-row small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.43rem;
}

.session-row b,
.session-row button {
  background: transparent;
  color: var(--blue);
  font-size: 0.45rem;
  font-weight: 800;
}

.privacy-card {
  grid-template-columns: auto 1fr;
  background: var(--navy);
  color: var(--white);
}

.privacy-card > svg {
  width: 1.2rem;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.8;
}

.privacy-card strong {
  font-size: 0.57rem;
}

.privacy-card p {
  margin: 0.15rem 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.45rem;
  line-height: 1.4;
}

.privacy-card button {
  grid-column: 2;
  justify-self: start;
  background: transparent;
  color: var(--yellow);
  font-size: 0.44rem;
  font-weight: 800;
}

.support-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.75rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
  color: var(--muted);
}

.support-search input {
  width: 100%;
  min-height: 3rem;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.56rem;
}

.support-case {
  grid-template-columns: 1fr auto;
  margin: 1rem 0;
}

.support-case > .status-pill {
  grid-column: 1 / -1;
  justify-self: start;
}

.support-case strong {
  font-size: 0.56rem;
}

.support-case p,
.support-case small {
  margin: 0.12rem 0;
  color: var(--muted);
  font-size: 0.44rem;
}

.support-case button {
  background: transparent;
  color: var(--muted);
}

.policy-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
}

.policy-list button {
  display: grid;
  width: 100%;
  gap: 0.12rem 0.6rem;
  grid-template-columns: 1fr auto;
  padding: 0.75rem;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.policy-list button + button {
  border-top: 1px solid var(--line);
}

.policy-list strong {
  font-size: 0.55rem;
}

.policy-list span {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.43rem;
}

.policy-list svg {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--muted);
}

.roadmap-intro,
.states-intro {
  padding: 1.4rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.roadmap-intro h1,
.states-intro h1 {
  margin: 0.7rem 0 0.35rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 0.84;
  text-transform: uppercase;
}

.roadmap-intro p,
.states-intro p {
  max-width: 18rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.54rem;
  line-height: 1.5;
}

.phase-list {
  padding: 1rem 1.15rem;
}

.phase-hub-hero {
  padding: 1.4rem 1.15rem 1.5rem;
  background: var(--navy);
  color: var(--white);
}

.phase-hub-hero h1 {
  margin: 0.65rem 0 0.4rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 0.82;
  text-transform: uppercase;
}

.phase-hub-hero p {
  max-width: 19rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.54rem;
  line-height: 1.55;
}

.phase-hub-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1rem 1.15rem 1.5rem;
}

.phase-hub-grid .universe-card {
  min-height: 10rem;
}

.phase-card {
  position: relative;
  display: grid;
  width: 100%;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  overflow: hidden;
  padding: 0.8rem;
  margin-bottom: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.phase-card > span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  transform: rotate(-4deg);
  border-radius: 0.55rem;
  background: var(--blue);
  color: var(--white);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
}

.phase-card--navy > span {
  background: var(--navy);
}

.phase-card--yellow > span {
  background: var(--yellow);
  color: var(--navy);
}

.phase-card--cyan > span {
  background: var(--cyan);
  color: var(--navy);
}

.phase-card strong {
  font-size: 0.58rem;
}

.phase-card p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.44rem;
  line-height: 1.4;
}

.phase-card > svg,
.states-lab-link svg,
.incident-row svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.states-lab-link {
  display: grid;
  width: calc(100% - 2.3rem);
  gap: 0.65rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.8rem;
  margin: 0 1.15rem 1.5rem;
  border-radius: 0.8rem;
  background: var(--yellow);
  color: var(--navy);
  text-align: left;
}

.states-lab-link strong,
.states-lab-link small {
  display: block;
}

.states-lab-link strong {
  font-size: 0.56rem;
}

.states-lab-link small {
  margin-top: 0.12rem;
  font-size: 0.44rem;
}

.ops-hero {
  padding: 1.2rem 1.15rem;
  background: var(--navy);
  color: var(--white);
}

.ops-hero > span {
  color: var(--cyan);
  font-size: 0.45rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ops-hero h1 {
  margin: 0.4rem 0 0.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
}

.ops-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.5rem;
  line-height: 1.45;
}

.health-row {
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.health-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.42rem;
}

.ops-metrics {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.8rem 1.15rem 0;
}

.ops-metrics article {
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
}

.ops-metrics span,
.ops-metrics strong,
.ops-metrics small {
  display: block;
}

.ops-metrics span {
  color: var(--muted);
  font-size: 0.42rem;
}

.ops-metrics strong {
  margin: 0.12rem 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
}

.ops-metrics small {
  color: var(--blue);
  font-size: 0.38rem;
}

.ops-content h2 {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.68rem;
}

.incident-row {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 4.3rem 1fr auto;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.incident-row > span {
  color: var(--blue);
  font-size: 0.43rem;
  font-weight: 800;
}

.incident-row--warning > span {
  color: #a76700;
}

.incident-row strong,
.incident-row small {
  display: block;
}

.incident-row strong {
  font-size: 0.52rem;
}

.incident-row small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.4rem;
}

.incident-row button,
.incident-row b {
  background: transparent;
  color: var(--blue);
  font-size: 0.42rem;
  font-weight: 800;
}

.states-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr 1fr;
  padding: 1rem 1.15rem 1.5rem;
}

.states-grid button {
  display: grid;
  min-height: 10rem;
  align-content: start;
  justify-items: start;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.states-grid button > span {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  margin-bottom: auto;
  border-radius: 0.6rem;
  background: var(--surface-2);
  color: var(--blue);
}

.states-grid svg {
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.states-grid strong {
  margin-top: 0.8rem;
  font-size: 0.58rem;
}

.states-grid small {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.43rem;
  line-height: 1.45;
}

@media (max-width: 52rem) {
  body {
    background: var(--surface);
  }

  .prototype-stage {
    display: block;
    min-height: 100svh;
    padding: 0;
  }

  .prototype-intro {
    display: none;
  }

  .app-shell {
    width: 100%;
    height: 100svh;
    min-height: 38rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-shell::before {
    display: none;
  }
}

@media (max-height: 47rem) and (min-width: 52.001rem) {
  .prototype-stage {
    align-items: start;
  }

  .app-shell {
    height: 43rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}