/* ============================================================================
   experience.css — mobile-first pass, loaded last.
   Header & mobile menu, Sign in button, hero on phones, dashboard drawer,
   pricing hierarchy + plan switcher, Sign in / Create account, touch states.
   ============================================================================ */

:root {
  --tap: 44px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
}
html { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, [role="button"]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Header: Sign in + Create account ---------- */
.header-tools { gap: 10px; }
.header-signin {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(159, 232, 112, .28);
  background: linear-gradient(180deg, rgba(159, 232, 112, .10), rgba(159, 232, 112, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--text-1); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.header-signin svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; transition: transform var(--dur-2) var(--ease-out); }
.header-signin:hover { border-color: rgba(159, 232, 112, .55); background: rgba(159, 232, 112, .14); box-shadow: 0 0 0 4px rgba(159, 232, 112, .07), inset 0 1px 0 rgba(255, 255, 255, .08); }
.header-signin:hover svg { transform: translateX(2px); }
.header-signin:active { transform: scale(.97); background: rgba(159, 232, 112, .2); }
.header-signin:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.header-signin .lbl-short { display: none; }
.header-cta.primary { height: 38px; padding: 0 16px; box-shadow: 0 10px 24px -14px rgba(159, 232, 112, .7); transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.header-cta.primary:active { transform: scale(.97); }
.header-user:active { transform: scale(.98); }

/* Keep the wordmark out of the auth controls on narrow phones. */
@media (max-width: 880px) {
  .site-header .brand { flex-shrink: 0; }
}
@media (max-width: 360px) {
  .site-header .header-signin .header-signin-ic { display: none; }
}

/* ---------- Menu button (morphs to a close icon) ---------- */
.mobile-menu {
  position: relative; width: var(--tap); height: var(--tap); padding: 0;
  align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--text-1); cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.mobile-menu svg { width: 20px; height: 20px; transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out); }
.mobile-menu .menu-close { position: absolute; inset: 0; margin: auto; opacity: 0; transform: rotate(-45deg) scale(.7); }
.mobile-menu[aria-expanded="true"] { border-color: var(--brand-line); background: var(--brand-soft); }
.mobile-menu[aria-expanded="true"] svg:not(.menu-close) { opacity: 0; transform: rotate(45deg) scale(.7); }
.mobile-menu[aria-expanded="true"] .menu-close { opacity: 1; transform: none; }
.mobile-menu:active { transform: scale(.94); }

.nav-extra { display: none; }

@media (max-width: 880px) {
  .site-nav, .site-nav.open {
    display: flex; position: fixed; top: 72px; left: 0; right: 0; z-index: 39;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px 20px 24px;
    max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    background: rgba(8, 14, 26, .97);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .8);
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .site-nav.open {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s;
  }
  .site-nav > a, .site-nav.open > a {
    display: flex; align-items: center; width: auto; min-height: 54px; padding: 0 4px;
    font-size: 17px; font-weight: 600; color: var(--text-2);
    border-bottom: 1px solid var(--line);
  }
  .site-nav > a.active { color: var(--text-1); }
  .site-nav a.active::after { display: none; }
  .site-nav > a.active::before { content: ''; width: 6px; height: 6px; margin-right: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
  .site-nav.open > a { animation: vh-nav-in var(--dur-2) var(--ease-out) both; }
  .site-nav.open > a:nth-child(2) { animation-delay: 30ms; }
  .site-nav.open > a:nth-child(3) { animation-delay: 60ms; }
  .nav-extra { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
  .site-nav .nav-extra-cta {
    display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 16px;
    border-radius: 14px; border: 1px solid var(--line-3); background: rgba(255, 255, 255, .03);
    font-size: 15px; font-weight: 600; color: var(--text-1);
    transition: background var(--dur-1), transform var(--dur-1) var(--ease-out);
  }
  .site-nav .nav-extra-cta.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .site-nav .nav-extra-cta:active { transform: scale(.98); }
  .nav-extra-lang {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; margin-top: 4px;
    background: none; border: 0; color: var(--text-3); font: inherit; font-size: 14px; cursor: pointer;
  }
  .nav-extra-lang strong { color: var(--text-1); font-weight: 600; }
  .nav-extra-lang span { margin-left: auto; padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
  body.menu-open { overflow: hidden; }
}
@keyframes vh-nav-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 640px) {
  .site-header { height: 64px; padding: 0 16px; gap: 8px; }
  .site-header .brand { margin-right: auto; min-width: 0; }
  .site-nav, .site-nav.open { top: 64px; max-height: calc(100dvh - 64px); }
  .header-tools { gap: 8px; margin-left: auto; }
  .header-tools .language, .header-signup { display: none; }
  .vh-logo-header { height: 34px; gap: 9px; }
  .vh-logo-header .vh-logo-wordmark { font-size: 18px; }
  .header-signin { height: var(--tap); font-size: 14px; }
  .header-user { min-height: var(--tap); }
  .header-user .plan-chip { display: none; }
}
@media (max-width: 380px) {
  .vh-logo-header { height: 30px; gap: 7px; }
  .vh-logo-header .vh-logo-wordmark { font-size: 15px; }
  .header-signin { padding: 0 11px 0 10px; gap: 6px; font-size: 13px; }
  .header-signin .lbl-long { display: none; }
  .header-signin .lbl-short { display: inline; }
}

/* ---------- Hero on phones ---------- */
.hero-cta { display: none; }
.hero-demo-tag {
  font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-3); vertical-align: 2px;
}
@media (max-width: 640px) {
  .hero { min-height: 0; padding: 32px 18px 44px; }
  .hero-silhouette { display: none; }
  .hero-inner { gap: 16px; }
  .hero .trust-badge { font-size: 12px; margin-bottom: 0; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 42px); line-height: 1.02; }
  .hero-sub { font-size: 15px; line-height: 1.6; }
  .hero-search { display: none; }
  .hero-cta { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
  .hero-btn {
    display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px;
    border-radius: 14px; border: 1px solid var(--line-3); background: rgba(255, 255, 255, .04);
    font-size: 16px; font-weight: 700; color: var(--text-1);
    transition: transform var(--dur-1) var(--ease-out), background var(--dur-1);
  }
  .hero-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 16px 32px -16px rgba(159, 232, 112, .75); }
  .hero-btn:active { transform: scale(.98); }
  .hero-footline { font-size: 13px; }
  .hero-workspace { width: 100%; margin-top: 28px; }

  .service { padding: 56px 18px; }
  .service-head { margin-bottom: 28px; }
  .service-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-card { padding: 20px; }
  .audience { margin-top: 28px; }

  .leagues { padding: 56px 16px; gap: 28px; }
  .leagues-band { width: 100%; flex-direction: column; align-items: center; gap: 14px; }
  .league-card { width: 100%; max-width: 360px; aspect-ratio: 16 / 10; margin: 0; translate: none; }
}

/* Hover-lift is meaningless on touch: give a pressed state instead. */
@media (hover: none) {
  .service-card:hover, .px-card:hover, .dash-stat:hover, .league-card:hover { transform: none; }
  .service-card:active, .px-card:active, .dash-stat:active { border-color: var(--line-3); }
}

/* ---------- Dashboard on phones ---------- */
.topbar-new {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.topbar-new svg { width: 16px; height: 16px; }
.topbar-new:hover { background: var(--brand-bright); }
.topbar-new:active { transform: scale(.96); }
.topbar-new:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (max-width: 880px) {
  .sidebar {
    width: min(300px, 86vw); height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    z-index: 50; visibility: hidden;
    box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .8);
    transition: transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .sidebar.is-open { visibility: visible; transition: transform var(--dur-2) var(--ease-out), visibility 0s; }
  .sidebar-overlay { z-index: 45; }
  body.sidebar-open { overflow: hidden; }
  .sidebar-link { min-height: 46px; }
  .dashboard-topbar { z-index: 30; padding: 10px 16px; gap: 10px; }
  .sidebar-mobile { width: var(--tap); height: var(--tap); border-radius: 12px; flex-shrink: 0; transition: transform var(--dur-1) var(--ease-out); }
  .sidebar-mobile:active { transform: scale(.94); }
  .dashboard-title { font-size: 17px; }
  .dashboard-content { padding: 20px 16px 40px; }
  .dashboard-topbar-tools { gap: 8px; }
}
@media (max-width: 480px) {
  .dashboard-eyebrow { display: none; }
  .topbar-new { width: var(--tap); height: var(--tap); padding: 0; border-radius: 12px; }
  .topbar-new svg { width: 18px; height: 18px; }
  .topbar-new-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dashboard-topbar .language { min-width: var(--tap); height: var(--tap); justify-content: center; }
}
@media (max-width: 360px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* 16px+ inputs: no iOS zoom on focus */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(16px, 1em); }
  dialog.t-modal { width: calc(100vw - 24px); max-width: 460px; max-height: calc(100dvh - 32px); overflow-y: auto; }
  dialog.t-modal .actions { flex-wrap: wrap; }
  dialog.t-modal .actions button { flex: 1 1 140px; min-height: 48px; }
}

/* ---------- Pricing: Free discreet → Pro balanced → Elite featured ---------- */
.px-tagline { margin: 14px 0 10px; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--text-2); }
/* four narrow columns: reserve three lines so every price starts on the same line */
@media (min-width: 1101px) { .px-tagline { min-height: 4.5em; } }
.px-price { margin: 24px 0 2px; }
.px-per { margin: 0 0 18px; font-size: 13px; color: var(--text-3); }
.px-quota { font-weight: 500; color: var(--text-2); }
.px-quota strong { margin-right: 4px; font-size: 18px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }

.px-card.is-free { background: var(--card-bg-muted); }
.px-card.is-free .px-name { color: var(--text-3); }

.px-card.is-top {
  --plan-accent: #ffd558;
  border: 1.2px solid #8e7847;
  background: linear-gradient(150deg, #292617, #14211e 60%, #292c18);
  box-shadow: none;
  overflow: visible;
}
.px-card.is-top .px-amount,.px-card.is-top .px-quota strong { color: #ffd558; }
.px-card.is-top .px-per { color: var(--text-2); }
.px-card.is-top:hover { border-color: #edce84; }
.px-card.is-top .px-badge,.px-card.is-top .px-cta.primary { background: linear-gradient(105deg,#ffdb28,#ffa03d); border-color: transparent; color: #281c05; }
/* Every card sits on the same grid line (no vertical offsets): titles, prices and CTAs align. */

.px-cta.primary { box-shadow: 0 14px 30px -18px rgba(159, 232, 112, .7); }
.px-cta:active { transform: scale(.98); }
.px-cta.is-current svg { width: 16px; height: 16px; margin-right: 6px; }


@media (max-width: 620px) {
  .px-public { padding: 36px 16px 64px; }
  .px-intro { margin-bottom: 22px; }
  .px-title { font-size: clamp(30px, 8.6vw, 38px); }
  .px-title br { display: none; }
  .px-sub { font-size: 15px; }
  .px-grid { display: grid; gap: 30px; }
  .px-grid .px-card { display: flex; }
  .px-card { padding: 24px 20px 20px; }
  .px-card.is-top { transform: none; }
  .px-tagline { min-height: 0; }
  .px-amount { font-size: 44px; }
  .px-cta { min-height: 52px; font-size: 15px; }
  .px-compare summary { min-height: 52px; }
  .px-table { min-width: 560px; }
  .px-table thead th:first-child, .px-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg); }
}
@keyframes px-in { from { opacity: 0; transform: translateY(8px); } }

/* Pack interaction grows with the tier; no continuous animation. */
.px-plan-icon { transition: transform .3s var(--ease-out); }
.px-card.is-top::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,232,174,.12) 48%, transparent 66%);
  clip-path: inset(0 round 16px); opacity: 0;
}
.px-card.is-top:focus-within::before { animation: px-gold-pass .85s var(--ease-out) both; }
@keyframes px-gold-pass { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .px-card[data-tier="starter"]:hover .px-plan-icon { transform: translateY(-2px); }
  .px-card.is-mid:hover .px-plan-icon { transform: translateY(-3px) scale(1.08); }
  .px-card.is-top:hover .px-plan-icon { transform: rotate(-12deg) scale(1.12); }
  .px-card.is-top:hover::before { animation: px-gold-pass .85s var(--ease-out) both; }
  .px-card.is-top:hover .px-cta.primary { box-shadow: 0 10px 24px -12px rgba(237,206,132,.55); }
}
@media (prefers-reduced-motion:reduce) {
  .px-plan-icon { transition: none; }
  .px-card.is-top:focus-within::before { animation: none; }
}

/* ---------- Sign in / Create account ---------- */
.au [hidden] { display: none !important; }
.au { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.au-brand { position: relative; display: flex; overflow: hidden; border-right: 1px solid var(--line); }
.au-brand-photo {
  position: absolute; inset: 0; transform: scale(1.04);
  background: url('assets/court.jpg') 60% 50% / cover no-repeat;
  opacity: .35; filter: saturate(.35) brightness(.6);
}
.au-brand::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(159, 232, 112, .2), transparent 60%),
    linear-gradient(180deg, rgba(10, 20, 38, .3), rgba(10, 20, 38, .94));
}
.au-brand-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; width: 100%; padding: clamp(32px, 4vw, 56px); }
.au-brand-logo { align-self: flex-start; }
.au-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.au-brand-title { margin: 14px 0 28px; font-family: 'Archivo Black', sans-serif; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -.035em; color: var(--text-1); }
.au-points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.au-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }
.au-points .check, .au-perk .check { flex-shrink: 0; width: 14px; height: 14px; padding: 5px; box-sizing: content-box; border-radius: 50%; background: rgba(159, 232, 112, .12); color: var(--brand); }
.au-brand-foot { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.au-main { display: flex; flex-direction: column; padding: 20px clamp(20px, 4vw, 48px) 40px; outline: none; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.au-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin-left: -8px; padding: 0 12px 0 8px;
  border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: color var(--dur-1), background var(--dur-1);
}
.au-back svg { width: 18px; height: 18px; }
.au-back:hover { color: var(--text-1); background: rgba(255, 255, 255, .04); }
.au-top-logo { display: none; }
.au-top .language { min-height: 40px; }

.au-card { width: 100%; max-width: 400px; margin: auto; padding: 32px 0; }
.au-card > * { animation: au-rise .42s var(--ease-out) both; }
.au-card > :nth-child(2) { animation-delay: 40ms; }
.au-card > :nth-child(3) { animation-delay: 80ms; }
.au-card > :nth-child(4) { animation-delay: 110ms; }
.au-card > :nth-child(n+5) { animation-delay: 140ms; }
.au-card.is-shake { animation: au-shake .32s var(--ease-out); }
.au-title { margin: 0 0 12px; font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; letter-spacing: -.03em; color: var(--text-1); }
.au-sub { margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.au-perk { display: flex; align-items: center; gap: 10px; margin: -10px 0 24px; font-size: 14px; color: var(--text-2); }
.au-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(159, 232, 112, .4); text-underline-offset: 3px;
  transition: color var(--dur-1), text-decoration-color var(--dur-1);
}
.au-link:hover { color: var(--brand-bright); text-decoration-color: currentColor; }
.au-link:focus-visible { border-radius: 4px; }

.au-alert {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--error-line); background: var(--error-soft);
  font-size: 14px; color: var(--error-bright); animation: au-drop var(--dur-2) var(--ease-out);
}
.au-alert svg { flex-shrink: 0; margin-top: 2px; }
.au-form { display: grid; gap: 18px; }
.au-field { display: grid; gap: 8px; }
.au-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-label-row label { font-size: 14px; font-weight: 600; color: var(--text); }
.au-forgot { font-size: 13px; font-weight: 500; min-height: 24px; }
.au-input-wrap { position: relative; }
.au-input-wrap input {
  box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03);
  color: var(--text-1); font: inherit; font-size: 16px;
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-2) var(--ease-out);
}
.au-input-wrap.has-reveal input { padding-right: 54px; }
.au-input-wrap input::placeholder { color: var(--text-3); }
.au-input-wrap input:hover { border-color: rgba(255, 255, 255, .28); }
.au-input-wrap input:focus { outline: none; border-color: var(--brand); background: rgba(159, 232, 112, .04); box-shadow: 0 0 0 4px rgba(159, 232, 112, .14); }
.au-input-wrap input[aria-invalid="true"] { border-color: var(--error-bright); box-shadow: 0 0 0 4px rgba(255, 107, 107, .12); }
.au-input-wrap input:-webkit-autofill { -webkit-text-fill-color: var(--text-1); box-shadow: 0 0 0 100px #13233a inset; caret-color: var(--text-1); }
.au-reveal {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 10px; background: none; color: var(--text-3); cursor: pointer;
  transition: color var(--dur-1), background var(--dur-1);
}
.au-reveal svg { width: 20px; height: 20px; }
.au-reveal:hover, .au-reveal[aria-pressed="true"] { color: var(--brand); }
.au-reveal[aria-pressed="true"] { background: var(--brand-soft); }
.au-hint { margin: 0; font-size: 13px; color: var(--text-3); }
.au-error { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--error-bright); animation: au-drop var(--dur-2) var(--ease-out); }
.au-error::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.au-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 54px; margin-top: 6px; border: 0; border-radius: 12px;
  background: var(--brand); color: var(--on-brand); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 18px 36px -18px rgba(159, 232, 112, .75);
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-out), opacity var(--dur-1);
}
.au-submit:hover { background: var(--brand-bright); }
.au-submit:active { transform: scale(.985); }
.au-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.au-submit:disabled { cursor: progress; opacity: .8; }
.au-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(10, 20, 12, .25); border-top-color: var(--on-brand); animation: au-spin .7s linear infinite; }
.au-submit.is-loading .au-spinner { display: block; }
.au-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.55; color: var(--text-3); }

