/* ==========================================================================
   Members Portal - "New experience" (Club Lime 2026 design)
   Source: the design prototype delivered by Viva Leisure (club-lime-member-portal.zip, Oct 2026): dark and light
   modes, Club Lime 2026 brand look, welcome banner, snapshot band, offers and promotion slot.
   Loaded AFTER hub.css, only when the new experience is on, so every hub class (.card, .btn, .badge, .field, .alert,
   .table ...) is restyled and the legacy compat rules in hub.css still cover pages the prototype does not draw.
   Prototype-only parts (toolbar, phone frame, stage, Zoo skin, the document-level shell layout) are left out.
   Mode:  <html data-mode="dark|light"> (js/exp-theme.js)    Brand:  <html data-brand="clublime|hiit|...">
   ========================================================================== */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 900; font-stretch: 125%; font-display: swap; src: url("../vendor/fonts/archivo-latin-wdth125.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../vendor/fonts/dmsans-latin-var.woff2") format("woff2"); }

/* Layout: calm, list-first member hub after Todoist's dark mode. Lighter sidebar beside a
   darker canvas, content in a centred column, lists split by hairlines rather than boxed in
   cards. Cards are kept for summaries and choices (pricing-card treatment), never for rows.
   Token names follow Hub's theme.json roles so each maps 1:1 to a brand theme. */
:root {
  color-scheme: dark;
  /* surface (theme.json surface.dark) */
  --bg: #1e1f1f;
  --sidebar: #262727;
  --card: #262727;
  --raised: #2f3030;
  --hover: #2a2b2b;
  --border: #363838;
  --hairline: #2d2e2e;
  --input: #4a4c4c;
  --fg: #e6e7e7;
  --fg-strong: #f6f6f6;
  --muted: #a3a5a5;
  --eyebrow: #8c8e8e;
  /* brand */
  --primary: #97ff03;
  --primary-fg: #0b0c0b;
  --accent-text: #a8ff3b; /* proposed primaryText role: accent used as text */
  --accent-soft: rgba(151, 255, 3, 0.12);
  /* status */
  --success: #5fd38d;
  --warning: #f2b544;
  --danger: #ff7b72;
  --info: #8ab8ff;
  /* shape */
  --radius: 8px;
  --radius-card: 14px;
  --radius-btn: 8px;
  /* type */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 700;
  --display-case: none;
  --display-track: -0.015em;
  /* effects */
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --glow: rgba(151, 255, 3, 0.1);
  /* group brands, used as identifiers next to their names */
  --b-clublime: #97ff03;
  --b-hiit: #ff6a2b;
  --b-groundup: #b9bbec;
  /* Club Lime logo colour from the supplied logo file */
  --logo: #82fa00;
  /* hooks a brand can set: the primary button can differ from the brand fill, display type can
     run wide, and photography can carry a brand grade */
  --cta-bg: var(--primary);
  --cta-fg: var(--primary-fg);
  --display-stretch: 100%;
  --photo-filter: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* sidebar: lighter than the canvas, tight rows, tinted active row */
.sidebar {
  display: none;
  flex: none;
  width: 264px;
  flex-direction: column;
  background: var(--sidebar);
  padding: 18px 12px 12px;
  gap: 1px;
}
.side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 18px 10px;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.icon-btn:hover {
  background: var(--hover);
  color: var(--fg);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(21px * var(--fs, 1));
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  text-transform: lowercase;
}
.wordmark b {
  color: var(--primary);
  font-weight: 900;
}
.wordmark.logo {
  color: var(--logo);
  display: block;
  line-height: 0;
}
.wordmark.logo svg {
  display: block;
  height: 19px;
  width: auto;
  max-width: 100%;
}
.m-header .wordmark.logo svg {
  height: 17px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--fg);
  font-weight: 400;
  font-size: calc(14.5px * var(--fs, 1));
  width: 100%;
  text-align: left;
}
.nav-item .i {
  width: 19px;
  height: 19px;
  color: var(--muted);
}
.nav-item:hover {
  background: var(--hover);
}
.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}
.nav-item[aria-current="page"] .i {
  color: var(--accent-text);
}
.nav-count {
  margin-left: auto;
  font-size: calc(12.5px * var(--fs, 1));
  color: var(--eyebrow);
}
.nav-item[aria-current="page"] .nav-count {
  color: var(--accent-text);
}
.side-label {
  margin: 18px 10px 6px;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 600;
  color: var(--muted);
}
.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  text-align: left;
  width: 100%;
}
.side-member:hover {
  background: var(--hover);
}
.side-member b {
  font-weight: 500;
  color: var(--fg-strong);
}
.side-member small {
  display: block;
  color: var(--muted);
  font-size: calc(12.5px * var(--fs, 1));
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: calc(12px * var(--fs, 1));
  color: var(--primary-fg);
  background: var(--primary);
}
.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: calc(19px * var(--fs, 1));
}
/* desktop top bar: breadcrumb left, quiet actions right */
.topbar {
  display: none;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 20px 0 28px;
}
/* search sits centred in the top bar: crumbs and actions share the remaining space equally */
.topbar > .crumbs,
.topbar > .top-actions {
  flex: 1 1 0;
  min-width: 0;
}
.topbar > .top-actions {
  justify-content: flex-end;
}
.top-search {
  flex: 0 1 560px;
  width: 100%;
  max-width: 560px;
  margin-left: 0;
}
.top-search .gs input.gs-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font-size: calc(15px * var(--fs, 1));
  text-overflow: ellipsis;
}
.top-search .gs-icon {
  top: 22px;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: calc(14px * var(--fs, 1));
  min-width: 0;
}
.crumbs button:hover {
  color: var(--fg);
}
.crumbs b {
  color: var(--fg);
  font-weight: 500;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.top-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--fg);
  font-size: calc(14px * var(--fs, 1));
}
.top-action:hover {
  background: var(--hover);
}
.top-action .i {
  color: var(--muted);
}
.m-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.tabbar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--sidebar);
  border-top: 1px solid var(--hairline);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 48px;
  justify-content: center;
  color: var(--muted);
  font-size: calc(11px * var(--fs, 1));
  font-weight: 500;
}
.tab .i {
  width: 22px;
  height: 22px;
}
.tab[aria-current="page"] {
  color: var(--accent-text);
}
.tab-pass .tab-pass-ring {
  width: 50px;
  height: 50px;
  margin-top: -20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 0 0 5px var(--sidebar);
}
.tab-pass .tab-pass-ring .i {
  color: var(--primary-fg);
  width: 23px;
  height: 23px;
}
@container app (min-width: 880px) {
  .sidebar {
    display: flex;
  }
  .topbar {
    display: flex;
  }
  .m-header,
  .tabbar {
    display: none;
  }
  .screen {
    padding: 8px 48px 64px;
    gap: 24px;
  }
}
/* ---------- type ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head > div {
  min-width: 0;
}
.title {
  margin: 0;
  font-stretch: var(--display-stretch);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  font-size: calc(26px * var(--fs, 1));
  line-height: 1.15;
  color: var(--fg-strong);
  text-wrap: balance;
}
@container app (min-width: 880px) {
  .title {
    font-size: calc(30px * var(--fs, 1));
  }
}
.subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 62ch;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.subtitle .i {
  width: 16px;
  height: 16px;
}
.eyebrow {
  margin: 0;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 500;
  color: var(--muted);
}
.h3 {
  margin: 0;
  font-size: calc(15.5px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.display-sm {
  font-stretch: var(--display-stretch);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  color: var(--fg-strong);
  line-height: 1.15;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: calc(13px * var(--fs, 1));
}
.accent {
  color: var(--accent-text);
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-weight: 500;
  font-size: calc(14px * var(--fs, 1));
  height: 32px;
  align-self: flex-start;
  margin-bottom: -12px;
}
.back:hover {
  color: var(--fg);
}
@container app (min-width: 880px) {
  .back {
    display: none;
  }
}
/* ---------- surfaces ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  min-width: 0;
}
@container app (min-width: 880px) {
  .card {
    padding: 22px 24px;
  }
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.link {
  color: var(--muted);
  font-weight: 500;
  font-size: calc(13.5px * var(--fs, 1));
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.link .i {
  width: 16px;
  height: 16px;
}
.link:hover {
  color: var(--fg);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.grid-2 {
  display: grid;
  gap: 24px;
}
@container app (min-width: 880px) {
  .grid-2 {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 40px;
    align-items: start;
  }
  .grid-2.even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.hr {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}
/* sections: bold title, hairline, rows */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--hairline);
}
.section-head .h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.section-head .count {
  font-size: calc(13px * var(--fs, 1));
  color: var(--eyebrow);
  font-weight: 400;
}
.rows > * {
  border-bottom: 1px solid var(--hairline);
}
/* insight cards: small stacked panels, title + value + detail */
.insight {
  padding: 16px 18px;
  border-radius: var(--radius-card);
}
@container app (min-width: 880px) {
  .insight {
    padding: 16px 18px;
  }
}
.insight-title {
  margin: 0;
  font-size: calc(14.5px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.insight-value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--fg);
  font-size: calc(14.5px * var(--fs, 1));
}
.insight-value .i {
  width: 16px;
  height: 16px;
}
/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  background: var(--raised);
  color: var(--fg-strong);
  font-weight: 500;
  font-size: calc(14px * var(--fs, 1));
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
@container app (min-width: 880px) {
  .btn {
    min-height: 36px;
    padding: 0 14px;
  }
}
.btn:hover {
  background: color-mix(in srgb, var(--raised) 80%, #fff 6%);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 600;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--cta-bg) 86%, #888);
}
.btn-accent {
  background: transparent;
  border-color: var(--border);
  color: var(--fg-strong);
}
.btn-accent:hover {
  border-color: var(--primary);
  color: var(--accent-text);
  background: transparent;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover {
  background: var(--hover);
  color: var(--fg);
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.btn-sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: calc(13.5px * var(--fs, 1));
}
@container app (min-width: 880px) {
  .btn-sm {
    min-height: 30px;
    padding: 0 10px;
  }
}
.btn-block {
  width: 100%;
}
.btn .i {
  width: 16px;
  height: 16px;
}
.btn-icon {
  width: 36px;
  min-height: 36px;
  padding: 0;
}
@container app (min-width: 880px) {
  .btn-icon {
    width: 32px;
    min-height: 32px;
  }
}
/* ---------- badges, chips, tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: calc(12px * var(--fs, 1));
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge .i {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}
.badge-success {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.badge-warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
}
.badge-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.badge-proposed {
  color: var(--info);
  border: 1px dashed color-mix(in srgb, var(--info) 55%, transparent);
}
.badge-accent {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: var(--accent-soft);
}
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: calc(13.5px * var(--fs, 1));
  white-space: nowrap;
}
.chip:hover {
  color: var(--fg);
  background: var(--hover);
}
.chip[aria-pressed="true"] {
  background: var(--raised);
  border-color: var(--input);
  color: var(--fg-strong);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted);
}
.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--fs, 1));
  color: var(--muted);
  white-space: nowrap;
}
.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--raised);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 500;
  color: var(--fg);
}
.brand-pill.is-off {
  background: transparent;
  border: 1px dashed var(--input);
  color: var(--muted);
}
.brand-pill.is-off:hover {
  color: var(--fg);
  border-color: var(--muted);
}
/* ---------- home ---------- */
.next {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--card)) 0%, var(--card) 55%);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.next-title {
  font-size: calc(28px * var(--fs, 1));
  margin: 6px 0 2px;
}
@container app (min-width: 880px) {
  .next-title {
    font-size: calc(32px * var(--fs, 1));
  }
}
.next-when {
  font-size: calc(16px * var(--fs, 1));
  color: var(--fg);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--muted);
  font-size: calc(13.5px * var(--fs, 1));
  margin-top: 10px;
}
.meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.meta .i {
  width: 15px;
  height: 15px;
}
.next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.later-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  width: 100%;
  text-align: left;
  border-radius: 0;
}
.later-row:hover {
  background: var(--hover);
}
.later-when {
  width: 96px;
  flex: none;
  font-size: calc(13px * var(--fs, 1));
  color: var(--muted);
}
.later-row > .i {
  margin-left: auto;
  color: var(--eyebrow);
}
.load-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.load-status {
  font-weight: 600;
}
.load-chart {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 12px;
}
.load-axis {
  display: flex;
  justify-content: space-between;
  color: var(--eyebrow);
  font-size: calc(11px * var(--fs, 1));
  margin-top: 4px;
}
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: calc(11.5px * var(--fs, 1));
  color: var(--eyebrow);
}
.week-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--input);
  display: grid;
  place-items: center;
}
.week-dot.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}
.week-dot.on .i {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}
.week-dot.today {
  border-color: var(--fg);
  border-style: dashed;
}
.big-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: calc(30px * var(--fs, 1));
  line-height: 1.1;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}
