/* ===== Tokens ===== */
@font-face {
  font-family: "Chakra Petch";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-700-italic.woff2") format("woff2");
}
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/outfit-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/outfit-latin-300-normal.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  /* colour */
  --bg: #08090B;
  --text: #F4F2EE;
  --text-2: #C4C6CB;           /* secondary, ~11:1 on bg */
  --text-3: #9EA1A7;           /* tertiary, ~7:1 on bg */
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.22);
  --fill-quiet: rgba(255,255,255,.05);
  --fill-hover: rgba(255,255,255,.09);
  --fill-strong: rgba(255,255,255,.12);
  --on-light: #000000;
  /* type */
  --font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-num: "Outfit", "Hanken Grotesk", system-ui, sans-serif;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem;
  /* space, radius, sizes */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px;
  --btn-h: 48px; --hit: 44px; --icon: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 62px; --nav-gap: 10px;
  --bar-h: 0px;                 /* set when a sticky action bar is shown */
  --ease: cubic-bezier(.2,.7,.2,1);
  /* glass */
  --blur-strong: blur(24px) saturate(160%);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 55% at 50% 0%, #1A1D24 0%, rgba(26,29,36,0) 70%), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 400 var(--fs-md)/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ===== Layout ===== */
#main {
  outline: none;
  min-height: 100vh;
  padding: calc(var(--safe-top) + var(--s3)) 0 calc(var(--nav-h) + var(--nav-gap) + var(--safe-bottom) + var(--bar-h) + var(--s8));
}
.wrap { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 var(--s4); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.section { margin-top: var(--s6); }
.row { display: flex; align-items: center; gap: var(--s3); }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ===== Type ===== */
.display, h1, h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; margin: 0;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
p { margin: 0; }

/* ===== Glass ===== */
.glass-strong {
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.glass-quiet { background: var(--fill-quiet); border: 1px solid var(--line); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-strong { background: rgba(36,38,44,.94); }
}
.card { border-radius: var(--r-lg); padding: var(--s4); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--btn-h); padding: 0 var(--s5); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; text-decoration: none; text-align: center; line-height: 1.2; padding-block: 6px; min-width: 0;
  transition: background-color .2s, border-color .2s, transform .12s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--text); color: var(--on-light); }
.btn-primary:active { background: #DAD7D1; }
.btn-secondary { background: var(--fill-quiet); border: 1px solid var(--line-strong); color: var(--text); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 var(--s4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.icon-btn {
  width: var(--hit); height: var(--hit); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s, transform .12s, color .2s;
}
.icon-btn:active { transform: scale(.92); }
.link { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-sm); min-height: var(--hit); display: inline-flex; align-items: center; }

/* Toggle chip (reminders). Distinct from booking buttons. */
.toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s3) 0 var(--s2); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2);
  border: 1px solid var(--line-strong); background: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.toggle .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-strong); }
.toggle .dot svg { width: 15px; height: 15px; }
.toggle[aria-pressed="true"] { color: var(--text); border-color: rgba(255,255,255,.4); background: var(--fill-strong); }
.toggle[aria-pressed="true"] .dot { background: var(--text); color: var(--on-light); }
.toggle[aria-disabled="true"] { opacity: .6; }

/* ===== Header ===== */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--hit); margin-bottom: var(--s4); }
.topbar .actions { display: flex; gap: var(--s2); }
.logo { height: 22px; width: auto; }

/* ===== Home ===== */
.hero { position: relative; height: clamp(176px, 28vh, 240px); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s4); background: #15161A; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.hero .caption { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 1; }
.hero .greet { font-size: var(--fs-xl); font-weight: 600; }
.hero .hours { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--text-3); }
.status-dot.open { background: #7BD88F; }

.eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.next .title { font-size: var(--fs-xl); font-weight: 650; margin-top: var(--s1); }
.next .when { font-size: var(--fs-md); margin-top: 2px; }
.next .when b { font-weight: 600; }
.next .meta { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.next .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.next .actions .btn-primary { flex: 1 1 180px; }
.chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chips::-webkit-scrollbar { display: none; }
.time-chip { flex: 0 0 auto; min-height: var(--hit); padding: 0 var(--s4); border-radius: var(--r-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.shortcut { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); border-radius: var(--r-lg); text-decoration: none; min-height: 84px; transition: background-color .2s; }
.shortcut .k { font-size: var(--fs-sm); color: var(--text-2); }
.shortcut .v { font-size: var(--fs-lg); font-weight: 600; }
.info-list { display: flex; flex-direction: column; }
.info-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); min-height: 56px; text-decoration: none; }
.info-item:last-child { border-bottom: 0; }
.info-item .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-strong); flex-shrink: 0; }
.info-item .ic svg { width: 17px; height: 17px; }
.hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s4); font-size: var(--fs-sm); }
.hours-grid .today { color: var(--text); font-weight: 600; }
.footer { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-xs); color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.footer a { color: var(--text-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.footer a svg { width: 11px; height: 11px; }

/* ===== Classes ===== */
.dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.date {
  position: relative; min-height: 58px; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--fill-quiet); border: 1px solid var(--line);
  transition: background-color .2s, border-color .2s;
}
.date .wd { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.date .dn { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.date.is-today .wd { color: var(--text); font-weight: 700; }
.date.is-today::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.date.is-closed .dn { color: var(--text-3); }
.date[aria-pressed="true"] { background: var(--text); color: var(--on-light); border-color: var(--text); }
.date[aria-pressed="true"] .wd { color: rgba(0,0,0,.65); }
.filters { display: flex; gap: var(--s2); margin-top: var(--s3); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--s4); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
  border: 1px solid var(--line); background: var(--fill-quiet);
}
.filter svg { width: 16px; height: 16px; }
.filter[aria-pressed="true"] { background: var(--text); color: var(--on-light); border-color: var(--text); }
.day-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s5) 0 var(--s2); }
.session-list { display: flex; flex-direction: column; gap: 6px; }
.session { display: grid; grid-template-columns: 1fr auto; align-items: center; border-radius: var(--r-md); background: var(--fill-quiet); border: 1px solid var(--line); }
.session-main {
  display: grid; grid-template-columns: 52px 36px minmax(0, 1fr); align-items: center; gap: var(--s3);
  padding: var(--s3); text-align: left; border-radius: var(--r-md) 0 0 var(--r-md); min-height: 60px;
}
.session-time { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.session-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--fill-strong); }
.session-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-sub { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session .icon-btn { margin-right: 6px; color: var(--text-2); }
.session .icon-btn[aria-pressed="true"] { background: var(--text); color: var(--on-light); }
.session.is-past .session-time, .session.is-past .session-name { color: var(--text-3); }
.disclosure { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--hit); padding: 0 var(--s3); border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.disclosure svg { transition: transform .25s var(--ease); width: 18px; height: 18px; }
.disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }
.empty { padding: var(--s6) var(--s4); border-radius: var(--r-lg); border: 1px dashed var(--line-strong); text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }

/* ===== Passes ===== */
.note { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); padding: var(--s3); border-radius: var(--r-md); }
.note svg { width: 17px; height: 17px; margin-top: 1px; }
.balance .big { font-family: var(--font-num); font-size: 3rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.meter { display: grid; gap: 4px; margin-top: var(--s4); }
.meter-bar { display: flex; gap: 3px; height: 8px; }
.meter-bar i { flex: 1; border-radius: 3px; background: rgba(255,255,255,.16); }
.meter-bar i.on { background: var(--text); }
.legend { display: flex; gap: var(--s4); font-size: var(--fs-xs); color: var(--text-3); }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--text); vertical-align: 0; }
.legend span.used::before { background: rgba(255,255,255,.16); }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; border-bottom: 1px solid var(--line); }

/* ===== Prices ===== */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-md); }
.cat { min-height: 40px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.cat[aria-selected="true"] { background: var(--text); color: var(--on-light); }
.group-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin: var(--s5) 0 var(--s2); }
.pkg {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s3) var(--s4); min-height: 64px; text-align: left;
  border-radius: var(--r-md); background: var(--fill-quiet); border: 1px solid var(--line);
  transition: background-color .2s, border-color .2s;
}
.pkg + .pkg { margin-top: 6px; }
.pkg .radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--text-3); display: grid; place-items: center; }
.pkg[aria-checked="true"] { border-color: rgba(255,255,255,.55); background: var(--fill-strong); }
.pkg[aria-checked="true"] .radio { border-color: var(--text); background: var(--text); }
.pkg[aria-checked="true"] .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-light); }
.pkg .name { font-weight: 600; }
.pkg .per { font-size: var(--fs-sm); color: var(--text-2); }
.pkg .price { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(123,216,143,.5); color: #9BE3AB; margin-left: 6px; vertical-align: 1px; }
.actionbar {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + var(--nav-gap) + var(--nav-h) + var(--s2));
  width: min(calc(100% - 24px), 616px);
  padding: 8px; border-radius: var(--r-lg);
}
.actionbar .btn { width: 100%; justify-content: space-between; }
.actionbar .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Coaches ===== */
.founder { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.founder img { width: 72px; height: 84px; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-md); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-strong); font-weight: 600; flex-shrink: 0; }
.coach { border-bottom: 1px solid var(--line); }
.coach-head { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s2) 0; text-align: left; }
.coach-head .chev { transition: transform .25s var(--ease); color: var(--text-3); }
.coach-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.coach-panel { padding: 0 0 var(--s4) 56px; display: flex; flex-direction: column; gap: var(--s3); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s4); font-size: var(--fs-sm); }
.dl dt { color: var(--text-3); }
.dl dd { margin: 0; }

/* ===== Tab bar ===== */
.tabbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + var(--nav-gap));
  width: min(calc(100% - 24px), 480px); height: var(--nav-h);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px;
  border-radius: 22px;
  background: rgba(20,21,26,.55);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tabbar { background: rgba(28,29,34,.96); } }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 17px; color: var(--text-3); text-decoration: none; font-size: 11px; font-weight: 600;
  transition: color .2s, background-color .2s;
}
.tab svg { width: 22px; height: 22px; stroke-width: 1.7; }
.tab[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.12); }

/* ===== Sheet, toast, offline ===== */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); animation: fade .2s ease both; }
.sheet {
  position: fixed; z-index: 41; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 560px); max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s3) var(--s5) calc(var(--safe-bottom) + var(--s5));
  background: rgba(24,25,30,.86);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  border: 1px solid rgba(255,255,255,.12); border-bottom: 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.45);
  animation: sheetUp .3s var(--ease) both;
  outline: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .sheet { background: rgb(28,29,34); } }
.sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto var(--s3); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.sheet-photo { height: 140px; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s4); }
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.sheet .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: var(--fs-md); margin-bottom: var(--s5); }
.sheet .facts dt { color: var(--text-3); }
.sheet .facts dd { margin: 0; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; text-decoration: none; border-bottom: 1px solid var(--line); text-align: left; }
.menu-list svg.ext { margin-left: auto; color: var(--text-3); width: 16px; height: 16px; }
.size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.size-grid .btn { padding: 0; }
.size-grid .btn[aria-pressed="true"] { background: var(--text); color: var(--on-light); }
.toast {
  position: fixed; z-index: 50; left: 50%; transform: translate(-50%, 12px);
  bottom: calc(var(--safe-bottom) + var(--nav-gap) + var(--nav-h) + var(--bar-h) + var(--s4));
  width: min(calc(100% - 32px), 480px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px 10px 10px var(--s4); min-height: 52px; border-radius: var(--r-md);
  background: rgba(244,242,238,.96); color: var(--on-light); font-weight: 500; font-size: var(--fs-sm);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { min-height: 36px; padding: 0 var(--s3); border-radius: var(--r-sm); background: var(--on-light); color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.offline { position: sticky; top: 0; z-index: 35; padding: calc(var(--safe-top) + 8px) var(--s4) 8px; text-align: center; font-size: var(--fs-sm); background: #3A2F12; color: #FFE7A8; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.screen > * { animation: rise .35s var(--ease) both; }
.screen > *:nth-child(2) { animation-delay: .03s; } .screen > *:nth-child(3) { animation-delay: .06s; } .screen > *:nth-child(n+4) { animation-delay: .09s; }

/* ===== Hover (pointer devices only) ===== */
@media (hover: hover) {
  .btn-secondary:hover, .shortcut:hover, .session-main:hover, .pkg:not([aria-checked="true"]):hover, .filter:not([aria-pressed="true"]):hover, .date:hover:not([aria-pressed="true"]) { background-color: var(--fill-hover); }
  .btn-primary:hover { background: #FFFFFF; }
  .tab:hover { color: var(--text); }
  .icon-btn:hover { background: var(--fill-hover); }
  .coach-head:hover .chev { color: var(--text); }
}

/* ===== Larger screens ===== */
@media (min-width: 760px) {
  :root { --fs-2xl: 1.875rem; }
  .wrap { max-width: 720px; }
  .hero { height: 260px; }
  .sheet { bottom: var(--s6); border-radius: var(--r-xl); border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: var(--s5); }
}
@media (min-width: 1080px) {
  .wrap { max-width: 1040px; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .home-grid > .section:first-child { margin-top: 0; }
  .session-list.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Home (landing) — matches the approved canvas design ===== */
body {
  background:
    radial-gradient(110% 50% at 0% 0%, rgba(120,132,168,.38) 0%, rgba(120,132,168,0) 60%),
    radial-gradient(90% 45% at 100% 55%, rgba(198,164,132,.22) 0%, rgba(198,164,132,0) 62%),
    radial-gradient(100% 45% at 20% 100%, rgba(88,118,132,.30) 0%, rgba(88,118,132,0) 62%),
    #07080B;
  background-attachment: fixed;
}
body.is-home #main { padding-top: 0; }
.home-hero { position: relative; height: clamp(420px, 56vh, 520px); overflow: hidden; }
.home-hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  animation: settle 1.6s var(--ease) both;
}
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 46%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.15) 100%); }
.hero-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--safe-top) + 14px); padding-bottom: var(--s5); }
.hero-top { margin-bottom: 0; animation: rise .6s var(--ease) both; }
.hero-top .logo { height: 30px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
.glass-btn, .btn-glass {
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
  color: var(--text);
}
.glass-btn { width: 48px; height: 48px; }
.hero-text { animation: rise .7s .3s var(--ease) both; }
.hero-greet { font-size: var(--fs-md); color: #E6E3DD; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero-title { font-size: clamp(2.1rem, 9vw, 2.6rem); margin-top: 6px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }

.home-body { position: relative; }
.glass-card {
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius: 28px;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-card, .glass-btn, .btn-glass { background: rgba(48,50,58,.9); }
}
.home-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.starts { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); animation: pulse 1.8s ease-out infinite; }
.big-time { font-family: var(--font-num); font-size: 4.25rem; font-weight: 300; line-height: .9; letter-spacing: -.03em; color: #fff; margin-top: -6px; }
.next-name { font-size: var(--fs-xl); font-weight: 600; }
.next-meta { font-size: var(--fs-md); color: var(--text-2); margin-top: -12px; }
.remind-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; text-align: left;
  border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background-color .25s, border-color .25s;
}
.remind-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); flex-shrink: 0; }
.remind-ic svg { width: 18px; height: 18px; }
.remind-t { display: block; font-weight: 600; }
.remind-s { display: block; font-size: var(--fs-sm); color: var(--text-2); }
.switch { position: relative; width: 50px; height: 30px; border-radius: 15px; flex-shrink: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); transition: background-color .3s, border-color .3s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .32s var(--ease), background-color .3s; }
.remind-row[aria-checked="true"] .switch { background: var(--text); border-color: var(--text); }
.remind-row[aria-checked="true"] .switch i { transform: translateX(20px); background: #000; }
.remind-row[aria-checked="true"] .remind-ic svg { animation: ring .8s ease; transform-origin: 50% 12%; }
.home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-actions .btn { min-height: 52px; border-radius: 16px; }
.home-section { margin-top: var(--s6); }
.home-section h2 { font-size: 1.25rem; }
.link-quiet { color: var(--text-2); font-size: var(--fs-sm); min-height: var(--hit); display: inline-flex; align-items: center; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: var(--s2); }
.today-chip { min-height: 52px; border-radius: 14px; font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: background-color .2s; }
.today-chip.past { color: var(--text-3); text-decoration: line-through; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
.today-chip.next { background: rgba(255,255,255,.30); border-color: rgba(255,255,255,.55); color: #fff; animation: glow 2.2s 1.2s ease-out infinite; }
.passes-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; text-decoration: none; }
.pc-num { font-family: var(--font-num); font-size: 3rem; font-weight: 300; line-height: .9; color: #fff; }
.pc-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; margin-top: 8px; }
.pc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--text); animation: fill 1.1s .5s var(--ease) both; }
.visit-card { padding: 4px 18px; }
.v-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.v-row:last-child { border-bottom: 0; }
a.v-row { align-items: center; }
.v-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.10); flex-shrink: 0; }
.v-ic svg { width: 18px; height: 18px; }
.v-k { display: block; font-size: var(--fs-sm); color: var(--text-2); }
.v-v { display: block; font-weight: 600; }

