/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.20_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    background: var(--bg);
    color: var(--text);
  }
  body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  /* One focus treatment for the whole app. `:focus-visible` (not `:focus`) so a
     mouse click never draws it, and the ring flips yellow→navy with the theme
     so it is always the high-contrast option against the page. */
  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: inherit;
  }

  ::-moz-placeholder {
    color: var(--text-subtle);
    opacity: 1;
  }

  ::placeholder {
    color: var(--text-subtle);
    opacity: 1;
  }

  ::-moz-selection {
    background: var(--y-500);
    color: var(--n-700);
  }

  ::selection {
    background: var(--y-500);
    color: var(--n-700);
  }

  hr {
    border-color: var(--border);
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
/* ---------- surfaces ---------- */
.card {
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-1);
}
.card-hover {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.card-hover:hover {
  border-color: var(--border-strong);
    box-shadow: var(--shadow-lift);
}
/* A whole card that is one big control (news / match / player / team cards). */
.card-interactive {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.card-interactive:hover {
  border-color: var(--border-strong);
}
.card-interactive:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.card-interactive:hover {
    box-shadow: var(--shadow-lift);
  }
.surface-raised {
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-2);
    box-shadow: var(--shadow-card);
}
/* The yellow hairline that tops a section — the campaign's brush stroke, as
     a 3px rule. */
.divider {
  border-top-width: 1px;
  border-color: var(--border);
}
/* ---------- chips & badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-2);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}
.chip-brand {
  color: var(--brand-300);
    border-color: color-mix(in srgb, var(--brand-500) 35%, transparent);
    background-color: color-mix(in srgb, var(--brand-500) 14%, transparent);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.badge-brand {
    background-color: var(--brand-500);
    color: var(--on-brand);
  }
/* ---------- buttons ----------
     Every variant shares the same focus ring and press feedback, so a button
     feels identical wherever it appears. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.btn:disabled {
  pointer-events: none;
  opacity: 0.6;
}
.btn-primary {
    color: var(--on-brand);
    background-image: var(--grad-brand);
  }
.btn-primary:hover {
    background-image: linear-gradient(135deg, var(--y-400), var(--y-200));
  }
.btn-primary:active {
    background-image: linear-gradient(135deg, var(--y-600), var(--y-400));
  }
/* Solid navy — the campaign's second half. */
.btn-navy {
    color: var(--on-secondary);
    background-color: var(--secondary);
  }
.btn-navy:hover {
    background-color: var(--secondary-strong);
  }
.btn-ghost {
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-2);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--border-strong);
    background-color: var(--surface-3);
}
.glass {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.btn-secondary {
  border-width: 1px;
  color: var(--brand-200);
    border-color: color-mix(in srgb, var(--brand-500) 40%, transparent);
    background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
}
.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--brand-500) 25%, transparent);
    border-color: color-mix(in srgb, var(--brand-500) 60%, transparent);
  }
.btn-dark {
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--bg-2);
  color: var(--text);
}
.btn-dark:hover {
  border-color: var(--border-strong);
    background-color: var(--surface-2);
}
/* ---------- forms ----------
     `.input` is the single field style: inputs, selects and textareas. The
     brand-tinted focus border + halo replaces the old `focus:border-border-strong`,
     which was nearly invisible. */
.\!input {
  height: 2.75rem;
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-2);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.input {
  height: 2.75rem;
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-2);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.\!input {
    outline: none !important;
  }
.input {
    outline: none;
  }
.\!input:hover {
    border-color: var(--border-strong) !important;
  }
.input:hover {
    border-color: var(--border-strong);
  }
.\!input:focus,
  .\!input:focus-visible {
    outline: none !important;
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent) !important;
  }
.input:focus,
  .input:focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent);
  }
.\!input:focus,
  .\!input:focus-visible {
    outline: none !important;
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent) !important;
  }
.\!input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

  .\!input[aria-invalid="true"] {
    border-color: var(--live) !important;
  }
.input-invalid,
  .input[aria-invalid="true"] {
    border-color: var(--live);
  }

  .\!input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent) !important;
  }
.input-invalid:focus,
  .input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent);
  }
textarea.\!input {
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
textarea.input {
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.field-label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.field-error {
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--live);
    background-color: color-mix(in srgb, var(--live) 12%, transparent);
}
/* ---------- tabs ---------- */
.tab-bar {
  display: inline-flex;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-2);
  padding: 0.25rem;
}
.tab {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--text-muted);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.tab:hover {
    color: var(--text);
    background-color: var(--hover-overlay);
  }
.tab-active,
  .tab[aria-selected="true"] {
    color: var(--on-brand);
    background-image: var(--grad-brand);
  }
.tab-active:hover,
  .tab[aria-selected="true"]:hover {
    background-color: transparent;
    color: var(--on-brand);
  }
/* ---------- modals & sheets ---------- */
.modal-scrim {
    background-color: var(--scrim);
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
.modal-panel {
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-1);
    box-shadow: var(--shadow-lift);
}
/* ---------- authentication screens ----------
     The sign-in screen is the app's front door, so it gets a treatment of its
     own rather than the generic `.card` / `.input` pair: a stadium photograph
     under a club-coloured wash, and a glass panel floating on top of it.

     Everything here is driven by the `--auth-*` tokens declared at the bottom
     of this file (dark defaults + a `:root.light` block), so light mode is a
     token flip rather than a second set of components. */
/* The glass panel that holds the form. */
.auth-card {
    border-radius: 26px;
    border: 1px solid var(--auth-card-border);
    background: var(--auth-card-bg);
    box-shadow: var(--auth-card-shadow);
    backdrop-filter: blur(18px) saturate(140%);
  }
/* A field: icon at the start, floating label, optional action at the end.
     The label is positioned rather than animated by JS — it lifts on `:focus`
     and whenever the field carries content (`.is-filled`). */
.auth-field {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--auth-field-border);
    background: var(--auth-field-bg);
    transition:
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease;
  }
.auth-field:hover {
    border-color: var(--border-strong);
  }
.auth-field:focus-within {
    border-color: var(--brand-500);
    background: var(--auth-field-bg-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 20%, transparent);
  }