.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  font-size: calc(14px * var(--fs, 1));
}
.kv dt {
  color: var(--muted);
}
.kv dd {
  margin: 0;
  text-align: right;
  color: var(--fg-strong);
}
/* feature-card art: dark panel with a lit outline, after the reference cards */
.offers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.offer {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.offer-art {
  position: relative;
  height: 150px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
    linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 22px 22px,
    color-mix(in srgb, var(--bg) 70%, var(--card));
  border-bottom: 1px solid var(--border);
}
.art-tile {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--primary) 70%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--accent-text);
}
.art-tile .i {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}
.offer-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.offer-body .btn {
  margin-top: auto;
  align-self: flex-start;
}
.offer-title {
  font-size: calc(16px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.offers-strip {
  display: flex;
  flex-direction: column;
}
.offer-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 10px 2px;
  border-bottom: 1px solid var(--hairline);
}
.offer-mini:last-child {
  border-bottom: 0;
}
.offer-mini:hover .offer-title {
  color: var(--accent-text);
}
.offer-mini .art-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: none;
  border-width: 1px;
}
.offer-mini .art-tile .i {
  width: 17px;
  height: 17px;
}
.offer-mini .offer-title {
  font-size: calc(14.5px * var(--fs, 1));
  font-weight: 500;
}
/* ---------- classes: list rows ---------- */
.dates {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dates::-webkit-scrollbar {
  display: none;
}
.date {
  flex: none;
  width: 50px;
  height: 60px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--muted);
}
.date:hover {
  background: var(--hover);
}
.date b {
  font-family: var(--font-num);
  font-size: calc(18px * var(--fs, 1));
  color: var(--fg-strong);
  font-weight: 600;
}
.date small {
  font-size: calc(11.5px * var(--fs, 1));
  font-weight: 500;
}
.date[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.date[aria-pressed="true"] b {
  color: var(--accent-text);
}
.date .has {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}
.filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@container app (min-width: 880px) {
  .filters {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.group-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--hairline);
}
.group-label .eyebrow {
  font-size: calc(14.5px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.class-list {
  display: flex;
  flex-direction: column;
}
.class-row {
  display: grid;
  grid-template-columns: 58px 3px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 6px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.class-row:hover {
  background: var(--hover);
}
.class-row.is-selected {
  background: var(--accent-soft);
}
.class-time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-strong);
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.25;
}
.class-time small {
  display: block;
  color: var(--eyebrow);
  font-weight: 400;
  font-size: calc(12px * var(--fs, 1));
  font-family: var(--font-sans);
}
.class-edge {
  align-self: stretch;
  border-radius: 2px;
  margin-block: 2px;
}
.class-name {
  font-weight: 500;
  color: var(--fg-strong);
  font-size: calc(15px * var(--fs, 1));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.class-sub {
  color: var(--muted);
  font-size: calc(13px * var(--fs, 1));
}
.class-cap {
  font-size: calc(12.5px * var(--fs, 1));
  margin-top: 3px;
  color: var(--eyebrow);
  display: flex;
  align-items: center;
  gap: 5px;
}
.class-cap .i {
  width: 14px;
  height: 14px;
}
.class-cap.low {
  color: var(--warning);
}
.class-cap.booked {
  color: var(--success);
}
.class-act {
  display: flex;
  justify-content: flex-end;
}
.class-where {
  display: none;
  color: var(--muted);
  font-size: calc(13px * var(--fs, 1));
}
.class-where b {
  display: block;
  color: var(--fg);
  font-weight: 400;
}
@container app (min-width: 880px) {
  .class-row {
    grid-template-columns: 72px 3px minmax(0, 1.4fr) minmax(0, 1fr) auto;
    padding: 12px 10px;
  }
  .class-where {
    display: block;
  }
  .class-sub .where-inline {
    display: none;
  }
}
.empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty .i {
  width: 28px;
  height: 28px;
  color: var(--eyebrow);
}
@keyframes slide-in {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
}
@container app (min-width: 880px) {
  .app.has-panel .main {
    padding-right: min(420px, 40%);
  }
}
.panel-inner,
.sheet-inner {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel-inner {
  padding: 18px 22px 24px;
}
.panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.sheet {
  width: 100%;
  max-height: 90%;
  overflow-y: auto;
  background: var(--sidebar);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--input);
  margin: 8px auto 0;
}
@keyframes rise {
  from {
    transform: translateY(32px);
    opacity: 0.4;
  }
}
@container app (min-width: 880px) {
  .layer {
    align-items: center;
  }
  .sheet {
    width: min(480px, calc(100% - 48px));
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .sheet::before {
    display: none;
  }
  .sheet-inner {
    padding: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .panel,
  .layer {
    animation: none;
  }
}
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@container app (min-width: 880px) {
  .sheet-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
}
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.fact {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  border-bottom: 1px solid var(--hairline);
}
.fact .eyebrow {
  font-size: calc(12.5px * var(--fs, 1));
}
.fact b {
  color: var(--fg-strong);
  font-weight: 500;
}
.meter {
  height: 4px;
  border-radius: 4px;
  background: var(--raised);
  overflow: hidden;
  margin-top: 6px;
  max-width: 140px;
}
.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fg);
}
.intensity {
  display: inline-flex;
  gap: 3px;
  margin-top: 6px;
}
.intensity i {
  width: 14px;
  height: 4px;
  border-radius: 3px;
  background: var(--raised);
}
.intensity i.on {
  background: var(--fg-strong);
}
.note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--muted);
  font-size: calc(13.5px * var(--fs, 1));
}
.note .i {
  color: var(--info);
  margin-top: 1px;
}
.note b {
  color: var(--fg);
  font-weight: 500;
}
.note-warning .i {
  color: var(--warning);
}
/* ---------- bookings ---------- */
.booking {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 6px;
}
.booking:hover {
  background: var(--hover);
}
@container app (min-width: 700px) {
  .booking {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 10px;
  }
}
.datebox {
  width: 48px;
  text-align: center;
  line-height: 1.15;
  padding-top: 2px;
}
.datebox small {
  display: block;
  font-size: calc(11.5px * var(--fs, 1));
  font-weight: 500;
  color: var(--muted);
}
.datebox b {
  font-family: var(--font-num);
  font-size: calc(22px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.booking-acts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  grid-column: 2;
}
@container app (min-width: 700px) {
  .booking-acts {
    grid-column: auto;
  }
}
.table-wrap {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--fs, 1));
}
.table th {
  text-align: left;
  font-size: calc(12.5px * var(--fs, 1));
  font-weight: 500;
  color: var(--eyebrow);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table td:last-child,
.table th:last-child {
  padding-right: 0;
  text-align: right;
}
/* ---------- pass ---------- */
.pass-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}
.pass {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--card)) 0%, var(--card) 60%);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pass-top {
  background: var(--primary);
  color: var(--primary-fg);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pass-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pass-label {
  display: block;
  color: var(--eyebrow);
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pass-name {
  font-family: var(--font-display);
  font-size: calc(28px * var(--fs, 1));
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-transform: var(--display-case);
  color: var(--fg-strong);
  line-height: 1.1;
}
.pass-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pass-fields b {
  font-weight: 600;
  font-size: calc(15px * var(--fs, 1));
  color: var(--fg-strong);
}
.pass-fields .pass-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pass-fields .pass-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.pass-fields .pass-status.is-paused::before {
  background: var(--warning);
}
.pass-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pass-no {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(18px * var(--fs, 1));
  letter-spacing: 0.14em;
  color: var(--fg-strong);
}
.pass-tap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.pass-tap svg {
  width: 24px;
  height: 24px;
}
.pass-paused {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--raised);
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--fg-strong);
}
.wallets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.wallet {
  background: #000;
  color: #fff;
  border-color: #333;
  font-size: calc(13.5px * var(--fs, 1));
}
.wallet:hover {
  background: #111;
}
/* ---------- membership ---------- */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.plan-price .big-num {
  font-size: calc(36px * var(--fs, 1));
}
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.checks .i {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  margin-top: 1px;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent-soft);
  stroke-width: 3;
}
.checks li.off {
  color: var(--eyebrow);
}
.checks li.off .i {
  color: var(--eyebrow);
  background: var(--raised);
}
.banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  background: color-mix(in srgb, var(--warning) 7%, var(--bg));
  flex-wrap: wrap;
}
.banner .i {
  color: var(--warning);
}
.banner > div {
  flex: 1;
  min-width: 200px;
}
.banner b {
  color: var(--fg-strong);
  font-weight: 500;
}
.settings {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.setting {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--hairline);
  width: 100%;
  text-align: left;
  min-height: 60px;
}
button.setting:hover {
  background: var(--hover);
}
button.setting[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.setting-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--muted);
}
.setting-text {
  flex: 1;
  min-width: 0;
}
.setting-text b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--fg-strong);
}
.setting-text small {
  display: block;
  color: var(--muted);
  font-size: calc(13px * var(--fs, 1));
}
.setting-val {
  color: var(--muted);
  font-size: calc(13.5px * var(--fs, 1));
  white-space: nowrap;
}
.setting > .i:last-child {
  color: var(--eyebrow);
}
.setting.danger b,
.setting.danger .setting-icon {
  color: var(--danger);
}
.section-label {
  margin: 4px 2px -14px;
  font-size: calc(14.5px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
/* plans: pricing cards, featured card lit with the brand colour */
.price-cards {
  display: grid;
  gap: 16px;
}
@container app (min-width: 880px) {
  .price-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
}
.price-card.featured {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--card)) 0%, var(--card) 60%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), 0 20px 60px -20px color-mix(in srgb, var(--primary) 25%, transparent);
}
.price-card .plan-name {
  font-size: calc(19px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.price-card.featured .plan-name {
  color: var(--accent-text);
}
.price-blurb {
  color: var(--muted);
  font-size: calc(14px * var(--fs, 1));
  min-height: 2.6em;
}
.price-tags {
  min-height: 26px;
  margin: 4px 0 8px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 18px;
}
.price-amount .big-num {
  font-size: calc(40px * var(--fs, 1));
}
.price-card .btn {
  border-radius: 999px;
  min-height: 44px;
}
.price-foot {
  margin: 8px 0 0;
  text-align: center;
  font-size: calc(13px * var(--fs, 1));
  color: var(--eyebrow);
}
.price-card .checks {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: calc(14px * var(--fs, 1));
}
.plans-table {
  display: none;
}
@container app (min-width: 880px) {
  .plans-table {
    display: block;
  }
}
.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--fs, 1));
}
.ptable th,
.ptable td {
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.ptable thead th {
  font-weight: 600;
  color: var(--fg-strong);
}
.ptable tbody th {
  color: var(--muted);
  font-weight: 400;
  width: 28%;
}
.ptable .is-current {
  background: color-mix(in srgb, var(--raised) 45%, transparent);
}
.ptable td .i {
  color: var(--accent-text);
  stroke-width: 2.4;
  width: 17px;
  height: 17px;
}
.ptable td .no {
  color: var(--eyebrow);
}
.plan-name {
  font-size: calc(17px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.plan-cost {
  margin: 2px 0 12px;
  color: var(--muted);
}
.plan-cost b {
  color: var(--fg-strong);
  font-size: calc(17px * var(--fs, 1));
  font-family: var(--font-num);
}
/* forms */
.options {
  display: grid;
  gap: 8px;
}
.options.cols {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  width: 100%;
}
.option:hover {
  background: var(--hover);
}
.option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: var(--accent-soft);
}
.option .radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--input);
  flex: none;
  display: grid;
  place-items: center;
}
.option[aria-pressed="true"] .radio {
  border-color: var(--primary);
}
.option[aria-pressed="true"] .radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.option b {
  font-weight: 500;
  color: var(--fg-strong);
  display: block;
}
.option small {
  color: var(--muted);
  font-size: calc(13px * var(--fs, 1));
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: calc(13.5px * var(--fs, 1));
  color: var(--muted);
  cursor: pointer;
}
.check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  flex: none;
}
.summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@container app (min-width: 880px) {
  .summary {
    position: sticky;
    top: 0;
  }
}
.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: calc(14px * var(--fs, 1));
}
.sum-row span:first-child {
  color: var(--muted);
}
.sum-row span:last-child {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
  text-align: right;
}
.sum-total {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-weight: 600;
}
.sum-total span:last-child {
  font-size: calc(19px * var(--fs, 1));
}
.brand-hero {
  height: 120px;
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-weight: 800;
  font-size: calc(26px * var(--fs, 1));
  letter-spacing: -0.02em;
  color: #0b0b12;
}
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--input);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(17px * var(--fs, 1));
  letter-spacing: 0.06em;
  color: var(--fg-strong);
}
/* ---------- home: snapshot structure ---------- */
.home-top {
  display: grid;
  gap: 16px;
}
@container app (min-width: 880px) {
  .home-top {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr);
    gap: 32px;
    align-items: center;
  }
}
.greet-hi {
  margin: 0;
  font-size: calc(17px * var(--fs, 1));
  color: var(--muted);
}
.greet-name {
  font-size: calc(34px * var(--fs, 1));
}
@container app (min-width: 880px) {
  .greet-name {
    font-size: calc(42px * var(--fs, 1));
  }
}
.next-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 10px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: calc(13.5px * var(--fs, 1));
  text-align: left;
  max-width: 100%;
}
.next-pill b {
  color: var(--fg-strong);
  font-weight: 500;
}
.next-pill > .i:first-child {
  color: var(--accent-text);
  width: 16px;
  height: 16px;
}
.next-pill > .i:last-child {
  width: 16px;
  height: 16px;
}
.next-pill:hover {
  background: var(--hover);
  color: var(--fg);
}
/* banner: placeholder imagery until real photography is supplied */
.hero {
  display: none;
  position: relative;
  overflow: hidden;
  height: 180px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background:
    radial-gradient(70% 120% at 18% 30%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    linear-gradient(115deg, #2b2d2d 0%, #1b1c1c 55%, #121313 100%);
}
@container app (min-width: 880px) {
  .hero {
    display: block;
  }
}
.hero-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(100deg, transparent 0 46px, rgba(255, 255, 255, 0.035) 46px 48px),
    linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, 0.55) 72%);
}
.hero-copy {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 260px;
}
.hero-kicker {
  margin: 0 0 8px;
  font-size: calc(12.5px * var(--fs, 1));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.hero-line {
  margin: 0;
  font-size: calc(19px * var(--fs, 1));
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-strong);
}
.snap-grid {
  display: grid;
  gap: 12px;
}
@container app (min-width: 880px) {
  .snap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.snap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}