/* Floating glass tab bar, as in the canvas */
.tabbar {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28);
  border-radius: 33px; height: 68px; padding: 6px;
  width: min(calc(100% - 32px), 480px); bottom: calc(var(--safe-bottom) + 22px);
}
:root { --nav-h: 68px; --nav-gap: 22px; }
.tab { border-radius: 27px; color: rgba(244,242,238,.7); font-size: 11.5px; }
.tab[aria-current="page"] { color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }

@keyframes settle { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(244,242,238,.55); } 100% { box-shadow: 0 0 0 10px rgba(244,242,238,0); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(244,242,238,.45); } 100% { box-shadow: 0 0 0 10px rgba(244,242,238,0); } }
@keyframes fill { from { width: 0; } }
@keyframes ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 35% { transform: rotate(-14deg); } 55% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }
@media (hover: hover) {
  .glass-btn:hover, .btn-glass:hover { background: rgba(255,255,255,.18); }
  .remind-row:hover { background: rgba(255,255,255,.11); }
  .today-chip:not(.past):hover { background: rgba(255,255,255,.16); }
  .passes-card:hover, .glass-card.passes-card:hover { background: rgba(255,255,255,.16); }
}
@media (min-width: 760px) {
  .home-hero { height: 480px; max-width: 720px; margin: 0 auto; border-radius: 0 0 32px 32px; }
}
@media (min-width: 1080px) {
  .home-hero { max-width: 1040px; height: 500px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.home-actions .btn { padding: 6px 10px; font-size: .9375rem; }
.today-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
@media (max-width: 340px) { .home-actions { grid-template-columns: 1fr; } }
.big-time { font-size: min(4.25rem, 21vw); } .starts { flex-wrap: wrap; }
.today-grid { grid-template-columns: repeat(auto-fill, minmax(max(50px, 3.25rem), 1fr)); }

.cat-name { margin-top: var(--s5); font-size: 1.25rem; }
.cat-detail { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.cat-name + .cat-detail + .group-title, .cat-name + .group-title { margin-top: var(--s4); }

/* ===== What we offer ===== */
.offer { margin-bottom: var(--s5); }
.offer h2 { font-size: 1.125rem; }
.offer-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: var(--s2) calc(-1 * var(--s4)) 0; padding: 2px var(--s4) 4px; }
.offer-row::-webkit-scrollbar { display: none; }
.offer-card {
  flex: 0 0 auto; width: 148px; scroll-snap-align: start; text-align: left;
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 20px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  transition: background-color .2s, transform .12s;
}
.offer-card:active { transform: scale(.97); }
.offer-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.12); margin-bottom: 6px; flex-shrink: 0; }
.offer-ic svg { width: 22px; height: 22px; }
.offer-name { font-weight: 600; line-height: 1.25; }
.offer-tag { font-size: var(--fs-xs); color: var(--text-3); }
.offer-book { margin-top: 6px; align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: var(--text-2); }
.offer-book.timetable { background: var(--text); color: var(--on-light); border-color: var(--text); }
.appt { margin-top: 2px; }
.appt-note { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); }
.appt-note svg { width: 17px; height: 17px; margin-top: 1px; }
.inline-link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.disc-hero { height: 96px; border-radius: var(--r-lg); margin-bottom: var(--s4); display: grid; place-items: center; background: radial-gradient(80% 120% at 30% 0%, rgba(255,255,255,.14), rgba(255,255,255,.03)); border: 1px solid var(--line); }
.disc-hero svg { width: 44px; height: 44px; stroke-width: 1.4; }
@media (hover: hover) { .offer-card:hover { background: rgba(255,255,255,.14); } }
@media (min-width: 760px) { .offer-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: var(--s2) 0 0; padding: 0; } .offer-card { width: auto; } }
/* What we offer: all disciplines visible at once (no sideways scrolling) */
.offer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin: var(--s2) 0 0; padding: 0; scroll-snap-type: none; }
.offer-card { width: auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 10px 12px; border-radius: 16px; min-height: 64px; }
.offer-card .offer-ic { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; margin: 0; }
.offer-card .offer-ic svg { width: 20px; height: 20px; }
.offer-card .offer-name { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-card .offer-tag { display: none; }
.offer-card .offer-book { margin: 0; padding: 0; border: 0; background: none !important; color: var(--text-3) !important; font-size: 11px; font-weight: 500; }
.offer-card .offer-book.timetable { color: var(--text-2) !important; }
.offer-card .offer-book::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--text-3); }
.offer-card .offer-book.timetable::before { background: #7BD88F; }
@media (min-width: 760px) { .offer-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Classes: view switch + "What we offer" list (mirrors morethegym.com) ===== */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-md); margin-bottom: var(--s4); }
.seg button { min-height: 42px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); transition: background-color .2s, color .2s; }
.seg button[aria-selected="true"] { background: var(--text); color: var(--on-light); }
.offer-intro { margin: 0 0 var(--s2); }
.disc-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.disc { border-bottom: 1px solid var(--line); }
.disc-head { display: grid; gap: 8px; width: 100%; padding: 22px 2px; text-align: left; }
.disc-tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.disc-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.disc-name { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 7.4vw, 2.1rem); line-height: 1; color: #fff; }
.plus { position: relative; width: 22px; height: 22px; flex-shrink: 0; margin-top: 4px; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--text); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.disc.is-open .plus::before { transform: translate(-50%, -50%) rotate(135deg); }
.disc.is-open .plus::after { transform: translate(-50%, -50%) rotate(225deg); }
.disc-about { color: var(--text-2); line-height: 1.6; }
.disc-status { justify-self: start; font-size: 11px; font-weight: 600; color: var(--text-3); }
.disc-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--text-3); }
.disc-status.timetable { color: var(--text-2); }
.disc-status.timetable::before { background: #7BD88F; }
.disc-panel { padding: 0 2px 24px; animation: rise .3s var(--ease) both; }
.disc-panel .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); }
.disc-panel .facts dt { color: var(--text-3); }
.disc-panel .facts dd { margin: 0; }
.disc-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.disc-actions .btn { flex: 1 1 150px; }
.sheet .disc-actions { flex-direction: column; }
@media (hover: hover) { .disc-head:hover .disc-name { color: var(--text-2); } .seg button:not([aria-selected="true"]):hover { background: var(--fill-hover); } }
@media (min-width: 760px) {
  .disc-head { grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.1fr) 28px; align-items: start; column-gap: var(--s6); padding: 28px 4px; }
  .disc-tag { padding-top: 10px; }
  .disc-title { display: contents; }
  .disc-name { grid-column: 2; }
  .plus { grid-column: 4; grid-row: 1; }
  .disc-about { grid-column: 3; grid-row: 1; }
  .disc-status { grid-column: 3; }
  .disc-panel { padding-left: calc(190px + var(--s6)); }
}
.disc-name { min-width: 0; overflow-wrap: anywhere; } .disc-title { min-width: 0; } .disc-tag, .disc-about { min-width: 0; overflow-wrap: anywhere; }
/* Discipline icons in the What we offer list */
.disc-nw { display: flex; align-items: center; gap: 14px; min-width: 0; }
.disc-ic {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: background-color .25s, color .25s, transform .3s var(--ease);
}
.disc-ic svg { width: 26px; height: 26px; stroke-width: 1.6; }
.disc.is-open .disc-ic { background: var(--text); color: var(--on-light); border-color: var(--text); }
.plus { margin-top: 13px; }
@media (hover: hover) { .disc-head:hover .disc-ic { transform: scale(1.06); } }
@media (min-width: 760px) {
  .disc-nw { grid-column: 2; grid-row: 1; align-items: flex-start; }
  .disc-ic { width: 52px; height: 52px; }
  .plus { margin-top: 4px; }
}