.auth-field[data-invalid="true"] {
    border-color: var(--live);
  }
.auth-field[data-invalid="true"]:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 22%, transparent);
  }
/* 56px tall — a comfortable touch target on a phone. The generous inline
     padding leaves room for the leading icon and the trailing action. */
.auth-input {
  height: 3.5rem;
  width: 100%;
  background-color: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
    padding-inline: 3rem;
    padding-top: 1.15rem;
    border: 0;
    outline: none;
}
.auth-input::-moz-placeholder {
    color: transparent; /* the floating label is the placeholder */
    -moz-transition: color 0.15s ease;
    transition: color 0.15s ease;
  }
.auth-input::placeholder {
    color: transparent; /* the floating label is the placeholder */
    transition: color 0.15s ease;
  }
.auth-field:focus-within .auth-input::-moz-placeholder {
    color: var(--text-subtle);
  }
.auth-field:focus-within .auth-input::placeholder {
    color: var(--text-subtle);
  }
.auth-label {
  pointer-events: none;
  position: absolute;
  font-weight: 600;
  color: var(--text-muted);
    inset-inline-start: 3rem;
    top: 50%;
    font-size: 15px;
    transform: translateY(-50%);
    transform-origin: top;
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.18s ease,
      font-size 0.18s ease;
}
.auth-field:focus-within .auth-label,
  .auth-field.is-filled .auth-label {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: translateY(-1.55rem);
  }
.auth-field:focus-within .auth-label {
    color: var(--brand-300);
  }
/* Leading icon + trailing action share one hit area size. */
.auth-field-icon {
  pointer-events: none;
  position: absolute;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: var(--text-subtle);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    inset-inline-start: 1rem;
}
.auth-field:focus-within .auth-field-icon {
    color: var(--brand-300);
  }
.auth-field-action {
  position: absolute;
  top: 50%;
  display: grid;
  height: 2.25rem;
  width: 2.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  border-radius: 9999px;
  color: var(--text-subtle);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    inset-inline-end: 0.5rem;
}
.auth-field-action:hover {
    color: var(--text);
    background-color: var(--hover-overlay);
  }
/* Secondary actions + social providers: quiet, full-width, large targets. */
.auth-chip {
  display: inline-flex;
  height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.auth-chip:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.auth-chip {
    border-color: var(--auth-field-border);
    background: var(--auth-field-bg);
    color: var(--text);
  }
.auth-chip:hover {
    border-color: var(--border-strong);
    background: var(--auth-field-bg-focus);
  }
/* Benefit tiles under the card. */
.auth-benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border-width: 1px;
  padding: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    border-color: var(--auth-field-border);
    background: var(--auth-field-bg);
}
.auth-benefit:hover {
    border-color: color-mix(in srgb, var(--brand-500) 45%, transparent);
    transform: translateY(-2px);
  }
/* ---------- membership landing ----------
     Two surfaces used only by the single-membership page. They are components
     rather than utility soup because both carry a gradient plus a shadow plus a
     hover, which is four classes repeated at every call site and one of them
     always drifts. */