@container app (min-width: 880px) {
  .snap {
    padding: 22px;
  }
}
.snap-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.snap-head > div {
  flex: 1;
  min-width: 0;
}
.snap-head .h3 + p,
.snap-head .h3 + .link {
  margin: 1px 0 0;
}
.snap-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-text);
  margin-top: 1px;
}
.snap-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  color: var(--accent-text);
  font-weight: 500;
  font-size: calc(14px * var(--fs, 1));
  margin-top: auto;
}
.card-link .i {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.card-link:hover .i,
button:hover > .card-link .i {
  transform: translateX(2px);
}
.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live::before {
    animation: none;
  }
}
/* visits */
.visits-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.visits-top .big-num {
  font-size: calc(40px * var(--fs, 1));
}
.delta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  font-size: calc(15px * var(--fs, 1));
  flex-wrap: wrap;
}
.delta small {
  flex-basis: 100%;
  font-weight: 400;
  font-size: calc(12.5px * var(--fs, 1));
  color: var(--muted);
  text-align: right;
}
.delta .i {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.delta.up {
  color: var(--success);
}
.delta.down {
  color: var(--danger);
}
.vbars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
}
.vbar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.vbar-fill {
  display: block;
  width: 100%;
  max-width: 22px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 85%, var(--card));
}
.vbar-fill.is-empty {
  background: var(--raised);
}
.vbar-fill.is-today.is-empty {
  background: transparent;
  border: 1.5px dashed var(--input);
}
.vbar small {
  font-size: calc(11.5px * var(--fs, 1));
  color: var(--eyebrow);
  white-space: nowrap;
}
/* gym now */
.gauge-wrap {
  position: relative;
  display: grid;
  justify-items: center;
}
.gauge {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
.gauge-text {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gauge-text b {
  font-size: calc(22px * var(--fs, 1));
  font-weight: 700;
  color: var(--fg-strong);
}
.gym-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.gym-stats > div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.gym-stats .i {
  color: var(--muted);
  margin-top: 2px;
}
.gym-stats b {
  display: block;
  color: var(--fg-strong);
  font-weight: 600;
}
.gym-stats small {
  display: block;
  white-space: nowrap;
  color: var(--muted);
  font-size: calc(12px * var(--fs, 1));
}
/* membership */
.plan-line {
  font-size: calc(18px * var(--fs, 1));
  font-weight: 600;
  color: var(--fg-strong);
}
.perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.perk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--raised);
  font-size: calc(14px * var(--fs, 1));
}
.perk .i {
  color: var(--muted);
}
/* offers + featured */
.promo-grid {
  display: grid;
  gap: 12px;
}
@container app (min-width: 880px) {
  .promo-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
  }
}
.offers-panel,
.featured-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.offers-panel .snap-head .link {
  color: var(--accent-text);
}
.offer-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.offer-row::-webkit-scrollbar {
  display: none;
}
.offer-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--card));
}
.offer-card:hover {
  border-color: var(--input);
}
.ph-img {
  position: relative;
  height: 96px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(135deg, #2e3030, #1c1d1d);
}
@container app (min-width: 880px) {
  .ph-img {
    height: 120px;
  }
}
.ph-icon {
  width: 30px;
  height: 30px;
  color: var(--eyebrow);
  stroke-width: 1.3;
}
.ph-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: calc(11px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.offer-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
  flex: 1;
}
.offer-card-body b {
  color: var(--fg-strong);
  font-weight: 600;
}
.offer-card-body .card-link {
  margin-top: 10px;
}
@container app (max-width: 879px) {
  .offer-card-body .muted,
  .offer-card-body .card-link {
    display: none;
  }
  .offer-card-body b {
    font-size: calc(13.5px * var(--fs, 1));
    font-weight: 500;
  }
}
.feature-promo {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 190px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  background:
    radial-gradient(80% 90% at 85% 15%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    linear-gradient(160deg, #2a2c2c, #151616);
}
.ph-glow {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(70deg, transparent 0 38px, rgba(255, 255, 255, 0.03) 38px 40px);
}
.feature-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--fg);
  font-size: calc(14px * var(--fs, 1));
}
.feature-copy .display-sm {
  font-size: calc(22px * var(--fs, 1));
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.play {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-strong);
  font-weight: 500;
  font-size: calc(14px * var(--fs, 1));
}
.play .i {
  width: 34px;
  height: 34px;
  padding: 9px 8px 9px 10px;
  border-radius: 50%;
  background: var(--fg-strong);
  color: var(--bg);
  fill: currentColor;
}
@container app (max-width: 879px) {
  .gauge-wrap {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: end;
    justify-items: start;
    gap: 16px;
  }
  .gauge-text {
    position: static;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 4px;
  }
  .gauge-text b {
    font-size: calc(19px * var(--fs, 1));
  }
}
/* ---------- photography (Club Lime only) ---------- */
.hero-img,
.ph-photo,
.feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero.has-photo {
  background: #111;
}
.hero.has-photo .hero-lines {
  background: linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, 0.72) 72%);
}
.hero-copy {
  z-index: 1;
}
.ph-img {
  overflow: hidden;
}
.ph-tag {
  z-index: 1;
}
.offer-art.has-photo {
  background: #111;
}
.feature-promo.has-photo {
  background: #111;
}
.feature-promo.has-photo .ph-glow {
  background: linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.92) 85%);
}
.feature-img {
  object-position: center 8%;
}
.hero-img {
  object-position: center 30%;
}
@container app (min-width: 880px) {
  .feature-promo.has-photo {
    min-height: 260px;
  }
}
/* promotion slot: the partner's creative shown whole, never cropped or overlaid */
.ad-slot {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.ad-slot img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.ad-slot:hover img {
  transform: scale(1.015);
}
@media (prefers-reduced-motion: reduce) {
  .ad-slot img {
    transition: none;
  }
}
.ad-caption {
  margin: -6px 0 0;
  font-size: calc(12.5px * var(--fs, 1));
  color: var(--eyebrow);
}
.ad-caption b {
  color: var(--muted);
  font-weight: 500;
}
@container app (max-width: 879px) {
  .ad-slot {
    max-width: 420px;
  }
}
/* ---------- motion ----------
   Intro plays once when Home opens: bars grow, the gauge draws, cards settle in.
   Hover polish is desktop-only (fine pointer). Everything stops for reduced motion. */
@keyframes grow-up {
  from {
    transform: scaleY(0);
  }
}
@keyframes gauge-draw {
  from {
    stroke-dashoffset: var(--len);
  }
}
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.is-entering .snap,
.is-entering .offers-panel,
.is-entering .featured-panel {
  animation: settle 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.is-entering .snap:nth-child(2) {
  animation-delay: 60ms;
}
.is-entering .snap:nth-child(3) {
  animation-delay: 120ms;
}
.is-entering .promo-grid > :nth-child(1) {
  animation-delay: 180ms;
}
.is-entering .promo-grid > :nth-child(2) {
  animation-delay: 240ms;
}
.vbar-fill {
  position: relative;
  transform-origin: bottom;
}
.is-entering .vbar-fill {
  animation: grow-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(250ms + var(--i, 0) * 55ms);
}
.is-entering .gauge-val {
  animation: gauge-draw 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.3s both;
}
.load-chart rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: grow-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
/* bar tooltips: available on every pointer, shown on hover or keyboard focus */
.vbar {
  position: relative;
}
.vbar-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 2;
  transform: translate(-50%, 4px);
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--fg-strong);
  color: var(--bg);
  font-size: calc(11.5px * var(--fs, 1));
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.vbars .vbar-fill {
  transition: opacity 0.2s, filter 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .vbars:hover .vbar-fill {
    opacity: 0.4;
  }
  .vbars .vbar:hover .vbar-fill {
    opacity: 1;
    filter: brightness(1.12);
  }
  .vbar:hover .vbar-tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* cards lift a touch and pick up a hint of the brand colour */
  .snap,
  .offers-panel,
  .featured-panel,
  .price-card,
  .offer,
  .next {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s, box-shadow 0.25s;
  }
  .snap:hover,
  .price-card:not(.featured):hover,
  .offer:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.7);
  }
  .snap:hover .snap-icon {
    transform: scale(1.08);
  }
  .snap-icon {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* gauge brightens, stats tick up */
  .snap:hover .gauge-val {
    filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 30%, transparent));
  }
  .gym-stats > div {
    transition: transform 0.2s;
  }
  .gym-stats > div:hover {
    transform: translateY(-1px);
  }
  .gym-stats > div:hover .i {
    color: var(--accent-text);
  }

  /* membership perks slide on hover */
  .perk {
    transition: background 0.2s, transform 0.2s;
  }
  .perk:hover {
    background: color-mix(in srgb, var(--raised) 80%, #fff 5%);
    transform: translateX(2px);
  }

  /* offers: photo eases in, arrow nudges */
  .offer-card {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s;
  }
  .offer-card:hover {
    transform: translateY(-2px);
  }
  .ph-photo {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .offer-card:hover .ph-photo,
  .offer:hover .ph-photo {
    transform: scale(1.05);
  }
  .offer-card:hover .card-link .i,
  .card-link:hover .i,
  .link:hover .i {
    transform: translateX(3px);
  }
  .link .i {
    transition: transform 0.15s;
  }

  /* sidebar and rows: quick, quiet feedback */
  .nav-item,
  .class-row,
  .later-row,
  .setting,
  .booking,
  .chip,
  .date,
  .top-action {
    transition: background-color 0.15s, color 0.15s;
  }
  .nav-item .i {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .nav-item:hover .i {
    transform: translateX(1px) scale(1.06);
  }
  .btn-primary {
    transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
  }
  .btn-primary:hover {
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent);
  }
  .ad-slot {
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .ad-slot:hover {
    border-color: var(--input);
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.7);
  }
}
.btn-primary:active,
.btn:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}
/* ---------- home welcome banner ----------
   One wide card: greeting on the left over the dark card, photo on the right fading in. */