/* ===== Blue hover (pointer devices only) ===== */
:root {
  --blue: #2F6FED;              /* fills: white text on it passes contrast */
  --blue-text: #7FB0FF;         /* text & icons on the dark background */
  --blue-tint: rgba(47,111,237,.20);
  --blue-line: rgba(127,176,255,.65);
}
@media (hover: hover) {
  .btn, .glass-btn, .icon-btn, .tab, .filter, .date, .cat, .seg button, .session-main, .pkg, .today-chip,
  .remind-row, .passes-card, .shortcut, .disc-head, .coach-head, .time-chip, .link, .link-quiet, .inline-link,
  .footer a, .menu-list a, .menu-list button, .v-row, .disclosure {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
  }
  /* Primary buttons turn blue */
  .btn-primary:hover { background: var(--blue) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(47,111,237,.35); }
  /* Secondary / glass buttons: blue tint, blue edge, blue text */
  .btn-secondary:hover, .btn-glass:hover, .glass-btn:hover, .icon-btn:hover {
    background: var(--blue-tint) !important; border-color: var(--blue-line) !important; color: var(--blue-text) !important;
  }
  /* Choice controls that aren't selected */
  .filter:not([aria-pressed="true"]):hover, .date:not([aria-pressed="true"]):hover, .today-chip:not(.past):not(.next):hover,
  .time-chip:hover, .disclosure:hover {
    background: var(--blue-tint) !important; border-color: var(--blue-line) !important; color: var(--blue-text) !important;
  }
  .date:not([aria-pressed="true"]):hover .wd { color: var(--blue-text); }
  .cat:not([aria-selected="true"]):hover, .seg button:not([aria-selected="true"]):hover { background: var(--blue-tint) !important; color: var(--blue-text) !important; }
  /* Rows and cards */
  .session-main:hover, .pkg:not([aria-checked="true"]):hover, .remind-row:hover, .passes-card:hover, .shortcut:hover {
    background: var(--blue-tint) !important; border-color: var(--blue-line) !important;
  }
  .session-main:hover .session-name, .session-main:hover .session-time, .pkg:not([aria-checked="true"]):hover .name { color: var(--blue-text); }
  .session-main:hover .session-ic, .remind-row:hover .remind-ic { color: var(--blue-text); border-color: var(--blue-line); }
  .disc-head:hover .disc-name, .coach-head:hover .t-strong { color: var(--blue-text) !important; }
  .disc-head:hover .disc-ic { border-color: var(--blue-line); color: var(--blue-text); background: var(--blue-tint); }
  .disc.is-open .disc-head:hover .disc-ic { background: var(--blue); color: #fff; border-color: var(--blue); }
  .disc-head:hover .plus::before, .disc-head:hover .plus::after { background: var(--blue-text); }
  .coach-head:hover .chev, .coach-head:hover .avatar { color: var(--blue-text); }
  .coach-head:hover .avatar { background: var(--blue-tint); }
  /* Navigation */
  .tab:not([aria-current="page"]):hover { color: var(--blue-text) !important; background: var(--blue-tint); }
  /* Links */
  .link:hover, .link-quiet:hover, .inline-link:hover, .footer a:hover, .footer a:hover span, .menu-list a:hover, .menu-list button:hover, a.v-row:hover .v-v, a.v-row:hover .t-2 { color: var(--blue-text) !important; }
  .menu-list a:hover .avatar, .menu-list button:hover .avatar, a.v-row:hover .v-ic { background: var(--blue-tint); color: var(--blue-text); }
}

/* ===== Add to calendar ===== */
.cal-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: -4px; border-radius: 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.cal-link svg { width: 18px; height: 18px; }
.cal-sum { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-md); }
.seg button[role="radio"][aria-checked="true"] { background: var(--text); color: var(--on-light); }
@media (hover: hover) { .cal-link:hover { color: var(--blue-text); background: var(--blue-tint); } .seg button[role="radio"]:not([aria-checked="true"]):hover { background: var(--blue-tint); color: var(--blue-text); } }