/* A benefit tile: icon, label, lift on hover. */
.membership-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 1.5rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface-1);
  padding: 1.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.membership-tile:hover {
    border-color: color-mix(in srgb, var(--brand-500) 45%, transparent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
/* The single membership card — always the navy treatment, in both themes.
     This is the page's one "object", the thing a fan is being asked to buy, and
     it should look like a card in the hand rather than like the page around it.
     Light mode gets the same navy for that reason; only the ambient shadow
     changes with the theme. */
.membership-card {
    border-radius: 32px;
    background-image: var(--grad-navy);
    box-shadow: var(--shadow-lift);
    position: relative;
    isolation: isolate;
    /*
     * Gold-on-navy, in BOTH themes.
     *
     * `--brand-300` is deliberately a dark gold under `:root.light` because its
     * job there is readable gold *text on the pale page*. This card is navy in
     * light mode too, so that dark gold lands on navy and the price reads at
     * roughly 2:1. Re-pointing the foreground golds at the fixed `--y-500` for
     * everything inside the card is the same scoped-token trick the "next match"
     * card uses, and it leaves the rest of the light theme untouched.
     */
    --brand-200: var(--y-500);
    --brand-300: var(--y-500);
    --brand-400: var(--y-500);
  }
.membership-card::after {
    /* Gold hairline along the top edge — the campaign's brush stroke. */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background-image: var(--grad-brand);
    border-start-start-radius: 32px;
    border-start-end-radius: 32px;
  }
/* ---------- brand fills ---------- */
.brand-gradient {
    background-image: var(--grad-brand);
    color: var(--on-brand);
  }
.navy-gradient {
    background-image: var(--grad-navy);
    color: var(--on-secondary);
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-3 {
  inset: 0.75rem;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-x-5 {
  left: 1.25rem;
  right: 1.25rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-bottom-40 {
  bottom: -10rem;
}
.-end-1 {
  inset-inline-end: -0.25rem;
}
.-end-1\.5 {
  inset-inline-end: -0.375rem;
}
.-end-2 {
  inset-inline-end: -0.5rem;
}
.-end-6 {
  inset-inline-end: -1.5rem;
}
.-start-2 {
  inset-inline-start: -0.5rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-16 {
  top: -4rem;
}
.-top-20 {
  top: -5rem;
}
.-top-24 {
  top: -6rem;
}
.-top-32 {
  top: -8rem;
}
.-top-6 {
  top: -1.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.end-0 {
  inset-inline-end: 0px;
}
.end-10 {
  inset-inline-end: 2.5rem;
}
.end-2 {
  inset-inline-end: 0.5rem;
}
.end-3 {
  inset-inline-end: 0.75rem;
}
.end-4 {
  inset-inline-end: 1rem;
}
.end-\[-40px\] {
  inset-inline-end: -40px;
}
.end-\[-50px\] {
  inset-inline-end: -50px;
}
.end-\[-60px\] {
  inset-inline-end: -60px;
}
.left-1\/2 {
  left: 50%;
}
.start-0 {
  inset-inline-start: 0px;
}
.start-0\.5 {
  inset-inline-start: 0.125rem;
}
.start-1\/2 {
  inset-inline-start: 50%;
}
.start-3 {
  inset-inline-start: 0.75rem;
}
.start-4 {
  inset-inline-start: 1rem;
}
.start-5 {
  inset-inline-start: 1.25rem;
}
.start-\[1\.375rem\] {
  inset-inline-start: 1.375rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1\/2 {
  top: 50%;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-20 {
  top: 5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[90\] {
  z-index: 90;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.-mt-10 {
  margin-top: -2.5rem;
}
.-mt-14 {
  margin-top: -3.5rem;
}
.-mt-16 {
  margin-top: -4rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ms-0\.5 {
  margin-inline-start: 0.125rem;
}
.ms-1 {
  margin-inline-start: 0.25rem;
}
.ms-1\.5 {
  margin-inline-start: 0.375rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.ms-4 {
  margin-inline-start: 1rem;
}
.ms-auto {
  margin-inline-start: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-px {
  margin-top: 1px;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[1\.62\/1\] {
  aspect-ratio: 1.62/1;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[104px\] {
  height: 104px;
}
.h-\[240px\] {
  height: 240px;
}
.h-\[280px\] {
  height: 280px;
}
.h-\[360px\] {
  height: 360px;
}
.h-\[380px\] {
  height: 380px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[460px\] {
  height: 460px;
}
.h-\[46vh\] {
  height: 46vh;
}
.h-\[520px\] {
  height: 520px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[54px\] {
  height: 54px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[76px\] {
  height: 76px;
}
.h-\[88px\] {
  height: 88px;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-max {
  height: -moz-max-content;
  height: max-content;
}
.h-px {
  height: 1px;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[52vh\] {
  max-height: 52vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[16px\] {
  min-height: 16px;
}
.min-h-\[180px\] {
  min-height: 180px;
}
.min-h-\[20vh\] {
  min-height: 20vh;
}
.min-h-\[220px\] {
  min-height: 220px;
}
.min-h-\[280px\] {
  min-height: 280px;
}
.min-h-\[30vh\] {
  min-height: 30vh;
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[50vh\] {
  min-height: 50vh;
}
.min-h-\[520px\] {
  min-height: 520px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[62vh\] {
  min-height: 62vh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-52 {
  width: 13rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[360px\] {
  width: 360px;
}
.w-\[380px\] {
  width: 380px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[460px\] {
  width: 460px;
}
.w-\[520px\] {
  width: 520px;
}
.w-\[52px\] {
  width: 52px;
}
.w-\[54px\] {
  width: 54px;
}
.w-\[68px\] {
  width: 68px;
}
.w-\[76px\] {
  width: 76px;
}
.w-\[min\(280px\2c 78vw\)\] {
  width: min(280px, 78vw);
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[16px\] {
  min-width: 16px;
}
.min-w-\[2\.75rem\] {
  min-width: 2.75rem;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[54px\] {
  min-width: 54px;
}
.min-w-\[560px\] {
  min-width: 560px;
}
.min-w-\[68px\] {
  min-width: 68px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[19rem\] {
  max-width: 19rem;
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[52px\] {
  max-width: 52px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-50 {
  --tw-scale-x: .5;
  --tw-scale-y: .5;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-mt-20 {
  scroll-margin-top: 5rem;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.columns-2 {
  -moz-columns: 2;
       columns: 2;
}
.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-end {
  place-items: end;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}
.self-start {
  align-self: flex-start;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[1\.9rem\] {
  border-radius: 1.9rem;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[2\.5rem\] {
  border-radius: 2.5rem;
}
.rounded-\[22px\] {
  border-radius: 22px;
}
.rounded-\[26px\] {
  border-radius: 26px;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-s-\[18px\] {
  border-start-start-radius: 18px;
  border-end-start-radius: 18px;
}
.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-\[10px\] {
  border-width: 10px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-s-\[3px\] {
  border-inline-start-width: 3px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-\[3px\] {
  border-top-width: 3px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-\[color-mix\(in_srgb\2c var\(--pitch\)_30\%\2c transparent\)\] {
  border-color: color-mix(in srgb,var(--pitch) 30%,transparent);
}
.border-\[color-mix\(in_srgb\2c var\(--warn\)_50\%\2c transparent\)\] {
  border-color: color-mix(in srgb,var(--warn) 50%,transparent);
}
.border-\[var\(--auth-field-border\)\] {
  border-color: var(--auth-field-border);
}
.border-bg {
  border-color: var(--bg);
}
.border-border {
  border-color: var(--border);
}
.border-border-strong {
  border-color: var(--border-strong);
}
.border-brand-500 {
  border-color: var(--brand-500);
}
.border-live {
  border-color: var(--live);
}
.border-nav {
  border-color: var(--nav-bg);
}
.border-nav-border {
  border-color: var(--nav-border);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-surface-2 {
  border-color: var(--surface-2);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4);
}
.border-b-border {
  border-bottom-color: var(--border);
}
.border-s-brand-500 {
  border-inline-start-color: var(--brand-500);
}
.border-t-brand-500 {
  border-top-color: var(--brand-500);
}
.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.\!bg-white\/75 {
  background-color: rgb(255 255 255 / 0.75) !important;
}
.bg-\[\#EEDD1B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 221 27 / var(--tw-bg-opacity, 1));
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_10\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 10%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_12\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 12%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_14\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 14%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_15\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 15%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_16\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 16%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_18\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 18%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_20\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 20%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_40\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 40%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--brand-500\)_60\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--brand-500) 60%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--info\)_18\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--info) 18%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--live\)_14\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--live) 14%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--live\)_16\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--live) 16%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--pitch\)_10\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--pitch) 10%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--pitch\)_15\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--pitch) 15%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--pitch\)_16\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--pitch) 16%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--pitch\)_18\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--pitch) 18%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--pitch\)_20\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--pitch) 20%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--warn\)_10\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--warn) 10%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--warn\)_20\%\2c transparent\)\] {
  background-color: color-mix(in srgb,var(--warn) 20%,transparent);
}
.bg-\[color\:var\(--countdown-box-bg\)\] {
  background-color: var(--countdown-box-bg);
}
.bg-\[var\(--auth-field-bg\)\] {
  background-color: var(--auth-field-bg);
}
.bg-accent-soft {
  background-color: var(--accent-soft);
}
.bg-bg {
  background-color: var(--bg);
}
.bg-bg-2 {
  background-color: var(--bg-2);
}
.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/15 {
  background-color: rgb(0 0 0 / 0.15);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-border {
  background-color: var(--border);
}
.bg-border-strong {
  background-color: var(--border-strong);
}
.bg-brand-500 {
  background-color: var(--brand-500);
}
.bg-current {
  background-color: currentColor;
}
.bg-live {
  background-color: var(--live);
}
.bg-nav {
  background-color: var(--nav-bg);
}
.bg-navy {
  background-color: var(--secondary);
}
.bg-navy-700 {
  background-color: var(--n-700);
}
.bg-pitch {
  background-color: var(--pitch);
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-surface {
  background-color: var(--surface-1);
}
.bg-surface-2 {
  background-color: var(--surface-2);
}
.bg-surface-3 {
  background-color: var(--surface-3);
}
.bg-transparent {
  background-color: transparent;
}
.bg-warn {
  background-color: var(--warn);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-brand {
  background-image: var(--grad-brand);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-navy {
  background-image: var(--grad-navy);
}
.from-black\/40 {
  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/60 {
  --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface {
  --tw-gradient-from: var(--surface-1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-bg-2 {
  --tw-gradient-to: var(--bg-2) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-16 {
  padding: 4rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[2\.5px\] {
  padding: 2.5px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pe-14 {
  padding-inline-end: 3.5rem;
}
.pe-4 {
  padding-inline-end: 1rem;
}
.ps-1 {
  padding-inline-start: 0.25rem;
}
.ps-10 {
  padding-inline-start: 2.5rem;
}
.ps-2 {
  padding-inline-start: 0.5rem;
}
.ps-9 {
  padding-inline-start: 2.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-center {
  text-align: center;
}
.\!text-start {
  text-align: start !important;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[110px\] {
  font-size: 110px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#0E1A33\] {
  --tw-text-opacity: 1;
  color: rgb(14 26 51 / var(--tw-text-opacity, 1));
}
.text-\[\#65758B\] {
  --tw-text-opacity: 1;
  color: rgb(101 117 139 / var(--tw-text-opacity, 1));
}
.text-\[\#EEDD1B\] {
  --tw-text-opacity: 1;
  color: rgb(238 221 27 / var(--tw-text-opacity, 1));
}
.text-\[\#F0E138\] {
  --tw-text-opacity: 1;
  color: rgb(240 225 56 / var(--tw-text-opacity, 1));
}
.text-\[color-mix\(in_srgb\2c var\(--on-brand\)_75\%\2c transparent\)\] {
  color: color-mix(in srgb,var(--on-brand) 75%,transparent);
}
.text-\[color\:var\(--countdown-fg\)\] {
  color: var(--countdown-fg);
}
.text-\[color\:var\(--countdown-label\)\] {
  color: var(--countdown-label);
}
.text-\[color\:var\(--match-team-name\)\] {
  color: var(--match-team-name);
}
.text-\[color\:var\(--match-time-fg\)\] {
  color: var(--match-time-fg);
}
.text-\[color\:var\(--match-vs\)\] {
  color: var(--match-vs);
}
.text-accent {
  color: var(--accent);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-brand-300 {
  color: var(--brand-300);
}
.text-brand-400 {
  color: var(--brand-400);
}
.text-brand-500 {
  color: var(--brand-500);
}
.text-info {
  color: var(--info);
}
.text-live {
  color: var(--live);
}
.text-nav-active {
  color: var(--nav-fg-active);
}
.text-nav-fg {
  color: var(--nav-fg);
}
.text-navy-700 {
  color: var(--n-700);
}
.text-on-brand {
  color: var(--on-brand);
}
.text-on-secondary {
  color: var(--on-secondary);
}
.text-pitch {
  color: var(--pitch);
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-text {
  color: var(--text);
}
.text-text-muted {
  color: var(--text-muted);
}
.text-text-subtle {
  color: var(--text-subtle);
}
.text-warn {
  color: var(--warn);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/10 {
  color: rgb(255 255 255 / 0.1);
}
.text-white\/25 {
  color: rgb(255 255 255 / 0.25);
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-\[0\.07\] {
  opacity: 0.07;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: var(--shadow-card);
  --tw-shadow-colored: var(--shadow-card);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lift {
  --tw-shadow: var(--shadow-lift);
  --tw-shadow-colored: var(--shadow-lift);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-white\/15 {
  --tw-ring-color: rgb(255 255 255 / 0.15);
}
.ring-white\/70 {
  --tw-ring-color: rgb(255 255 255 / 0.7);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[100px\] {
  --tw-blur: blur(100px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[120px\] {
  --tw-blur: blur(120px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[70px\] {
  --tw-blur: blur(70px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[90px\] {
  --tw-blur: blur(90px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_6px_18px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-drop-shadow: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[filter\] {
  transition-property: filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Horizontal snap scrollers (fixture rails) hide their scrollbar. */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
.no-scrollbar::-webkit-scrollbar {
    display: none;
  }
/* ---------- safe areas ----------
     The notch/home-indicator insets, as utilities. They resolve to 0 in a
     desktop browser, so the same class is correct on every target and there is
     no `isNative` branch in any layout. `viewportFit: "cover"` in the root
     layout is what makes them non-zero on a device. */
.pt-safe {
    padding-top: env(safe-area-inset-top);
  }
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
.px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
/* Clears the fixed bottom nav *and* the home indicator below it. */
.pb-nav {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

/* ============================================================================
   Ismaily Club — design system
   ----------------------------------------------------------------------------
   Two club colours, taken from the 2025/26 app campaign artwork: the saturated
   golden yellow of the backdrop (#eedd1b, the same yellow already used by the
   bottom bar) and the deep navy of the crest and the display type (#142a57).
   Everything else is derived from those two — surfaces are navy tinted rather
   than neutral grey, so even the "grey" chrome reads as club colour.

   Two ramps below are FIXED (identical in light and dark) because they are
   *fills*: a yellow button is the same yellow in both themes. The semantic
   tokens under `:root` / `:root.light` are what flips.
   ========================================================================= */
:root {
  /* ---------- fixed brand ramps (fills, never re-themed) ---------- */
  /* Club gold. --y-500 IS the canonical brand gold and is fixed at #EEDD1B; the
     other stops are tints (100→400) and shades (600→800) of that exact hue, so
     every gold on the site belongs to one family and the dominant gold is the
     requested colour. Change --y-500 to move the whole system. */
  --y-100: #fdf7bf;
  --y-200: #f8ec83;
  --y-300: #f3e34e;
  --y-400: #efdf2f;
  --y-500: #eedd1b; /* club gold — the single source of the brand yellow */
  --y-600: #d4c40f;
  --y-700: #a99b0b;
  --y-800: #7d7307;

  --n-50: #eef2fa;
  --n-100: #d9e2f2;
  --n-200: #b3c2e0;
  --n-300: #7d93c0;
  --n-400: #4a6299;
  --n-500: #24406f;
  --n-600: #142a57; /* club navy — crest + display type */
  --n-700: #0e1f42;
  --n-800: #0a162f;
  --n-900: #060d1e;

  /* Ismaily yellow → navy, the campaign's own pairing. */
  --grad-brand: linear-gradient(135deg, var(--y-500), var(--y-300));
  --grad-navy: linear-gradient(135deg, var(--n-600), var(--n-500));

  /* ---------- dark theme (default) ---------- */
  --bg: #070d1c;
  --bg-2: #0b142a;
  --surface-1: #101b33;
  --surface-2: #17233f;
  --surface-3: #1e2c4d;
  --border: #223052;
  --border-strong: #33456e;
  --text: #edf2fd;
  --text-muted: #94a4c6;
  --text-subtle: #6d7fa6;

  /* Primary. On dark surfaces every brand token — fill AND foreground — is the
     exact club gold, so gold buttons, borders, icons and text are one colour.
     Light mode re-states 400/300/200 as darker golds of the same hue, because
     bright #EEDD1B text on the pale page is ~1.6:1 and unreadable; the 500 fill
     never moves, so gold fills stay exactly #EEDD1B in both themes. */
  --brand-500: var(--y-500);
  --brand-400: var(--y-500);
  --brand-300: var(--y-500);
  --brand-200: var(--y-500);
  --on-brand: var(--n-700); /* type laid on a yellow fill */

  /* Secondary — the navy, as a usable surface/fill in dark mode. */
  --secondary: var(--n-500);
  --secondary-strong: var(--n-600);
  --on-secondary: #ffffff;

  /* Accent — the kit's cyan trim. Used for info, links on media, live-ish UI. */
  --accent: #45aedc;
  --accent-soft: rgba(69, 174, 220, 0.16);

  /* Status */
  --pitch: #2fd08d;
  --live: #fb5069;
  --info: #4fb6e4;
  --warn: #f7b32b;

  /* Interaction */
  --ring: var(--y-500);
  --hover-overlay: rgba(255, 255, 255, 0.06);
  --active-overlay: rgba(255, 255, 255, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8);

  /* Veil laid over hero / match artwork so white text stays readable. */
  --hero-veil: linear-gradient(160deg, rgba(6, 13, 30, 0.62), rgba(6, 13, 30, 0.24));
  --scrim: rgba(6, 13, 30, 0.66);

  /* ---------- bottom navigation ----------
     A fixed, fully opaque club-yellow bar. Deliberately *not* redefined under
     `.light` below: the bar is the same yellow in both themes, which is what
     lets its foreground colours be fixed too. Tying the text to `--text` would
     put dark-theme white on yellow — around 1.8:1, unreadable.

     The foregrounds are chosen against #eedd1b specifically:
       --nav-fg         rgba(0,0,0,.62) over the yellow ≈ 5.1:1  (AA, ≥4.5)
       --nav-fg-active  black                          ≈ 12.7:1  (AAA)
     The active pill is club navy with a white glyph (>9:1 on the pill), so the
     bar carries both club colours and the active tab is unmistakable. */
  --nav-bg: var(--y-500);
  --nav-fg: rgba(0, 0, 0, 0.62);
  --nav-fg-active: #000000;
  --nav-border: rgba(0, 0, 0, 0.14);
  --nav-pill: var(--grad-navy);

  /* ---------- "Next match" showcase card ----------
     These tokens are the single recolour point for the homepage upcoming-match
     panel. The DEFAULTS below are the card's dark-theme look and are what every
     shared piece (card fill, team name, VS, the countdown widget) reads by
     default, so DARK MODE IS UNCHANGED. Light mode overrides them, but ONLY
     inside `:root.light .next-match-card`, so dark keeps this navy look and the
     shared Countdown on other surfaces keeps its defaults too. */
  --match-card-bg: var(--grad-navy);
  --match-veil: var(--hero-veil);
  --match-team-name: #ffffff;
  --match-time-fg: var(--brand-300);
  --match-vs: rgba(255, 255, 255, 0.6);
  --countdown-fg: var(--brand-300);
  --countdown-label: rgba(255, 255, 255, 0.6);
  --countdown-box-bg: rgba(0, 0, 0, 0.3);
}

:root.light {
  /* Light-mode page + header share one light blue (per brand request). Both the
     <body> and the sticky header read from --bg, so setting it here recolours
     the whole light theme's canvas in one place. */
  --bg: #eafaff;
  --bg-2: #e9eff9;
  --surface-1: #ffffff;
  --surface-2: #f1f5fc;
  --surface-3: #e6edf8;
  --border: #dee6f3;
  --border-strong: #c0cce3;
  --text: var(--n-700);
  --text-muted: #55668d;
  --text-subtle: #7a89ab;

  /* Foreground golds stay dark for legibility (bright #EEDD1B text on the pale
     page is ~1.6:1 and unreadable). These are deep shades of the SAME #EEDD1B
     hue, so gold text still matches the brand gold — just dark enough to read.
     The 500 fill does not move; gold fills remain exactly #EEDD1B. */
  --brand-400: #7c7008;
  --brand-300: #6c6207;
  --brand-200: #5d5406;
  --on-brand: var(--n-700);

  --secondary: var(--n-600);
  --secondary-strong: var(--n-700);

  --accent: #0b6d93;
  --accent-soft: rgba(11, 109, 147, 0.1);

  --pitch: #0e7c55;
  --live: #c81e38;
  --info: #0b6d93;
  --warn: #8a5b00;

  --ring: var(--n-500);
  --hover-overlay: rgba(20, 42, 87, 0.05);
  --active-overlay: rgba(20, 42, 87, 0.1);
  --shadow-card: 0 1px 2px rgba(20, 42, 87, 0.06), 0 8px 24px -14px rgba(20, 42, 87, 0.24);
  --shadow-lift: 0 2px 4px rgba(20, 42, 87, 0.08), 0 18px 40px -18px rgba(20, 42, 87, 0.3);

  --hero-veil: linear-gradient(160deg, rgba(6, 13, 30, 0.55), rgba(6, 13, 30, 0.2));
  --scrim: rgba(10, 22, 47, 0.45);
}

/* LIGHT MODE ONLY — the "Next match" card's cyan palette. Scoped to
   `:root.light` so the `:root` navy defaults above stay in force in dark mode,
   and to `.next-match-card` so the shared Countdown is untouched elsewhere.
   `--match-card-bg` overrides the fill WITHOUT touching the shared `--grad-navy`
   (still used by the bottom-nav pill and navy buttons).
   NOTE: white/yellow type on this cyan is below WCAG AA — see the design note. */
:root.light .next-match-card {
  --match-card-bg: #19a8dc;
  --match-veil: transparent; /* no darkening veil over the cyan */
  --match-team-name: #ffffff;
  /* Kickoff time + "VS" share the exact same gold in light mode. */
  --match-time-fg: #eedd1b;
  --match-vs: #eedd1b;
  --countdown-box-bg: #0097ce;
  --countdown-fg: #eedd1b;
  --countdown-label: #eedd1b;
}

/* LIGHT-MODE button recolour. Dark mode keeps the untouched btn-primary /
   btn-ghost look — these rules simply do not match without `.light`. */
:root.light .next-match-card .nm-book {
  /* solid gold fill (overrides btn-primary's gradient); label + ticket icon
     take the text colour. #65758b was requested but is only 3.4:1 on #EEDD1B,
     so a slightly darker slate (#4a5568 ≈ 5.3:1) is used for legibility. */
  background: #eedd1b;
  color: #4a5568;
}
:root.light .next-match-card .nm-mc {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff; /* label + arrow (arrow inherits via currentColor) */
}
/* Hover mirrors the hero buttons (both animate via `.btn`'s transition-all):
   the primary darkens its fill (like hero-primary-navy → #0088bb), the ghost
   brightens by raising its white opacity (like "Our teams" bg-white/70 → white),
   text held constant. Dark mode keeps btn-primary/btn-ghost's own hovers. */
:root.light .next-match-card .nm-book:hover {
  background: var(--y-600); /* slightly darker gold; #4a5568 text stays readable */
}
:root.light .next-match-card .nm-mc:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* LIGHT MODE ONLY — the Classic hero's spotlight card mirrors the standalone
   NextMatch card: cyan fill + gold VS/countdown, white team names. Dark keeps
   its navy-gradient look untouched (these rules only match under `.light`).
   `.navy-gradient` is used solely by this card, so splitting its light value is
   safe; dark still gets `background-image: var(--grad-navy)` from @layer. */
:root.light .navy-gradient {
  background: #19a8dc;
}
:root.light .spotlight-card {
  --countdown-box-bg: #0097ce;
  --countdown-fg: #eedd1b;
  --countdown-label: #eedd1b;
}
:root.light .spotlight-card .spotlight-vs {
  color: #eedd1b; /* dark keeps text-brand-300 (= #EEDD1B in dark) */
}

/* LIGHT MODE ONLY — the hero primary CTA ("View squad", the btn-navy variant on
   the gold hero) turns cyan. Dedicated marker so the SHARED `.btn-navy` (the
   match-centre "watch stream" button) is NOT affected; dark keeps btn-navy. The
   arrow icon inherits `color` (currentColor), so it becomes white too. */
:root.light .hero-primary-navy {
  background-color: #0097ce;
  color: #ffffff;
}
:root.light .hero-primary-navy:hover {
  background-color: #0088bb;
}

/* LIGHT MODE ONLY — the header icon buttons (search / theme / language) adopt
   the nav-link colours so they read identically to the nav links. Values mirror
   the nav links' literals in Shell.tsx's navLink (#65758B default, #EEDD1B
   hover). Dark mode is untouched: without `.light` these rules do not match, so
   `iconBtn`'s `text-text-muted` / `hover:text-brand-400` still governs there.
   The login button (headerCta, no `.header-icon`) and the nav links are not
   affected. */
:root.light .header-icon {
  color: #65758b;
}
:root.light .header-icon:hover {
  color: #eedd1b;
}

/* ---------- native shell ----------
   Rules that only ever apply inside the app. `.is-native` is set on <html> by
   NativeShell once Capacitor confirms the platform, so the website is untouched
   by all of them. */

.is-native {
  /* No text selection or long-press callout on chrome — a native app does not
     let you select a tab label. Inputs and article bodies opt back in below. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  /* Kill the grey flash Android draws on every tap; the components have their
     own :active states. */
  -webkit-tap-highlight-color: transparent;
}

.is-native input,
.is-native textarea,
.is-native [contenteditable],
.is-native article,
.is-native p {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

.is-native body {
  /* Stop the whole WebView rubber-banding past its content, which on iOS
     exposes a blank strip above the header. Individual scrollers still bounce. */
  overscroll-behavior-y: none;
}

/* The status bar is drawn over the WebView (see capacitor.config.ts), so the
   sticky header has to reserve the inset itself. */
.is-native .app-header {
  padding-top: env(safe-area-inset-top);
}

/*
 * The bottom navigation's fill, stated on the element itself rather than only
 * through the `bg-nav` utility.
 *
 * Belt and braces on purpose: this bar must never be see-through, and a utility
 * class is one purge or one specificity clash away from vanishing. Declared
 * after `@tailwind utilities`, so it also wins against any utility that would
 * otherwise tint it.
 *
 * `background-color` (not the `background` shorthand) so it cannot silently
 * clear a future background-image, and no alpha anywhere in the chain.
 */
.app-bottom-nav {
  background-color: var(--nav-bg, #eedd1b);
  backdrop-filter: none;
  opacity: 1;
}

/* While the keyboard is up the bottom nav is both useless and in the way. */
.keyboard-open .app-bottom-nav {
  display: none;
}

/* The ML Kit scanner renders in a *native* camera view behind the WebView, so
   everything the WebView paints has to become transparent for it to be visible.
   `scanner-active` is added by @meelza/native for the duration of a scan. */
.scanner-active,
.scanner-active body {
  background: transparent !important;
}
.scanner-active .app-chrome {
  visibility: hidden;
}

/* ---------- authentication backdrop ----------
   Declared after `@tailwind utilities` for the same reason the bottom nav is:
   these are full-bleed decorative layers that must not lose to a utility.

   The composition, back to front:
     1. `.auth-photo`     the stadium photograph, top-anchored and masked so it
                          dissolves into the page rather than ending on a line;
     2. `.auth-photo-veil` a club-navy wash over it, so white type on the hero
                          stays readable in BOTH themes (the hero is
                          self-contained dark, like the site footer);
     3. `.auth-glow`      two soft radial lights — gold from the top corner,
                          navy/cyan from the opposite one — which is what makes
                          the page read as a gradient rather than a photo.

   The dark values are the defaults; `:root.light` restates only what has to
   change, so the club identity survives the theme flip. */
:root {
  --auth-card-bg: linear-gradient(160deg, rgba(23, 35, 63, 0.82), rgba(9, 17, 36, 0.92));
  --auth-card-border: rgba(255, 255, 255, 0.1);
  --auth-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 40px 90px -36px rgba(0, 0, 0, 0.95);
  --auth-field-bg: rgba(255, 255, 255, 0.045);
  --auth-field-bg-focus: rgba(255, 255, 255, 0.08);
  --auth-field-border: rgba(255, 255, 255, 0.11);
  --auth-photo-veil: linear-gradient(
    180deg,
    rgba(6, 13, 30, 0.55) 0%,
    rgba(6, 13, 30, 0.72) 45%,
    var(--bg) 100%
  );
  --auth-photo-opacity: 0.9;
  --auth-glow-brand: rgba(238, 221, 27, 0.16);
  --auth-glow-accent: rgba(69, 174, 220, 0.18);
  --auth-pattern-stroke: rgba(255, 255, 255, 0.13);
}

:root.light {
  --auth-card-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
  --auth-card-border: rgba(20, 42, 87, 0.1);
  --auth-card-shadow: 0 2px 6px rgba(20, 42, 87, 0.06), 0 34px 70px -34px rgba(20, 42, 87, 0.45);
  --auth-field-bg: rgba(20, 42, 87, 0.045);
  --auth-field-bg-focus: #ffffff;
  --auth-field-border: rgba(20, 42, 87, 0.12);
  /* Lighter wash, and it fades into the light page colour instead of the navy. */
  --auth-photo-veil: linear-gradient(
    180deg,
    rgba(8, 28, 58, 0.5) 0%,
    rgba(8, 28, 58, 0.62) 45%,
    var(--bg) 100%
  );
  --auth-photo-opacity: 0.85;
  --auth-glow-brand: rgba(238, 221, 27, 0.3);
  --auth-glow-accent: rgba(25, 168, 220, 0.22);
  --auth-pattern-stroke: rgba(255, 255, 255, 0.16);
}

.auth-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
}

/* One box shared by the photo, its veil and the pattern, so they cannot drift
   apart. Tall enough to sit behind the header AND the top of the card. */
.auth-backdrop {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: min(62vh, 560px);
  pointer-events: none;
}

.auth-photo {
  position: absolute;
  inset: 0;
  background-image: url(/images/footer-bg.jpg);
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  background-color: var(--n-700); /* fallback if the photo is missing */
  opacity: var(--auth-photo-opacity);
  /* Dissolve the bottom edge so the photo never ends on a hard line. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

.auth-photo-veil {
  position: absolute;
  inset: 0;
  background: var(--auth-photo-veil);
}

.auth-glow {
  position: absolute;
  inset-inline: -20%;
  top: -18%;
  height: 130%;
  background:
    radial-gradient(46% 40% at 18% 8%, var(--auth-glow-brand), transparent 70%),
    radial-gradient(50% 44% at 88% 30%, var(--auth-glow-accent), transparent 72%);
}

/* Abstract football markings — a centre circle and two penalty arcs, drawn as
   an SVG element in the page so it can inherit `--auth-pattern-stroke`. */
.auth-pattern {
  position: absolute;
  inset: 0;
  color: var(--auth-pattern-stroke);
}

/* The error shake. Small amplitude on purpose: enough to notice, not enough to
   feel like a rejection. */
@keyframes auth-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
.auth-shake {
  animation: auth-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@media (prefers-reduced-motion: reduce) {
  .auth-shake {
    animation: none;
  }
}

/* ---------- motion ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}
@keyframes roll {
  from {
    transform: translateX(-46%) rotate(0deg);
  }
  to {
    transform: translateX(46%) rotate(540deg);
  }
}

.animate-rise {
  animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.live-dot {
  animation: pulse-dot 1.2s ease-in-out infinite;
}
.animate-roll {
  animation: roll 6s ease-in-out infinite alternate;
}

/* Screen-to-screen transition. Short and subtle on purpose: a route change in a
   client-rendered app is near-instant, and a long animation makes it feel
   slower than it is. The direction is logical (`translateX` flipped under RTL
   via the dir selector) so Arabic pushes in from the correct edge. */
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translate3d(var(--screen-from, 12px), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.screen-enter {
  animation: screen-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[dir="rtl"] .screen-enter {
  --screen-from: -12px;
}

@media (prefers-reduced-motion: reduce) {
  .animate-rise,
  .live-dot,
  .animate-roll,
  .screen-enter {
    animation: none;
  }
}

.placeholder\:text-text-subtle::-moz-placeholder {
  color: var(--text-subtle);
}

.placeholder\:text-text-subtle::placeholder {
  color: var(--text-subtle);
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:bottom-0::before {
  content: var(--tw-content);
  bottom: 0px;
}

.before\:start-\[27px\]::before {
  content: var(--tw-content);
  inset-inline-start: 27px;
}

.before\:top-12::before {
  content: var(--tw-content);
  top: 3rem;
}

.before\:w-px::before {
  content: var(--tw-content);
  width: 1px;
}

.before\:bg-border::before {
  content: var(--tw-content);
  background-color: var(--border);
}

.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-x-0::after {
  content: var(--tw-content);
  left: 0px;
  right: 0px;
}

.after\:-bottom-px::after {
  content: var(--tw-content);
  bottom: -1px;
}

.after\:h-\[3px\]::after {
  content: var(--tw-content);
  height: 3px;
}

.after\:origin-center::after {
  content: var(--tw-content);
  transform-origin: center;
}

.after\:scale-x-0::after {
  content: var(--tw-content);
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:scale-x-100::after {
  content: var(--tw-content);
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:bg-brand-500::after {
  content: var(--tw-content);
  background-color: var(--brand-500);
}

.after\:transition-transform::after {
  content: var(--tw-content);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:duration-200::after {
  content: var(--tw-content);
  transition-duration: 200ms;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[\#F0E138\]\/40:hover {
  border-color: rgb(240 225 56 / 0.4);
}

.hover\:border-\[\#F0E138\]\/50:hover {
  border-color: rgb(240 225 56 / 0.5);
}

.hover\:border-border-strong:hover {
  border-color: var(--border-strong);
}

.hover\:border-brand-500:hover {
  border-color: var(--brand-500);
}

.hover\:bg-navy-800:hover {
  background-color: var(--n-800);
}

.hover\:bg-surface-2:hover {
  background-color: var(--surface-2);
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:text-\[\#EEDD1B\]:hover {
  --tw-text-opacity: 1;
  color: rgb(238 221 27 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#F0E138\]:hover {
  --tw-text-opacity: 1;
  color: rgb(240 225 56 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-400:hover {
  color: var(--brand-400);
}

.hover\:text-live:hover {
  color: var(--live);
}

.hover\:text-text:hover {
  color: var(--text);
}

.hover\:text-text-muted:hover {
  color: var(--text-muted);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:after\:scale-x-100:hover::after {
  content: var(--tw-content);
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.focus\:border-brand-500:focus {
  border-color: var(--brand-500);
}

.focus\:shadow-\[0_0_0_4px_color-mix\(in_srgb\2c var\(--brand-500\)_20\%\2c transparent\)\]:focus {
  --tw-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-500) 20%,transparent);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus-visible\:text-text:focus-visible {
  color: var(--text);
}

.active\:scale-90:active {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-surface-3:active {
  background-color: var(--surface-3);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:text-text-subtle:disabled {
  color: var(--text-subtle);
}

.disabled\:no-underline:disabled {
  text-decoration-line: none;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group:focus-within .group-focus-within\:visible {
  visibility: visible;
}

.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-brand-300 {
  color: var(--brand-300);
}

.group:hover .group-hover\:text-brand-500 {
  color: var(--brand-500);
}

.group:hover .group-hover\:text-nav-active {
  color: var(--nav-fg-active);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:brightness-105 {
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group:focus-visible .group-focus-visible\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:duration-700 {
    transition-duration: 700ms;
  }

  .motion-safe\:ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:animate-none {
    animation: none;
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }

  .motion-reduce\:after\:transition-none::after {
    content: var(--tw-content);
    transition-property: none;
  }
}

@media (min-width: 640px) {

  .sm\:invisible {
    visibility: hidden;
  }

  .sm\:order-1 {
    order: 1;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .sm\:-mt-20 {
    margin-top: -5rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-40 {
    height: 10rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-72 {
    height: 18rem;
  }

  .sm\:h-80 {
    height: 20rem;
  }

  .sm\:h-96 {
    height: 24rem;
  }

  .sm\:h-\[76px\] {
    height: 76px;
  }

  .sm\:min-h-\[620px\] {
    min-height: 620px;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-\[76px\] {
    width: 76px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:columns-3 {
    -moz-columns: 3;
         columns: 3;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_auto_1fr\] {
    grid-template-columns: 1fr auto 1fr;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-14 {
    padding: 3.5rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:text-start {
    text-align: start;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-\[11px\] {
    font-size: 11px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:ms-auto {
    margin-inline-start: auto;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:min-h-\[440px\] {
    min-height: 440px;
  }

  .lg\:max-w-\[720px\] {
    max-width: 720px;
  }

  .lg\:columns-4 {
    -moz-columns: 4;
         columns: 4;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.15fr_1fr\] {
    grid-template-columns: 1.15fr 1fr;
  }

  .lg\:grid-cols-\[1\.3fr_1fr\] {
    grid-template-columns: 1.3fr 1fr;
  }

  .lg\:grid-cols-\[1\.5fr_1fr\] {
    grid-template-columns: 1.5fr 1fr;
  }

  .lg\:grid-cols-\[1fr_1\.4fr\] {
    grid-template-columns: 1fr 1.4fr;
  }

  .lg\:grid-cols-\[240px_1fr\] {
    grid-template-columns: 240px 1fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pb-12 {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1280px) {

  .xl\:max-w-\[1400px\] {
    max-width: 1400px;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.ltr\:hover\:translate-x-1:hover:where([dir="ltr"], [dir="ltr"] *) {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:-rotate-90:where([dir="rtl"], [dir="rtl"] *) {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:rotate-0:where([dir="rtl"], [dir="rtl"] *) {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:rotate-90:where([dir="rtl"], [dir="rtl"] *) {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:text-end:where([dir="rtl"], [dir="rtl"] *) {
  text-align: end;
}

.rtl\:hover\:-translate-x-1:hover:where([dir="rtl"], [dir="rtl"] *) {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

.\[\&\>\*\]\:mb-3>* {
  margin-bottom: 0.75rem;
}