.welcome {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background:
    radial-gradient(60% 120% at 90% 20%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    var(--card);
  min-height: 200px;
  display: flex;
  align-items: flex-end;
}
@container app (min-width: 880px) {
  .welcome {
    min-height: 248px;
  }
}
.welcome.has-photo {
  background: #0d0e0e;
}
.welcome-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  object-position: center 84%;
  transform: scale(1.12);
  transform-origin: center 70%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
/* phone: photo becomes a strip across the top, text sits below on the plain card */
@container app (max-width: 879px) {
  .welcome {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .welcome.has-photo {
    background: var(--card);
  }
  .welcome-img {
    position: relative;
    width: 100%;
    height: 176px;
    transform: none;
    object-position: center 66%;
    /* eased fade: holds, then tails off slowly so the first line of text sits on it */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.28) 75%, rgba(0, 0, 0, 0.1) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.28) 75%, rgba(0, 0, 0, 0.1) 88%, transparent 100%);
  }
  .welcome-fade {
    display: none;
  }
  .welcome.has-photo .welcome-copy {
    margin-top: -58px;
  }
  .welcome-copy {
    padding: 16px 18px 18px;
    gap: 4px;
  }
  .welcome-title {
    font-size: calc(22px * var(--fs, 1));
  }
  .welcome-title span {
    font-size: 1.4em;
  }
  .welcome-sub {
    font-size: calc(14px * var(--fs, 1));
    color: var(--muted);
  }
  .welcome-chips {
    gap: 6px;
    margin-top: 10px;
  }
  .welcome-chip {
    height: 30px;
    padding: 0 10px;
    font-size: calc(12.5px * var(--fs, 1));
    gap: 6px;
    background: var(--raised);
    border-color: var(--border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.welcome-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 14, 14, 0.85) 0%, rgba(13, 14, 14, 0.35) 45%, transparent 70%);
  pointer-events: none;
}
.welcome:not(.has-photo) .welcome-fade {
  background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(255, 255, 255, 0.03) 46px 48px);
}
.welcome-copy {
  position: relative;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}
@container app (min-width: 880px) {
  .welcome-copy {
    padding: 30px 32px 28px;
  }
}
.welcome-date {
  margin: 0;
  font-size: calc(12px * var(--fs, 1));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.welcome-title {
  margin: 2px 0 0;
  font-stretch: var(--display-stretch);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  font-size: calc(30px * var(--fs, 1));
  line-height: 1.05;
  color: var(--muted);
}
.welcome-title span {
  color: var(--fg-strong);
  font-size: 1.45em;
}
@container app (min-width: 880px) {
  .welcome-title {
    font-size: calc(34px * var(--fs, 1));
  }
}
.welcome-sub {
  margin: 4px 0 0;
  color: var(--fg);
}
.welcome-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.welcome-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg-strong);
  font-size: calc(13.5px * var(--fs, 1));
  font-weight: 500;
}
.welcome-chip .i {
  width: 15px;
  height: 15px;
  color: var(--accent-text);
}
.live-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
  .welcome-chip {
    transition: background 0.2s, border-color 0.2s;
  }
  .welcome-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .welcome-img {
    transition: transform 6s ease-out;
  }
  .welcome:hover .welcome-img {
    transform: scale(1.15);
  }
}
.is-entering .welcome-copy > * {
  animation: settle 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.is-entering .welcome-copy > :nth-child(2) {
  animation-delay: 50ms;
}
.is-entering .welcome-copy > :nth-child(3) {
  animation-delay: 100ms;
}
.is-entering .welcome-copy > :nth-child(4) {
  animation-delay: 150ms;
}
/* change plan: pause first, cancel as a plain text link beside it */
.break-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}
.break-text {
  flex: 1;
  min-width: 240px;
}
.break-acts {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.quiet-link {
  color: var(--muted);
  font-size: calc(13.5px * var(--fs, 1));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--input);
  min-height: 36px;
}
.quiet-link:hover {
  color: var(--fg);
  text-decoration-color: currentColor;
}
/* banner pills stay on one line; a long class name truncates instead of spilling out */
.welcome-chip {
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
}
/* offer label sits in the card body, above the title, so the photo shows in full */
.offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: 1.3;
  max-width: 100%;
}
.offer-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
/* phone: wider offer cards (next one peeks in) so photos and labels show in full */
@container app (max-width: 879px) {
  .offer-row {
    grid-auto-columns: 72%;
    scroll-snap-type: x mandatory;
  }
  .offer-card {
    scroll-snap-align: start;
  }
  .ph-img {
    height: 120px;
  }
}
@container app (min-width: 880px) {
  /* visit bars stay a compact group instead of stretching across a wide card */
  .vbars {
    max-width: 320px;
  }
  /* the ad column is narrower and the creative capped, so offers get the room */
  .promo-grid {
    grid-template-columns: minmax(0, 2.6fr) minmax(260px, 1fr);
  }
  .ad-slot {
    max-width: 300px;
  }
}
/* small desktop / tablet landscape: two snapshot cards per row, the third spans the row */
@container app (min-width: 880px) and (max-width: 1199px) {
  .snap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .snap-grid > :nth-child(3) {
    grid-column: 1 / -1;
  }
}
/* desktop: offer cards fill the panel's height (it matches the Promotion panel), with the
   photo taking the extra room instead of leaving a gap under the cards */