@keyframes au-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes au-drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes au-spin { to { transform: rotate(360deg); } }
@keyframes au-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

@media (max-width: 900px) {
  .au { grid-template-columns: 1fr; }
  .au-brand { display: none; }
  .au-top-logo { display: inline-flex; }
  .au-main { min-height: 100dvh; padding: 10px 18px 32px; }
  .au-card { margin: 0 auto; padding: 28px 0 8px; }
  .au-title { font-size: clamp(28px, 8vw, 34px); }
  .au-sub { margin-bottom: 22px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav.open, .site-nav.open > a, .sidebar, .sidebar.is-open,
  .mobile-menu svg, .header-signin, .header-signin svg, .topbar-new, .hero-btn,
  .au-card > *, .au-card.is-shake, .au-alert, .au-error, .au-submit, .au-input-wrap input,
  .px-card.is-top::before, .px-grid .px-card.is-active, .px-switch-btn, .px-cta {
    animation: none !important;
    transition: none !important;
  }
  .au-spinner { animation-duration: 1.6s !important; }
}

/* ============================================================================
   Pass 2 — single Connexion CTA, calmer dashboard, light theme, premium Pro.
   ============================================================================ */

/* ---------- Header: one Connexion button ---------- */
.header-signin {
  height: 40px; padding: 0 16px 0 5px; gap: 10px;
  border-color: rgba(159, 232, 112, .34);
  background: linear-gradient(180deg, rgba(159, 232, 112, .13), rgba(159, 232, 112, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 26px -16px rgba(159, 232, 112, .7);
  font-size: 14px;
}
.header-signin .header-signin-ic {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 0 0 3px rgba(159, 232, 112, .14);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.header-signin .header-signin-ic svg { width: 16px; height: 16px; color: var(--on-brand); }
.header-signin:hover svg { transform: none; }
.header-signin:hover .header-signin-ic { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(159, 232, 112, .16); }
@media (max-width: 640px) { .header-signin { height: var(--tap); padding: 0 14px 0 6px; } }
@media (max-width: 380px) { .header-signin { padding: 0 12px 0 6px; gap: 8px; } }

/* ---------- Sign in: create-account path ---------- */
.au-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; font-size: 13px; color: var(--text-3); }
.au-divider::before, .au-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.au-secondary {
  display: flex; align-items: center; justify-content: center; height: 52px;
  border-radius: 12px; border: 1px solid var(--line-3); background: rgba(255, 255, 255, .03);
  color: var(--text-1); font-size: 15px; font-weight: 600;
  transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.au-secondary:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.au-secondary:active { transform: scale(.985); }

/* ---------- Dashboard: less clutter ---------- */
.dashboard-eyebrow, .ana-eyebrow { display: none; }
.dashboard-main { min-width: 0; }
@media (max-width: 360px) {
  .dashboard-topbar .language { display: none; }
  .dashboard-topbar-tools { gap: 6px; }
}
.dashboard-topbar { min-height: 64px; padding-block: 12px; }
@media (min-width: 881px) { .dashboard-topbar .dashboard-title { display: none; } }
/* Overview hierarchy: summary → main chart → details */
.dash-hero { align-items: center; margin-bottom: 28px; padding-bottom: 0; border-bottom: 0; }
.dash-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.dash-stat { justify-content: space-between; }
.dash-stat:hover { transform: none; }
.dash-stat-sub { font-size: 12px; color: var(--text-3); }
.dash-stat.is-featured {
  border-color: var(--success-line);
  background: linear-gradient(180deg, var(--success-soft), transparent 75%), var(--surface);
}
.dash-stat.is-featured .dash-stat-label { color: var(--text-1); font-weight: 600; }
.dash-stat.is-featured .dash-stat-value { font-size: clamp(38px, 3.4vw, 48px); color: var(--success); }
.dash-stat.is-featured .dash-stat-suffix { font-size: 22px; color: var(--success); }
.dash-stat.is-featured .dash-stat-spark svg { height: 40px; }
.dash-stat-total { margin-left: 0; }
.dash-section { margin-bottom: 40px; }
.dash-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 40px; }
.dash-split .dash-card-head, .dash-section > .dash-card-head { align-items: center; }
.dash-split .dash-card-head h3, .dash-section > .dash-card-head h3 { margin: 0; }
.dash-section > .dash-card-head { margin-bottom: 14px; }
.dash-foot-note { margin: 0; font-size: 12px; color: var(--text-3); }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-stat.is-featured { grid-column: 1 / -1; }
  .dash-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .dash-grid, .dash-section, .dash-split { margin-bottom: 28px; } }
.ana-hero { margin-bottom: 18px; }
.ana-h1 { margin-bottom: 6px; }
.ana-card { padding: 22px; }
.ana-pick-trigger { min-height: 64px; padding: 14px 18px; }
.ana-pick-placeholder { font-size: 15px; font-weight: 600; }
.team-picker-league { margin-top: 18px; }
.ana-footer { margin-top: 18px; padding-top: 16px; }
.ana-cost-meta { font-family: inherit; font-size: 13px; letter-spacing: 0; }

/* ---------- Light / dark toggle ---------- */
.theme-toggle {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.theme-toggle:hover { color: var(--text-1); border-color: var(--line-3); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle svg { position: absolute; width: 17px; height: 17px; transition: opacity var(--dur-2), transform .4s var(--ease-out); }
.theme-toggle .ic-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-theme="light"] .theme-toggle .ic-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
html[data-theme="light"] .theme-toggle .ic-moon { opacity: 1; transform: none; }
@media (max-width: 480px) { .theme-toggle { width: var(--tap); height: var(--tap); } }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F5F1; --bg-elev: #FFFFFF;
  --surface: #FFFFFF; --surface-2: #EEF2EB; --surface-3: #E1E7DD;
  --line: rgba(12, 24, 40, .08); --line-2: rgba(12, 24, 40, .12); --line-3: rgba(12, 24, 40, .2);
  --text: #1B2533; --text-1: #0B1422; --text-2: #475467; --text-3: #697586; --text-4: #98A2B3;
  --brand: #3F9A1F; --brand-bright: #35861A; --brand-soft: rgba(63, 154, 31, .1); --brand-line: rgba(63, 154, 31, .45);
  --brand-ink: #2B6E12; --on-brand: #FFFFFF;
  /* legacy aliases used across style.css */
  --green: #3F9A1F; --green-bright: #2B6E12; --green-soft: rgba(63, 154, 31, .1); --green-line: rgba(63, 154, 31, .45); --green-deep: #2B6E12;
  --amber: #3F9A1F; --amber-soft: rgba(63, 154, 31, .1); --amber-line: rgba(63, 154, 31, .45); --teal: #3F9A1F; --teal-soft: rgba(63, 154, 31, .1);
  --steel: #2F6FD6; --steel-soft: rgba(47, 111, 214, .1); --rose: #C93A3A; --rose-soft: rgba(201, 58, 58, .1);
  /* semantic states, darkened for white surfaces */
  --success: #1E8A5A; --success-bright: #177049; --success-soft: rgba(30, 138, 90, .09); --success-line: rgba(30, 138, 90, .38);
  --warning: #B7791F; --warning-bright: #8A5A12; --warning-soft: rgba(183, 121, 31, .1); --warning-line: rgba(183, 121, 31, .38);
  --error: #C93A3A; --error-bright: #A82E2E; --error-soft: rgba(201, 58, 58, .09); --error-line: rgba(201, 58, 58, .38);
  --info: #2F6FD6; --info-soft: rgba(47, 111, 214, .09); --info-line: rgba(47, 111, 214, .38);
  --card-bg: #FFFFFF; --card-bg-muted: #FAFBF8;
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .sidebar { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%); }
html[data-theme="light"] .sidebar-overlay { background: rgba(10, 20, 38, .35); }
/* Elite stays a dark premium surface in both themes: scope dark tokens to it so its text stays light. */
html[data-theme="light"] .px-card.is-top {
  --text: #EEF3F8; --text-1: #FFFFFF; --text-2: #C3CEDB; --text-3: #93A2B5;
  --line-2: rgba(255, 255, 255, .12); --line-3: rgba(255, 255, 255, .2);
  --brand: #9FE870; --brand-bright: #B6F085; --brand-soft: rgba(159, 232, 112, .12); --brand-line: rgba(159, 232, 112, .4);
  --brand-ink: #B6F085; --on-brand: #0a140c;
  box-shadow: 0 24px 50px -30px rgba(12, 30, 20, .55);
}

/* ---------- Pricing: Pro between Starter and Elite ---------- */
/* Token-driven, so light mode gets a real light variant: tinted white, crisp green border, no halo. */
.px-card.is-mid {
  --plan-accent: var(--brand-ink);
  border-color: var(--brand-line);
  background: linear-gradient(150deg, var(--brand-soft), transparent 70%), var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.px-card.is-mid:hover { border-color: var(--brand); }
.px-card.is-mid .px-name, .px-card.is-mid .px-quota strong { color: var(--brand-ink); }
.px-card.is-mid .px-per { color: var(--text-2); }
.px-card.is-mid .px-badge { background: #39d4a0; color: #06271e; border: 1px solid transparent; }

.px-cta.accent { background: linear-gradient(110deg,#16c2ce,#25cf80); border-color: transparent; color: #05281e; }
.px-cta.accent:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
html[data-theme="light"] .px-card.is-mid { box-shadow: inset 0 0 0 1px var(--brand-line), 0 12px 28px -20px rgba(20, 60, 20, .35); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle svg, .header-signin-ic, .au-secondary, .league-card { transition: none !important; }
}

/* ---- Plan "grade" badge (sidebar Pricing) ---- */
.sidebar-badge.subscription-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 999px; line-height: 1.2;
}
.subscription-badge .tier-ic { width: 10px; height: 10px; flex: none; }
.subscription-badge.tier-free { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.subscription-badge.tier-starter { background: var(--card-bg-muted); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.subscription-badge.tier-pro {
  background: linear-gradient(135deg, #8dff6a, #3fd15a); color: #0b1a0b;
  box-shadow: 0 0 0 1px rgba(141, 255, 106, .45), 0 4px 14px -6px rgba(90, 230, 90, .7);
}
.subscription-badge.tier-elite {
  color: #f6e3a8;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 236, 170, .38) 50%, transparent 60%) no-repeat,
    linear-gradient(135deg, #1a1426, #2b1f3d 55%, #14101c);
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .6), 0 4px 16px -6px rgba(233, 196, 106, .55);

}
.subscription-badge.tier-elite .tier-ic { color: #e9c46a; }
@keyframes vh-tier-shine { 0%, 70% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
html[data-theme="light"] .subscription-badge.tier-pro { color: #0b1a0b; box-shadow: 0 0 0 1px rgba(40, 140, 40, .35), 0 4px 12px -6px rgba(40, 140, 40, .5); }

/* ---- Google auth button ---- */
.au-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px;
  border-radius: 12px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f;
  font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s, box-shadow .15s;
}
.au-google:hover { background: #f7f8f8; box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .35); }
.au-google:focus-visible { outline: 2px solid var(--brand, #8dff6a); outline-offset: 2px; }
.au-google-ic { width: 20px; height: 20px; flex: none; }
.au-divider.au-or { margin: 18px 0; }

@media (prefers-reduced-motion: reduce) { .subscription-badge.tier-elite { animation: none; } }
.sidebar-link .sidebar-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-link .subscription-badge { flex: none; margin-left: 0; }

/* The global icon rule (svg { stroke: currentColor }) leaked into charts and the Google logo:
   chart text/areas got an outline (thick blurry labels, dark edge in light mode). */
.chart-host svg, .au-google-ic { stroke: none; }