/* ===== Next-class widget beside the big time ===== */
.nc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nc-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nc-widget { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; padding: 4px; border-radius: 22px; }
.nc-ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.nc-ring .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 4; }
.ring-fill { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 5px rgba(244,242,238,.45)); }
.nc-ic {
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nc-ic svg { width: 34px; height: 34px; stroke-width: 1.5; }
.nc-day { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.nc-widget .nc-ic { animation: pop .6s .5s var(--ease) both; }
@keyframes pop { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@media (hover: hover) {
  .nc-widget:hover .nc-ic { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-text); }
  .nc-widget:hover .ring-fill { stroke: var(--blue-text); }
  .nc-widget:hover .nc-day { color: var(--blue-text); }
}
@media (max-width: 350px) { .nc-ring { width: 78px; height: 78px; } .nc-ic { width: 56px; height: 56px; } .nc-ic svg { width: 28px; height: 28px; } }

/* ===== Sign-in ===== */
.btn-provider { background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--text); justify-content: center; }
.btn-provider svg.brand { width: 20px; height: 20px; }
.field { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.06); color: var(--text); font-size: 1rem; }
.field:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.field-label { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: -6px; }
select.field { appearance: none; -webkit-appearance: none; padding-right: 10px; }
.phone-row { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 8px; }
.otp { text-align: center; font-size: 1.6rem; letter-spacing: .5em; font-variant-numeric: tabular-nums; padding-left: .5em; }
.form-error { color: #FFB4A8; font-size: var(--fs-sm); }
#recaptcha-box { min-height: 0; }

/* ===== Membership ===== */
.member-intro { display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: stretch; padding: 24px 20px; }
.member-intro h2 { font-size: 1.35rem; }
.mi-ic, .qr-mini { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); align-self: center; }
.mi-ic svg { width: 28px; height: 28px; }
.qr-mini { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: var(--text); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: none; }
.chip-ok { color: #9BE3AB; border-color: rgba(123,216,143,.45); background: rgba(123,216,143,.12); } .chip-ok::before { display: inline-block; }
.chip-warn { color: #FFD27A; border-color: rgba(255,210,122,.45); background: rgba(255,210,122,.12); } .chip-warn::before { display: inline-block; }
.chip-bad { color: #FFB4A8; border-color: rgba(255,180,168,.45); background: rgba(255,180,168,.12); } .chip-bad::before { display: inline-block; }
.card-btn { display: block; width: 100%; text-align: left; border-radius: 26px; }

/* The e-card: black gradient, refined glass details; QR on a solid white panel with quiet zone */
.ecard {
  position: relative; overflow: hidden; border-radius: 26px; padding: 22px;
  background: linear-gradient(145deg, #1D1F25 0%, #0C0D10 55%, #050506 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  display: flex; flex-direction: column; gap: 6px; min-height: 230px;
}
.ecard-glow { position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(150,165,210,.22), rgba(150,165,210,0)); pointer-events: none; }
.ecard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; position: relative; }
.ecard-logo { height: 22px; width: auto; }
.ecard-name { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; color: #fff; position: relative; overflow-wrap: anywhere; }
.ecard-pkg { color: var(--text-2); font-size: var(--fs-md); position: relative; }
.ecard-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-top: 14px; position: relative; }
.ecard-meta { display: grid; gap: 10px; margin: 0; }
.ecard-meta dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ecard-meta dd { margin: 2px 0 0; font-weight: 600; color: #fff; }
.qr-panel { background: #fff; border-radius: 14px; padding: 8px; width: 132px; height: 132px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
svg.qr { width: 100%; height: 100%; display: block; stroke: none; }
svg.qr * { stroke: none; }
.ecard.is-demo .demo-mark { position: absolute; right: 18px; top: 50%; transform: rotate(-12deg); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 2.6rem; color: rgba(255,210,122,.16); pointer-events: none; }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pending-card .eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.account-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); }
.tracker { border-radius: var(--r-lg); padding: 14px 16px; }
.tracker summary { cursor: pointer; min-height: 32px; display: flex; gap: 8px; align-items: baseline; }
.done-badge { width: 64px; height: 64px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(123,216,143,.14); border: 1px solid rgba(123,216,143,.45); color: #9BE3AB; }
.done-badge svg { width: 30px; height: 30px; }
.facts.summary { margin-bottom: var(--s4); }

/* Full-screen card: distraction-free, large QR on white */
.sheet.sheet-full { inset: 0; left: 0; transform: none; width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; background: #050506; animation: fade .2s ease both; display: flex; flex-direction: column; padding-top: calc(var(--safe-top) + 12px); }
.sheet.sheet-full .grab { display: none; }
.fullcard { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding-bottom: 40px; }
.fullcard-qr { background: #fff; padding: 16px; border-radius: 22px; width: min(78vw, 320px); aspect-ratio: 1; margin-bottom: 20px; }
.fullcard-name { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 1.6rem; color: #fff; }
@media (hover: hover) { .btn-provider:hover { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-text); } .card-btn:hover .ecard { border-color: var(--blue-line); } }
@media (min-width: 760px) { .card-btn, .member-intro, .pending-card { max-width: 520px; } }
.topbar h1 { min-width: 0; overflow-wrap: anywhere; }
/* Tab bar hover: blue icon and label only, no circle behind */
@media (hover: hover) {
  .tabbar .tab:not([aria-current="page"]):hover { background: transparent !important; box-shadow: none !important; color: var(--blue-text) !important; }
  .tabbar .tab:not([aria-current="page"]):hover svg { transform: translateY(-2px); }
  .tabbar .tab svg { transition: transform .2s var(--ease); }
}
/* Very small phones: keep day buttons at a comfortable 44px and let the strip scroll */
@media (max-width: 350px) {
  .dates { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .dates::-webkit-scrollbar { display: none; }
}
/* Link hand-off sheet (when shown inside another page) */
.link-qr { width: min(64vw, 240px); aspect-ratio: 1; margin: 4px auto 0; background: #fff; border-radius: 18px; padding: 12px; }
.msg-preview { border-radius: var(--r-md); padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== Founder card: full-width photo, name over the image ===== */
.founder-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fc-hero { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.fc-img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 22%; animation: settle 1.4s var(--ease) both; }
.fc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.85) 100%); }
.fc-over { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fc-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fc-name { font-size: clamp(1.7rem, 8vw, 2.2rem); line-height: 1; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); overflow-wrap: anywhere; }
.fc-role { font-size: var(--fs-md); color: #E6E3DD; }
.fc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.fc-about { font-size: var(--fs-md); line-height: 1.6; color: var(--text); }
.founder-card .btn { min-height: 50px; border-radius: 16px; }
@media (hover: hover) { .founder-card:hover .fc-img { transform: scale(1.03); transition: transform 1.2s var(--ease); } }
@media (min-width: 760px) {
  .founder-card { flex-direction: row; }
  .fc-hero { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
  .fc-body { flex: 1; justify-content: center; padding: 28px; }
  .founder-card .btn { align-self: flex-start; width: auto; }
}
/* ===== WhatsApp: shortcut + topics ===== */
.wa-btn { color: #7FE3A0; }
.wa-btn svg { width: 22px; height: 22px; }
.topic-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.topic { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: 16px; text-decoration: none;
  background: var(--fill-quiet); border: 1px solid var(--line); transition: background-color .2s, border-color .2s; }
.topic > svg { color: var(--text-3); width: 18px; height: 18px; }
.topic-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(37,211,102,.14); color: #7FE3A0; flex-shrink: 0; }
.topic-ic svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .topic:hover { background: var(--blue-tint); border-color: var(--blue-line); }
  .topic:hover .t-strong { color: var(--blue-text); }
  .wa-btn:hover { color: var(--blue-text) !important; }
}
/* WhatsApp green "Chat with us" */
.btn-wa { background: #25D366; color: #052E16; font-weight: 700; min-height: 56px; border-radius: 16px; gap: 10px; box-shadow: 0 10px 26px rgba(37,211,102,.28); }
.btn-wa svg { width: 22px; height: 22px; stroke-width: 2; }
.btn-wa:active { background: #1FBF5B; }
@media (hover: hover) { .btn-wa:hover { background: #2EE372 !important; color: #052E16 !important; box-shadow: 0 12px 30px rgba(37,211,102,.4); } }
.wa-qr-row { display: flex; align-items: center; gap: 14px; margin-top: var(--s4); }
.link-qr.small { width: 112px; margin: 0; padding: 8px; border-radius: 12px; flex-shrink: 0; }

/* ===== Touch = hover: the same blue highlight while a finger presses (generated from the hover rules) ===== */
@media (hover: none) {

  .btn-secondary.touch-hover, .shortcut.touch-hover, .session-main.touch-hover, .pkg:not([aria-checked="true"]).touch-hover, .filter:not([aria-pressed="true"]).touch-hover, .date.touch-hover:not([aria-pressed="true"]) { background-color: var(--fill-hover); }
  .btn-primary.touch-hover { background: #FFFFFF; }
  .tab.touch-hover { color: var(--text); }
  .icon-btn.touch-hover { background: var(--fill-hover); }
  .coach-head.touch-hover .chev { color: var(--text); }


  .glass-btn.touch-hover, .btn-glass.touch-hover { background: rgba(255,255,255,.18); }
  .remind-row.touch-hover { background: rgba(255,255,255,.11); }
  .today-chip:not(.past).touch-hover { background: rgba(255,255,255,.16); }
  .passes-card.touch-hover, .glass-card.passes-card.touch-hover { background: rgba(255,255,255,.16); }

 .offer-card.touch-hover { background: rgba(255,255,255,.14); } 
 .disc-head.touch-hover .disc-name { color: var(--text-2); } .seg button:not([aria-selected="true"]).touch-hover { background: var(--fill-hover); } 
 .disc-head.touch-hover .disc-ic { transform: scale(1.06); } 

  .btn, .glass-btn, .icon-btn, .tab, .filter, .date, .cat, .seg button, .session-main, .pkg, .today-chip,
  .remind-row, .passes-card, .shortcut, .disc-head, .coach-head, .time-chip, .link, .link-quiet, .inline-link,
  .footer a, .menu-list a, .menu-list button, .v-row, .disclosure {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
  }
  /* Primary buttons turn blue */
  .btn-primary.touch-hover { background: var(--blue) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(47,111,237,.35); }
  /* Secondary / glass buttons: blue tint, blue edge, blue text */
  .btn-secondary.touch-hover, .btn-glass.touch-hover, .glass-btn.touch-hover, .icon-btn.touch-hover {
    background: var(--blue-tint) !important; border-color: var(--blue-line) !important; color: var(--blue-text) !important;
  }
  /* Choice controls that aren't selected */
  .filter:not([aria-pressed="true"]).touch-hover, .date:not([aria-pressed="true"]).touch-hover, .today-chip:not(.past):not(.next).touch-hover,
  .time-chip.touch-hover, .disclosure.touch-hover {
    background: var(--blue-tint) !important; border-color: var(--blue-line) !important; color: var(--blue-text) !important;
  }
  .date:not([aria-pressed="true"]).touch-hover .wd { color: var(--blue-text); }
  .cat:not([aria-selected="true"]).touch-hover, .seg button:not([aria-selected="true"]).touch-hover { background: var(--blue-tint) !important; color: var(--blue-text) !important; }
  /* Rows and cards */
  .session-main.touch-hover, .pkg:not([aria-checked="true"]).touch-hover, .remind-row.touch-hover, .passes-card.touch-hover, .shortcut.touch-hover {
    background: var(--blue-tint) !important; border-color: var(--blue-line) !important;
  }
  .session-main.touch-hover .session-name, .session-main.touch-hover .session-time, .pkg:not([aria-checked="true"]).touch-hover .name { color: var(--blue-text); }
  .session-main.touch-hover .session-ic, .remind-row.touch-hover .remind-ic { color: var(--blue-text); border-color: var(--blue-line); }
  .disc-head.touch-hover .disc-name, .coach-head.touch-hover .t-strong { color: var(--blue-text) !important; }
  .disc-head.touch-hover .disc-ic { border-color: var(--blue-line); color: var(--blue-text); background: var(--blue-tint); }
  .disc.is-open .disc-head.touch-hover .disc-ic { background: var(--blue); color: #fff; border-color: var(--blue); }
  .disc-head.touch-hover .plus::before, .disc-head.touch-hover .plus::after { background: var(--blue-text); }
  .coach-head.touch-hover .chev, .coach-head.touch-hover .avatar { color: var(--blue-text); }
  .coach-head.touch-hover .avatar { background: var(--blue-tint); }
  /* Navigation */
  .tab:not([aria-current="page"]).touch-hover { color: var(--blue-text) !important; background: var(--blue-tint); }
  /* Links */
  .link.touch-hover, .link-quiet.touch-hover, .inline-link.touch-hover, .footer a.touch-hover, .footer a.touch-hover span, .menu-list a.touch-hover, .menu-list button.touch-hover, a.v-row.touch-hover .v-v, a.v-row.touch-hover .t-2 { color: var(--blue-text) !important; }
  .menu-list a.touch-hover .avatar, .menu-list button.touch-hover .avatar, a.v-row.touch-hover .v-ic { background: var(--blue-tint); color: var(--blue-text); }

 .cal-link.touch-hover { color: var(--blue-text); background: var(--blue-tint); } .seg button[role="radio"]:not([aria-checked="true"]).touch-hover { background: var(--blue-tint); color: var(--blue-text); } 

  .nc-widget.touch-hover .nc-ic { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-text); }
  .nc-widget.touch-hover .ring-fill { stroke: var(--blue-text); }
  .nc-widget.touch-hover .nc-day { color: var(--blue-text); }

 .btn-provider.touch-hover { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-text); } .card-btn.touch-hover .ecard { border-color: var(--blue-line); } 

  .tabbar .tab:not([aria-current="page"]).touch-hover { background: transparent !important; box-shadow: none !important; color: var(--blue-text) !important; }
  .tabbar .tab:not([aria-current="page"]).touch-hover svg { transform: translateY(-2px); }
  .tabbar .tab svg { transition: transform .2s var(--ease); }

 .founder-card.touch-hover .fc-img { transform: scale(1.03); transition: transform 1.2s var(--ease); } 

  .topic.touch-hover { background: var(--blue-tint); border-color: var(--blue-line); }
  .topic.touch-hover .t-strong { color: var(--blue-text); }
  .wa-btn.touch-hover { color: var(--blue-text) !important; }

 .btn-wa.touch-hover { background: #2EE372 !important; color: #052E16 !important; box-shadow: 0 12px 30px rgba(37,211,102,.4); } 
}

/* Account deletion */
.danger-link { color: #FFB4A8 !important; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.btn-danger { background: #C8392B; color: #fff; }
.del-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.del-list b { color: var(--text); }
@media (hover: hover) { .btn-danger:hover { background: #E04A3B !important; color: #fff !important; } }
/* 4 tabs */
.tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(calc(100% - 32px), 420px); }