@container app (min-width: 880px) {
  /* cards share two rows (photo, text) via subgrid, so every photo is the same height
     even when one card's label or title wraps onto an extra line */
  .offers-panel .offer-row {
    flex: 1;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .offers-panel .offer-card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .offers-panel .ph-img {
    flex: 1;
    height: auto;
    min-height: 120px;
  }
  .offers-panel .offer-card-body {
    flex: none;
  }
}
/* Change plan: cancel is a plain footer line; pause is only offered inside the cancel flow */
.leave-row {
  padding: 16px 2px 0;
  border-top: 1px solid var(--hairline);
}
/* =====================================================================================
   Club Lime 2026 (Brand Guidelines V1, as built on the brand-refresh website).
   Ink #000, Lime #82fa00, Avocado #17350d, tint #f3f5f3; pink / lemon / aqua as the only
   accents; lime is a fill, never small text on white (Avocado carries brand text on light).
   Display: HAL Gap L (140% width, 700, caps, tight leading), trial font embedded at build time
   from the website project; falls back to Archivo 900 at 125% (the website's stand-in).
   Text: ABC Monument Grotesk Regular / Bold, the two weights the website ships.
   ===================================================================================== */
:root[data-brand="clublime"] {
  --bg: #000000;
  --sidebar: #000000;
  --card: #0e110e;
  --raised: #171b17;
  --hover: #131713;
  --border: #232823;
  --hairline: #1a1e1a;
  --input: #333a33;
  --fg: #c9cecd;
  --fg-strong: #ffffff;
  --muted: #9ba19f;
  --eyebrow: #868c8a;
  --primary: #82fa00;
  --primary-fg: #000000;
  --accent-text: #82fa00;
  --accent-soft: rgba(130, 250, 0, 0.14);
  --success: #00ff80;
  --warning: #f6fa00;
  --danger: #ff6b5e;
  --info: #00f2fa;
  --cta-bg: #82fa00;
  --cta-fg: #000000;
  --radius: 12px;
  --radius-card: 24px;
  --radius-btn: 999px;
  --font-sans: "ABC Monument Grotesk", "DM Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* HAL Gap L (trial, embedded at build) as on the website; Archivo is the fallback */
  --font-display: "HAL Gap", "Archivo", "Arial Black", system-ui, sans-serif;
  --font-num: "ABC Monument Grotesk", "DM Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-case: uppercase;
  --display-track: -0.01em;
  --display-stretch: 140%;
  --shadow: 0 24px 48px -24px rgb(0 0 0 / 0.6);
  --glow: rgba(130, 250, 0, 0.16);
  --logo: #ffffff;
  --photo-filter: sepia(0.2) saturate(1.18) hue-rotate(-8deg) brightness(1.05) contrast(1.02);
  --zing: radial-gradient(ellipse 130% 120% at 50% 100%, #d1ff00 0%, #82fa00 50%, #00ff80 100%);
  --avocado: #17350d;
}
:root[data-brand="clublime"][data-mode="light"] {
  color-scheme: light;
  --bg: #f3f5f3;
  --sidebar: #ffffff;
  --card: #ffffff;
  --raised: #f3f5f3;
  --hover: #eef1ee;
  --border: #e8ebe7;
  --hairline: #edf0ec;
  --input: #d3d9d2;
  --fg: #3a3f42;
  --fg-strong: #000000;
  --muted: #6b6b6b;
  --eyebrow: #6b6b6b;
  --accent-text: #17350d;
  --accent-soft: rgba(130, 250, 0, 0.22);
  --success: #0b7a35;
  --warning: #866a00;
  --danger: #c4291c;
  --info: #00708a;
  --cta-bg: #000000;
  --cta-fg: #ffffff;
  --shadow: 0 14px 32px -20px rgb(0 0 0 / 0.22), 0 3px 10px -6px rgb(0 0 0 / 0.1);
  --glow: transparent;
  --logo: #000000;
}
/* type: wide uppercase display, Monument labels */
:root[data-brand="clublime"] .title,
:root[data-brand="clublime"] .display-sm,
:root[data-brand="clublime"] .welcome-title {
  line-height: 0.86;
}
:root[data-brand="clublime"] .big-num {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
}
:root[data-brand="clublime"] .eyebrow,
:root[data-brand="clublime"] .badge,
:root[data-brand="clublime"] .welcome-date,
:root[data-brand="clublime"] .offer-tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
:root[data-brand="clublime"] .badge {
  font-size: calc(10.5px * var(--fs, 1));
}
:root[data-brand="clublime"] .h3,
:root[data-brand="clublime"] .insight-title {
  font-weight: 700;
}
/* shell: the website's lime bar with a centred wordmark, in the sidebar and the phone header */
:root[data-brand="clublime"] .side-top {
  justify-content: center;
  padding: 10px 12px 26px;
}
:root[data-brand="clublime"] .side-top .wordmark.logo {
  color: var(--logo);
}
:root[data-brand="clublime"] .side-top .wordmark.logo svg {
  height: 20px;
}
:root[data-brand="clublime"] .side-top .icon-btn {
  display: none;
}
:root[data-brand="clublime"] .wordmark.logo svg {
  height: 17px;
}
:root[data-brand="clublime"] .m-header {
  position: relative;
  justify-content: flex-end;
  background: var(--primary);
  border-bottom: 0;
}
:root[data-brand="clublime"] .m-header .wordmark.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}
:root[data-brand="clublime"] .m-header .wordmark.logo svg {
  height: 16px;
}
:root[data-brand="clublime"] .m-header .avatar {
  background: #000;
  color: var(--primary);
}
/* side nav: no pill; the active item's icon sits in a small lime disc, label goes bold */
:root[data-brand="clublime"] .nav-item {
  height: 40px;
  padding: 0 10px 0 6px;
}
:root[data-brand="clublime"] .nav-item .i {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 6px;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}
:root[data-brand="clublime"] .nav-item[aria-current="page"] {
  background: transparent;
  color: var(--fg-strong);
  font-weight: 700;
}
:root[data-brand="clublime"] .nav-item[aria-current="page"] .i {
  background: var(--primary);
  color: var(--primary-fg);
}
:root[data-brand="clublime"] .nav-item[aria-current="page"] .nav-count {
  color: var(--fg-strong);
}
:root[data-brand="clublime"][data-mode="light"] .sidebar {
  border-right: 1px solid var(--border);
}
:root[data-brand="clublime"][data-mode="light"] .tabbar {
  background: #fff;
  border-top-color: var(--border);
}
:root[data-brand="clublime"][data-mode="light"] .tab[aria-current="page"] {
  color: #000;
}
/* cards: bigger radius; soft lift on light */
:root[data-brand="clublime"][data-mode="light"] .card,
:root[data-brand="clublime"][data-mode="light"] .offer-card {
  border-color: transparent;
  box-shadow: var(--shadow);
}
:root[data-brand="clublime"][data-mode="light"] .perk {
  background: var(--raised);
}
/* welcome banner: Avocado with the zing glow in dark; the light gradient (lime rising to white)
   in light. Photo sits right, graded warm, fading into the banner. */
:root[data-brand="clublime"] .welcome,
:root[data-brand="clublime"] .welcome.has-photo {
  border: 0;
  background: radial-gradient(ellipse 70% 120% at 18% 120%, rgb(130 250 0 / 0.38), transparent 60%), var(--avocado);
}
:root[data-brand="clublime"] .welcome-fade {
  background: linear-gradient(90deg, var(--avocado) 0%, rgb(23 53 13 / 0.55) 42%, transparent 72%);
}
:root[data-brand="clublime"] .welcome-title {
  color: #fff;
}
:root[data-brand="clublime"] .welcome-title span {
  color: var(--primary);
}
:root[data-brand="clublime"] .welcome-sub {
  color: #dfe9da;
}
:root[data-brand="clublime"] .welcome-date {
  color: var(--primary);
}
:root[data-brand="clublime"] .welcome-chip {
  background: rgb(0 0 0 / 0.35);
  border-color: rgb(255 255 255 / 0.14);
  color: #fff;
}
:root[data-brand="clublime"][data-mode="light"] .welcome,
:root[data-brand="clublime"][data-mode="light"] .welcome.has-photo {
  background: radial-gradient(ellipse 120% 115% at 30% 100%, #82fa00 30%, #ffffff 90%);
}
:root[data-brand="clublime"][data-mode="light"] .welcome-fade {
  background: linear-gradient(90deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.15) 40%, transparent 70%);
}
:root[data-brand="clublime"][data-mode="light"] .welcome-title,
:root[data-brand="clublime"][data-mode="light"] .welcome-title span {
  color: #000;
}
:root[data-brand="clublime"][data-mode="light"] .welcome-sub {
  color: #1d2a17;
}
:root[data-brand="clublime"][data-mode="light"] .welcome-date {
  color: var(--avocado);
}
:root[data-brand="clublime"][data-mode="light"] .welcome-chip {
  background: #fff;
  border-color: transparent;
  color: #000;
  box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-brand="clublime"][data-mode="light"] .welcome-chip .i {
  color: var(--avocado);
}
@container app (max-width: 879px) {
  :root[data-brand="clublime"] .welcome.has-photo,
  :root[data-brand="clublime"][data-mode="light"] .welcome.has-photo {
    background: var(--card);
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-title,
  :root[data-brand="clublime"] .welcome.has-photo .welcome-sub {
    color: var(--fg-strong);
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-title span {
    color: var(--accent-text);
  }
  :root[data-brand="clublime"][data-mode="light"] .welcome.has-photo .welcome-title span {
    color: #000;
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-date {
    color: var(--accent-text);
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-chip {
    background: var(--raised);
    border-color: var(--border);
    color: var(--fg-strong);
    box-shadow: none;
  }
}
/* photography carries the website's warm grade */
:root[data-brand="clublime"] .welcome-img,
:root[data-brand="clublime"] .ph-photo,
:root[data-brand="clublime"] .feature-img {
  filter: var(--photo-filter);
}
/* charts and gauges: lime fills on dark; on light the bars stay lime with an ink baseline */
:root[data-brand="clublime"][data-mode="light"] .vbar-fill {
  background: var(--primary);
  box-shadow: inset 0 -3px 0 #000;
}
:root[data-brand="clublime"][data-mode="light"] .vbar-fill.is-empty {
  background: var(--raised);
  box-shadow: none;
}
:root[data-brand="clublime"] .snap-icon {
  color: var(--accent-text);
}
:root[data-brand="clublime"][data-mode="light"] .card-link,
:root[data-brand="clublime"][data-mode="light"] .offers-panel .snap-head .link {
  color: #000;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
:root[data-brand="clublime"][data-mode="light"] .offer-tag::before,
:root[data-brand="clublime"][data-mode="light"] .avatar {
  background: var(--primary);
}
:root[data-brand="clublime"][data-mode="light"] .m-header .avatar {
  background: #000;
  color: var(--primary);
}
/* Club Lime type scale, closer to the brand-refresh website (body 16-17px, card headings 21-26px,
   big HAL Gap headlines). Everything scales ~15% through --fs; card titles, the greeting and key
   numbers step up further. Base px values below are multiplied by --fs like everything else. */
:root[data-brand="clublime"] .app {
  --fs: 1.15;
}
@container app (max-width: 879px) {
  :root[data-brand="clublime"] .app {
    --fs: 1.15;
  }
}
:root[data-brand="clublime"] .nav-item {
  height: 46px;
}
:root[data-brand="clublime"] .snap-head .h3,
:root[data-brand="clublime"] .offers-panel .h3,
:root[data-brand="clublime"] .featured-panel .h3,
:root[data-brand="clublime"] .section-head .h3,
:root[data-brand="clublime"] .insight-title {
  font-size: calc(18px * var(--fs, 1));
}
:root[data-brand="clublime"] .snap-icon {
  width: 24px;
  height: 24px;
}
:root[data-brand="clublime"] .offer-card-body b {
  font-size: calc(16px * var(--fs, 1));
}
:root[data-brand="clublime"] .plan-line {
  font-size: calc(20px * var(--fs, 1));
}
:root[data-brand="clublime"] .visits-top .big-num {
  font-size: calc(48px * var(--fs, 1));
}
:root[data-brand="clublime"] .gauge-text b {
  font-size: calc(24px * var(--fs, 1));
}
@container app (min-width: 880px) {
  :root[data-brand="clublime"] .title {
    font-size: calc(38px * var(--fs, 1));
  }
  :root[data-brand="clublime"] .welcome-title {
    font-size: calc(40px * var(--fs, 1));
  }
  :root[data-brand="clublime"] .welcome-title span {
    font-size: 1.4em;
  }
}
/* =====================================================================================
   Club Lime 2026 layout (agreed 26 Oct): Avocado sidebar with the lime wordmark, poster hero on
   the zing gradient with the group shot in a circle wedge, the three snapshot cards joined in one
   tinted band, offers on brand tints, flat cards (no drop shadows). Light and dark.
   ===================================================================================== */
:root[data-brand="clublime"] {
  --sidebar: var(--avocado);
  --side-fg: #ffffff;
  --side-muted: #b7c4b0;
  --band: #0e110e;
  --band-line: #232823;
  --band-tile: #171b17;
  --gauge-track: #232823;
  --avg-line: #3a423a;
  --disc-bg: var(--avocado);
  --disc-fg: #82fa00;
  --tint-1: #16290b;
  --tint-2: #092628;
  --tint-3: #2a1029;
  --tint-dot: #82fa00;
  --delta-up-bg: rgb(0 255 128 / 0.12);
  --delta-down-bg: rgb(255 107 94 / 0.14);
  --busy-quiet: #00ff80;
  --busy-moderate: #f6fa00;
  --busy-busy: #ff6b5e;
  --shadow: none;
}
:root[data-brand="clublime"][data-mode="light"] {
  --bg: #ffffff;
  --sidebar: var(--avocado);
  --band: #f3f5f3;
  --band-line: #dde2dc;
  --band-tile: #ffffff;
  --gauge-track: #dde2dc;
  --avg-line: #b9c1b8;
  --disc-bg: #000000;
  --disc-fg: #82fa00;
  --tint-1: #ecfdd9;
  --tint-2: #dcfbfc;
  --tint-3: #ffe8ff;
  --tint-dot: #000000;
  --delta-up-bg: #e3f9cc;
  --delta-down-bg: #ffe3df;
  --busy-quiet: #2ed100;
  --busy-moderate: #ffb000;
  --busy-busy: #ff4d3d;
  --shadow: none;
}
/* flat cards everywhere: a hairline instead of a drop shadow */
:root[data-brand="clublime"] .card,
:root[data-brand="clublime"] .offer-card,
:root[data-brand="clublime"][data-mode="light"] .card,
:root[data-brand="clublime"][data-mode="light"] .offer-card,
:root[data-brand="clublime"] .welcome-chip {
  box-shadow: none;
}
:root[data-brand="clublime"][data-mode="light"] .card,
:root[data-brand="clublime"][data-mode="light"] .offer-card {
  border-color: var(--border);
}
/* ---------- sidebar: Avocado, lime wordmark on the left, white labels, lime active item ---------- */
:root[data-brand="clublime"] .sidebar,
:root[data-brand="clublime"][data-mode="light"] .sidebar {
  background: var(--sidebar);
  border-right: 0;
  padding: 18px 16px 14px;
}
:root[data-brand="clublime"] .side-top {
  justify-content: flex-start;
  padding: 12px 10px 30px;
}
:root[data-brand="clublime"] .side-top .wordmark.logo {
  color: var(--primary);
}
:root[data-brand="clublime"] .side-top .wordmark.logo svg {
  height: 24px;
}
:root[data-brand="clublime"] .sidebar .nav-item {
  height: 52px;
  gap: 12px;
  font-size: calc(16px * var(--fs, 1));
  color: var(--side-fg);
}
:root[data-brand="clublime"] .sidebar .nav-item .i {
  width: 22px;
  height: 22px;
  padding: 7px;
  color: var(--side-fg);
}
:root[data-brand="clublime"] .sidebar .nav-count,
:root[data-brand="clublime"] .sidebar .nav-item[aria-current="page"] .nav-count,
:root[data-brand="clublime"] .side-member b {
  color: var(--side-fg);
}
:root[data-brand="clublime"] .side-label {
  margin-top: 22px;
  font-size: calc(12px * var(--fs, 1));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--side-muted);
}
:root[data-brand="clublime"] .side-member small {
  color: var(--side-muted);
}
:root[data-brand="clublime"] .sidebar .nav-item:hover,
:root[data-brand="clublime"] .side-member:hover {
  background: rgb(255 255 255 / 0.07);
}
:root[data-brand="clublime"] .sidebar .nav-item[aria-current="page"] {
  background: transparent;
  color: var(--primary);
  font-weight: 700;
}
:root[data-brand="clublime"] .sidebar .nav-item[aria-current="page"] .i {
  background: var(--primary);
  color: #000;
}
:root[data-brand="clublime"] .sidebar .avatar,
:root[data-brand="clublime"][data-mode="light"] .sidebar .avatar {
  background: var(--primary);
  color: #000;
}
:root[data-brand="clublime"] .sidebar .nav-item:focus-visible,
:root[data-brand="clublime"] .side-member:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
/* ---------- hero: zing poster, Avocado ink, group shot in a circle wedge (both modes) ---------- */
:root[data-brand="clublime"] .welcome,
:root[data-brand="clublime"] .welcome.has-photo,
:root[data-brand="clublime"][data-mode="light"] .welcome,
:root[data-brand="clublime"][data-mode="light"] .welcome.has-photo {
  background: linear-gradient(180deg, #d1ff00 0%, #82fa00 48%, #00ff80 100%);
  border: 0;
}
:root[data-brand="clublime"] .welcome-fade {
  display: none;
}
:root[data-brand="clublime"] .welcome-title,
:root[data-brand="clublime"] .welcome-title span,
:root[data-brand="clublime"][data-mode="light"] .welcome-title,
:root[data-brand="clublime"][data-mode="light"] .welcome-title span {
  color: var(--avocado);
}
:root[data-brand="clublime"] .welcome-date,
:root[data-brand="clublime"] .welcome-sub,
:root[data-brand="clublime"][data-mode="light"] .welcome-date,
:root[data-brand="clublime"][data-mode="light"] .welcome-sub {
  color: #000;
}
:root[data-brand="clublime"] .welcome-chip,
:root[data-brand="clublime"][data-mode="light"] .welcome-chip {
  background: #fff;
  border-color: transparent;
  color: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-brand="clublime"] .welcome-chip .i,
:root[data-brand="clublime"][data-mode="light"] .welcome-chip .i {
  color: var(--avocado);
}
:root[data-brand="clublime"] .welcome-shape {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}
:root[data-brand="clublime"] .welcome-shape .welcome-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 36%;
  transform: translate(-14%, -17%) scale(1.3);
  transform-origin: 30% 46%;
  -webkit-mask-image: none;
  mask-image: none;
}
@container app (min-width: 880px) {
  :root[data-brand="clublime"] .welcome,
  :root[data-brand="clublime"] .welcome.has-photo {
    min-height: 340px;
    align-items: center;
  }
  :root[data-brand="clublime"] .welcome-shape {
    right: -150px;
    top: 50%;
    width: 585px;
    height: 585px;
    transform: translateY(-50%);
  }
  :root[data-brand="clublime"] .welcome-copy {
    max-width: 56%;
    padding: 36px 40px;
  }
  :root[data-brand="clublime"] .welcome-title {
    font-size: calc(46px * var(--fs, 1));
  }
}
/* phone: poster layout from the brand guidelines; copy on top, the photo in a dome rising from
   the bottom edge */
@container app (max-width: 879px) {
  :root[data-brand="clublime"] .welcome.has-photo,
  :root[data-brand="clublime"][data-mode="light"] .welcome.has-photo {
    background: linear-gradient(180deg, #d1ff00 0%, #82fa00 48%, #00ff80 100%);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  :root[data-brand="clublime"] .welcome-shape {
    position: relative;
    order: 2;
    align-self: center;
    width: calc(100% - 40px);
    height: auto;
    aspect-ratio: 2 / 1;
    border-radius: 999px 999px 0 0;
  }
  :root[data-brand="clublime"] .welcome-shape .welcome-img {
    object-position: 50% 50%;
    transform: none;
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-copy {
    margin-top: 0;
    padding: 24px 20px 22px;
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-title,
  :root[data-brand="clublime"] .welcome.has-photo .welcome-title span,
  :root[data-brand="clublime"][data-mode="light"] .welcome.has-photo .welcome-title span {
    color: var(--avocado);
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-sub,
  :root[data-brand="clublime"] .welcome.has-photo .welcome-date {
    color: #000;
  }
  :root[data-brand="clublime"] .welcome.has-photo .welcome-chip {
    background: #fff;
    border-color: transparent;
    color: #000;
  }
}
/* ---------- snapshot band: three cards joined on one tint, hairlines between ---------- */
:root[data-brand="clublime"] .snap-grid {
  background: var(--band);
  border-radius: var(--radius-card);
  gap: 0;
}
:root[data-brand="clublime"] .snap-grid .snap,
:root[data-brand="clublime"][data-mode="light"] .snap-grid .snap {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 20px;
}
:root[data-brand="clublime"] .snap-grid .snap + .snap {
  border-top: 1px solid var(--band-line);
}
@container app (min-width: 880px) {
  :root[data-brand="clublime"] .snap-grid .snap {
    padding: 28px;
  }
  :root[data-brand="clublime"] .snap-grid .snap + .snap {
    border-top: 0;
    border-left: 1px solid var(--band-line);
  }
}
:root[data-brand="clublime"] .sy-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
:root[data-brand="clublime"] .sy-head > div {
  flex: 1;
  min-width: 0;
}
:root[data-brand="clublime"] .sy-head .h3 {
  margin: 0;
  white-space: nowrap;
}
.sy-disc {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--disc-bg);
  color: var(--disc-fg);
}
.sy-disc .i {
  width: 20px;
  height: 20px;
}
.sy-sub {
  margin: 1px 0 0;
  font-size: calc(13.5px * var(--fs, 1));
  color: var(--muted);
}
button.sy-sub {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sx-num {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(56px * var(--fs, 1));
  line-height: 0.8;
  color: var(--fg-strong);
}
.sx-unit {
  font-size: calc(16px * var(--fs, 1));
  color: var(--muted);
}
.sx-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(13px * var(--fs, 1));
  background: var(--delta-up-bg);
  color: var(--success);
}
.sx-delta.down {
  background: var(--delta-down-bg);
  color: var(--danger);
}
.sx-delta .i {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}
.sx-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.sy-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.sy-figure .sx-delta {
  margin-left: auto;
  align-self: center;
}
.sy-figure small {
  flex-basis: 100%;
  text-align: right;
  font-size: calc(12px * var(--fs, 1));
  color: var(--muted);
}
.sy-chart {
  position: relative;
}
.sy-avg {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--avg-line);
  pointer-events: none;
}
.sy-chart .vbar {
  z-index: 1;
}
.sx-bars {
  min-height: 116px;
}
:root[data-brand="clublime"] .sx-bars .vbar-fill,
:root[data-brand="clublime"][data-mode="light"] .sx-bars .vbar-fill {
  max-width: 28px;
  border-radius: 999px;
  box-shadow: none;
  background: var(--primary);
}
:root[data-brand="clublime"] .sx-bars .vbar-fill.is-empty,
:root[data-brand="clublime"][data-mode="light"] .sx-bars .vbar-fill.is-empty {
  background: var(--band-line);
}
:root[data-brand="clublime"] .sx-bars .vbar-fill.is-today.is-empty {
  background: transparent;
  border: 2px dashed var(--avg-line);
}
.sx-bars .vbar small {
  font-size: calc(12px * var(--fs, 1));
}
.sy .vbar em {
  font-style: normal;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 700;
  color: var(--fg-strong);
}
.sy-gauge {
  position: relative;
  display: grid;
  justify-items: center;
}
.sy-gauge .gauge {
  width: 100%;
  max-width: 250px;
  height: auto;
}
.sy-gauge-text {
  position: absolute;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sy-gauge-text b {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(30px * var(--fs, 1));
  white-space: nowrap;
  line-height: 0.9;
  color: var(--fg-strong);
}
.sy-gauge-text small {
  font-size: calc(12px * var(--fs, 1));
  color: var(--muted);
}
.sy-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: -6px 0 0;
  font-size: calc(14px * var(--fs, 1));
  color: var(--muted);
}
.sy-status b {
  color: var(--fg-strong);
}
.sy-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sy-tiles > div,
.sy-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--band-tile);
}
.sy-tiles b {
  font-size: calc(20px * var(--fs, 1));
  font-weight: 700;
  color: var(--fg-strong);
}
.sy-tiles small,
.sy-plan small {
  font-size: calc(12px * var(--fs, 1));
  color: var(--muted);
}
.sy-plan b {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  font-size: calc(24px * var(--fs, 1));
  color: var(--fg-strong);
}
.sx-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sx-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-size: calc(14px * var(--fs, 1));
  color: var(--fg-strong);
}
.sx-checks li + li {
  border-top: 1px solid var(--band-line);
}
.sx-checks .i {
  flex: none;
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  padding: 4px;
  border-radius: 50%;
  stroke-width: 3;
  background: var(--primary);
  color: #000;
}
.sy .card-link {
  margin-top: auto;
}
/* ---------- offers on brand tints; promo and offers panels flat with a hairline ---------- */
:root[data-brand="clublime"] .offer-row .offer-card,
:root[data-brand="clublime"][data-mode="light"] .offer-row .offer-card {
  border: 0;
}
:root[data-brand="clublime"] .offer-row .offer-card:nth-child(1) {
  background: var(--tint-1);
}
:root[data-brand="clublime"] .offer-row .offer-card:nth-child(2) {
  background: var(--tint-2);
}
:root[data-brand="clublime"] .offer-row .offer-card:nth-child(3) {
  background: var(--tint-3);
}
:root[data-brand="clublime"] .offer-row .offer-tag::before,
:root[data-brand="clublime"][data-mode="light"] .offer-row .offer-tag::before {
  background: var(--tint-dot);
}
/* benefits page: offers cycle through the same brand tints as the homepage */
:root[data-brand="clublime"] .offers .offer,
:root[data-brand="clublime"][data-mode="light"] .offers .offer {
  border: 0;
}
:root[data-brand="clublime"] .offers .offer:nth-child(3n + 1) {
  background: var(--tint-1);
}
:root[data-brand="clublime"] .offers .offer:nth-child(3n + 2) {
  background: var(--tint-2);
}
:root[data-brand="clublime"] .offers .offer:nth-child(3n) {
  background: var(--tint-3);
}
:root[data-brand="clublime"][data-mode="light"] .offers .offer .btn {
  background: #fff;
  border-color: transparent;
}
/* pass: flat, a hairline instead of the lift */
:root[data-brand="clublime"] .pass {
  box-shadow: none;
}
:root[data-brand="clublime"][data-mode="light"] .pass {
  box-shadow: 0 0 0 1px var(--border);
}
/* phone shell: Avocado header and tab bar to match the desktop sidebar, lime wordmark */
:root[data-brand="clublime"] .m-header,
:root[data-brand="clublime"][data-mode="light"] .m-header {
  background: var(--avocado);
}
:root[data-brand="clublime"] .m-header .wordmark.logo {
  color: var(--primary);
}
:root[data-brand="clublime"] .m-header .avatar,
:root[data-brand="clublime"][data-mode="light"] .m-header .avatar {
  background: var(--primary);
  color: #000;
}
/* change plan: the wide HAL Gap prices wrap "/ fortnight" under the amount on narrow cards */
:root[data-brand="clublime"] .price-amount {
  flex-wrap: wrap;
  row-gap: 2px;
}
/* hover: no lifts or shadows on the flat Club Lime cards; the band stays one piece and the
   icon disc and bars carry the response instead */
@media (hover: hover) and (pointer: fine) {
  :root[data-brand="clublime"] .snap-grid .snap:hover,
  :root[data-brand="clublime"] .price-card:not(.featured):hover,
  :root[data-brand="clublime"] .offer:hover,
  :root[data-brand="clublime"] .ad-slot:hover {
    transform: none;
    box-shadow: none;
  }
  :root[data-brand="clublime"] .snap-grid .snap:hover {
    background: color-mix(in srgb, var(--band-line) 35%, transparent);
  }
  :root[data-brand="clublime"] .sy-disc {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  :root[data-brand="clublime"] .snap:hover .sy-disc {
    transform: scale(1.06);
  }
  :root[data-brand="clublime"] .btn-primary:hover {
    box-shadow: none;
  }
}
:root[data-brand="clublime"] .snap-grid {
  overflow: hidden;
}
/* --sidebar is Avocado for Club Lime now; surfaces that borrowed it go back to card/raised */
:root[data-brand="clublime"] .panel,
:root[data-brand="clublime"] .sheet {
  background: var(--card);
}
:root[data-brand="clublime"] .main .seg {
  background: var(--raised);
}
/* phone tab bar: a floating ink pill inset from the edges, the active tab in a lime pill */
:root[data-brand="clublime"] .tabbar,
:root[data-brand="clublime"][data-mode="light"] .tabbar {
  margin: 0 12px max(12px, env(safe-area-inset-bottom, 0px));
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: #000;
  align-items: center;
}
:root[data-brand="clublime"][data-mode="dark"] .tabbar {
  background: #171b17;
  box-shadow: inset 0 0 0 1px #2a302a;
}
:root[data-brand="clublime"] .tab,
:root[data-brand="clublime"][data-mode="light"] .tab {
  gap: 4px;
  min-height: 52px;
  border-radius: 999px;
  font-size: calc(11px * var(--fs, 1));
  color: #c9cecd;
  transition: background-color 0.2s, color 0.2s;
}
:root[data-brand="clublime"] .tab[aria-current="page"],
:root[data-brand="clublime"][data-mode="light"] .tab[aria-current="page"] {
  background: var(--primary);
  color: #000;
  font-weight: 700;
}
/* =====================================================================================
   Inner pages: bigger titles and row text (closer to the homepage scale), and the main content
   framed in the tint: 12px all round, corners concentric with the cards inside.
   ===================================================================================== */
:root[data-brand="clublime"] .subtitle {
  font-size: calc(16px * var(--fs, 1));
}
@container app (min-width: 880px) {
  :root[data-brand="clublime"] .title {
    font-size: calc(46px * var(--fs, 1));
    line-height: 0.95;
  }
}
:root[data-brand="clublime"] .section-label {
  margin: 10px 2px -10px;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-brand="clublime"] .setting {
  min-height: 72px;
  padding: 14px 6px;
}
:root[data-brand="clublime"] .setting-text b {
  font-size: calc(16px * var(--fs, 1));
  font-weight: 600;
}
:root[data-brand="clublime"] .setting-text small {
  font-size: calc(14px * var(--fs, 1));
}
:root[data-brand="clublime"] .setting-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
:root[data-brand="clublime"] .booking {
  padding: 18px 6px;
  align-items: center;
}
:root[data-brand="clublime"] .booking .row b {
  font-size: calc(18px * var(--fs, 1)) !important;
  font-weight: 700 !important;
}
:root[data-brand="clublime"] .booking .small {
  font-size: calc(14px * var(--fs, 1));
}
:root[data-brand="clublime"] .datebox {
  width: 56px;
}
:root[data-brand="clublime"] .datebox b {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(30px * var(--fs, 1));
  line-height: 1;
}
:root[data-brand="clublime"] .booking {
  grid-template-columns: 56px minmax(0, 1fr);
}
@container app (min-width: 700px) {
  :root[data-brand="clublime"] .booking {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
}
:root[data-brand="clublime"] {
  --frame: #141814;
  --frame-pad: 12px;
}
:root[data-brand="clublime"][data-mode="light"] {
  --frame: #f3f5f3;
}
/* Membership and Account: the left column is the frame; cards and link lists sit in it, white */
:root[data-brand="clublime"] #s-membership .grid-2 > .stack:first-child,
:root[data-brand="clublime"] #s-account .grid-2 > .stack:first-child {
  padding: var(--frame-pad);
  border-radius: calc(var(--radius-card) + var(--frame-pad));
  background: var(--frame);
  gap: var(--frame-pad);
}
:root[data-brand="clublime"] #s-membership .grid-2 > .stack:first-child > .card,
:root[data-brand="clublime"] #s-account .grid-2 > .stack:first-child > .card,
:root[data-brand="clublime"][data-mode="light"] #s-membership .grid-2 > .stack:first-child > .card,
:root[data-brand="clublime"][data-mode="light"] #s-account .grid-2 > .stack:first-child > .card {
  border-color: transparent;
}
:root[data-brand="clublime"] #s-account .grid-2 > .stack:first-child .section-label {
  margin: 8px 8px 0;
}
:root[data-brand="clublime"] #s-account .grid-2 > .stack:first-child .settings {
  border-top: 0;
  padding: 0 18px;
  border-radius: var(--radius-card);
  background: var(--card);
}
:root[data-brand="clublime"] #s-account .grid-2 > .stack:first-child .settings .setting:last-child {
  border-bottom: 0;
}
/* Bookings and Classes: the list is a white card with the frame drawn round it */
:root[data-brand="clublime"] #s-bookings .rows,
:root[data-brand="clublime"] #s-classes .class-list {
  margin: var(--frame-pad);
  padding: 2px 18px;
  border-top: 0 !important;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 0 0 var(--frame-pad) var(--frame);
}
:root[data-brand="clublime"] #s-bookings .rows > :last-child,
:root[data-brand="clublime"] #s-classes .class-list > :last-child {
  border-bottom: 0;
}

/* ---------- integration with the portal's document-scrolling shell ---------- */
.col { font-size: calc(14.5px * var(--fs, 1)); }
html.exp-new, html.exp-new body { min-height: 100%; }
html.exp-new body { background: var(--bg); color: var(--fg); }

/* ---------- additions for the portal build (not in the prototype) ---------- */
/* busyness bands, set as --band so the dot, gauge and status line share one colour */
.band-light { --band: var(--success); }
.band-average { --band: var(--info); }
.band-high { --band: var(--warning); }
.band-veryhigh { --band: var(--danger); }
.sx-dot, .welcome-chip .dot { background: var(--band, var(--muted)); }
.gauge-val { stroke: var(--band, var(--primary)); }
.sy-gauge .gauge-val { stroke: var(--band, var(--primary)); }
/* benefit cards are links here, not buttons */
a.offer-card, a.ad-slot, a.card-link { text-decoration: none; color: inherit; }
a.offer-card .offer-card-body b { color: var(--fg-strong); }

/* Home: change the club behind the gym gauge */
.sy-edit {
  margin-left: auto;
  flex: none;
}
.sy-head .live + .sy-edit,
.sy-head .badge + .sy-edit {
  margin-left: 6px;
}
.sy-picker {
  margin: -4px 0 12px;
}
.sy-picker[hidden] {
  display: none;
}
.sy-picker select {
  width: 100%;
}

/* Page banner: benefit imagery shown above the page header (ASX, Refer a friend) */
.page-banner {
  position: relative;
  aspect-ratio: 8 / 3;
  max-height: 240px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius, 12px);
  background: var(--raised);
}
.page-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .page-banner { aspect-ratio: 2 / 1; }
}

/* Membership history */
.title-sm {
  font-size: calc(22px * var(--fs, 1));
}
@container app (min-width: 880px) {
  .title-sm {
    font-size: calc(26px * var(--fs, 1));
  }
}
.mh-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.mh-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card, 14px);
}
.mh-tile b {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: calc(28px * var(--fs, 1));
  line-height: 1;
  color: var(--fg-strong);
}
.mh-tile-label {
  font-size: calc(13px * var(--fs, 1));
  color: var(--muted);
}
.mh-table td {
  vertical-align: top;
}
.mh-name {
  display: block;
  font-weight: 600;
  color: var(--fg-strong);
}
.mh-sub {
  display: block;
  font-size: calc(13px * var(--fs, 1));
  color: var(--muted);
}
.mh-kv {
  display: flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
}
.mh-kv small {
  min-width: 56px;
  font-size: calc(12px * var(--fs, 1));
  color: var(--muted);
}
.mh-table .num .mh-kv {
  justify-content: flex-end;
}
.mh-balance {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
  white-space: nowrap;
}
.mh-actions {
  white-space: nowrap;
  text-align: right;
}
.mh-actions .link {
  display: block;
  padding: 2px 0;
}
.mh-table .badge + .mh-sub {
  margin-top: 4px;
}
:root[data-brand] .title.title-sm {
  font-size: calc(24px * var(--fs, 1));
}
@container app (min-width: 880px) {
  :root[data-brand] .title.title-sm {
    font-size: calc(28px * var(--fs, 1));
  }
}
/* narrow screens: each row becomes a small card, labels come from data-label */
@media (max-width: 720px) {
  .mh-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .mh-table,
  .mh-table tbody,
  .mh-table tr,
  .mh-table td {
    display: block;
    width: 100%;
  }
  .mh-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .mh-table tr:last-child {
    border-bottom: 0;
  }
  .mh-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  .mh-table td[data-label]::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: calc(13px * var(--fs, 1));
    text-align: left;
  }
  .mh-table td:first-child {
    display: block;
    text-align: left;
    padding-bottom: 8px;
  }
  .mh-table td:first-child::before {
    content: none;
  }
  .mh-table .mh-kv {
    justify-content: flex-end;
  }
  .mh-actions {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
  }
  .mh-actions .link {
    display: inline;
  }
}

/* Classes timetable */
.classes-table {
  border-collapse: separate;
  border-spacing: 0;
}
.classes-table thead th {
  font-weight: 500;
  font-size: calc(13px * var(--fs, 1));
  color: var(--muted);
  text-align: left;
  padding: 6px 12px;
}
.classes-table tbody td {
  padding: 12px;
  vertical-align: middle;
  border-top: 1px solid var(--border);
}
.classes-table tr.group + tr.trans td {
  border-top: 0;
}
.classes-table tr.group th.cheader {
  padding: 18px 12px 8px;
  background: var(--card);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-size: calc(15px * var(--fs, 1));
  font-weight: var(--display-weight);
  color: var(--fg-strong);
}
.classes-table .t {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.classes-table .t strong {
  display: block;
  font-size: calc(17px * var(--fs, 1));
  color: var(--fg-strong);
}
.classes-table .t-end,
.classes-table .c-sub {
  display: block;
  font-size: calc(13px * var(--fs, 1));
  color: var(--muted);
}
.classes-table .c-name,
.classes-table .c-place {
  display: block;
  font-weight: 600;
  color: var(--fg-strong);
}
.classes-table .c-place {
  font-weight: 500;
}
.classes-table .td-action {
  width: 1%;
  text-align: right;
}
.classes-table .btn2 {
  min-width: 112px;
}
.classes-table tr.trans:hover td {
  background: var(--hover, transparent);
}
@media (max-width: 640px) {
  .classes-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .classes-table tr.trans {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
  .classes-table tr.group + tr.trans {
    border-top: 0;
  }
  .classes-table tr.trans td {
    display: block;
    padding: 0;
    border: 0;
  }
  .classes-table tr.trans td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .classes-table tr.trans td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .classes-table tr.trans .t {
    grid-row: 1 / span 2;
  }
  .classes-table tr.trans .td-action {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .classes-table .btn2 {
    min-width: 92px;
  }
  .classes-table,
  .classes-table tbody {
    display: block;
  }
  .classes-table tr.group {
    display: block;
  }
  .classes-table tr.group th {
    display: block;
  }
}

.classes-more {
  margin: 16px 0 0;
  text-align: center;
}

/* Home and Classes: every card follows the snapshot band (tinted surface, round icon beside the title) */
:root[data-brand="clublime"] .home-dash .card:not(.snap):not(.offers-panel) {
  background: var(--band);
  border-color: var(--band-line);
}
.card-head .card-disc,
.card-fold > details > summary .card-disc {
  flex: none;
}
.card-head .card-disc + h2,
.card-head .card-disc + div,
.card-fold > details > summary .card-disc + h2 {
  flex: 1;
  min-width: 0;
}
.card-head .card-disc {
  margin-right: 0;
}
:root[data-brand="clublime"] .home-dash .card:not(.snap) .card-head {
  margin-bottom: 16px;
}

/* Member benefits in the side column: cards stack, photo above the text */
.home-side .offers-panel .offer-row {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  overflow: visible;
}
.home-side .offers-panel .offer-card {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  grid-template-rows: none;
}
.home-side .offers-panel .ph-img {
  flex: none;
  height: 130px;
  min-height: 0;
}

/* ---------- Club Lime public pages (login, reset, pay-by-link): carry the brand colour behind the card ---------- */
:root[data-brand="clublime"] body.members-public {
  background-color: #000;
  background-image: radial-gradient(ellipse 120% 70% at 50% 110%, rgba(130, 250, 0, 0.38) 0%, rgba(130, 250, 0, 0.1) 45%, transparent 75%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
:root[data-brand="clublime"][data-mode="light"] body.members-public {
  background-color: #82fa00;
  background-image: var(--zing);
}
:root[data-brand="clublime"] .app-public {
  background: transparent;
}
:root[data-brand="clublime"] .app-public .card {
  box-shadow: 0 32px 64px -28px rgb(0 0 0 / 0.55);
}
:root[data-brand="clublime"][data-mode="light"] .app-public .card {
  border-color: transparent;
}
/* wordmark, toggles and footer sit directly on lime in light mode: black ink (AAA on #82fa00) */
:root[data-brand="clublime"][data-mode="light"] .public-head .wordmark.logo,
:root[data-brand="clublime"][data-mode="light"] .public-top,
:root[data-brand="clublime"][data-mode="light"] .public-top .icon-btn,
:root[data-brand="clublime"][data-mode="light"] .public-foot,
:root[data-brand="clublime"][data-mode="light"] .public-foot a {
  color: #000;
}
:root[data-brand="clublime"][data-mode="light"] .public-foot a {
  text-decoration: underline;
}

/* Account pages: cards take the Home look (tinted surface, round icon beside each title) */
:root[data-brand="clublime"] .acct .card:not(.card-accent):not(.offer-banner) {
  background: var(--band);
  border-color: var(--band-line);
}
:root[data-brand="clublime"] .acct .card .card-head {
  margin-bottom: 16px;
}
/* the Account hub: each link is a card with a round icon */
.acct .settings {
  border-top: 0;
  gap: 12px;
}
.acct .setting {
  min-height: 0;
  padding: 16px 18px;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
:root[data-brand="clublime"] .acct .setting {
  background: var(--band);
  border-color: var(--band-line);
}
.acct .setting-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--disc-bg, var(--raised));
  color: var(--disc-fg, var(--fg-strong));
}
.acct .setting-icon .i {
  width: 20px;
  height: 20px;
}
.acct .setting.danger .setting-icon {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}