@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..600,0..100;1,9..144,300..600,0..100&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");
/* ==========================================================================
   SBI design system — lifted from ref/sbi-frontend-v1.3.0.html, unchanged.
   Loaded by every LaraBolt page that uses an sbi.* block, and by the builder's
   preview frame, so what an editor previews is what a visitor gets.
   Do not hand-edit: re-extract from the prototype instead.
   ========================================================================== */
/* SBI front end v1.0.0 — design tokens
   Baize system: Fraunces (display) · Inter (UI/body) · JetBrains Mono (numbers, labels)
   Single committed look (brand site) — colours are set explicitly on every surface. */
:root, :host {
  color-scheme: only light;

  /* cloth — SBI jacket green (v1.3.0). Sampled from the SBI waistcoat: #2C4349.
     Scale keeps the jacket's hue (~185°) and deepens it for text contrast. */
  --jacket: #2c4349;
  --baize: #1a3a3d;
  --baize-2: #274c4f;
  --baize-3: #39676a;
  --deep: #0c1e20;
  --deep-2: #112729;
  --felt-line: rgba(244, 240, 230, .12);

  /* paper */
  --paper: #fbfaf6;
  --ivory: #f4f0e6;
  --cream: #ece6d6;
  --line: #e2dccd;
  --line-soft: #eee9dd;

  /* ink */
  --ink: #121412;
  --ink-2: #2c302c;
  --ink-soft: #545a54;
  --ink-mute: #7c827b;
  --on-dark: #f4f0e6;
  --on-dark-soft: rgba(244, 240, 230, .72);
  --on-dark-mute: rgba(244, 240, 230, .5);

  /* accents */
  --gold: #b8860b;
  --gold-2: #d6a93a;
  --gold-soft: #f3e6c4;
  --crimson: #b91c1c;
  --chalk: #1d4ed8;

  /* ball colours — used as category markers */
  --ball-red: #c81e1e;
  --ball-yellow: #e8b817;
  --ball-green: #1b8a4a;
  --ball-brown: #7a4a22;
  --ball-blue: #1d4ed8;
  --ball-pink: #e27aa0;
  --ball-black: #141414;

  /* states */
  --ok: #1b7a45;
  --warn: #b7791f;
  --err: #b42318;

  /* type */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* scale */
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15.5px;
  --t-md: 17px;
  --t-lg: clamp(19px, 1.4vw, 22px);
  --t-h4: clamp(20px, 1.6vw, 24px);
  --t-h3: clamp(24px, 2.2vw, 32px);
  --t-h2: clamp(32px, 3.8vw, 54px);
  --t-h1: clamp(40px, 6vw, 88px);

  /* space + shape */
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1320px;
  --section: clamp(56px, 7vw, 96px);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --pill: 999px;

  --shadow-1: 0 1px 2px rgba(18, 20, 18, .05), 0 4px 16px rgba(18, 20, 18, .05);
  --shadow-2: 0 2px 6px rgba(18, 20, 18, .06), 0 20px 50px rgba(18, 20, 18, .12);
  --shadow-3: 0 30px 80px rgba(12,30,32, .28);

  --ease: cubic-bezier(.22, .8, .24, 1);
  --header-h: 76px;
}

/* base — reset, typography, containers, buttons */
/* theme lock: the page keeps its own colours whatever the phone, browser or host viewer does in dark mode */
:root, :root[data-theme], :root[data-theme="dark"], :root[data-theme="light"] { color-scheme: only light !important; }
html, :root[data-theme] { background-color: #fbfaf6 !important; }
html body, :root[data-theme] body, :root[data-theme="dark"] body, :root[data-theme="light"] body { background: #fbfaf6 !important; color: #121412 !important; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
[data-goto] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold-soft); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--f-display); font-weight: 400; margin: 0;
  letter-spacing: -.02em; line-height: 1.04; text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h1 { font-size: var(--t-h1); letter-spacing: -.035em; }
h2 { font-size: var(--t-h2); letter-spacing: -.03em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.15; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; color: var(--baize-3); }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em { color: var(--gold-2); }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.on-dark .lead { color: var(--on-dark-soft); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow.plain::before { display: none; }
.on-dark .eyebrow { color: var(--gold-2); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.on-dark { background: var(--deep); color: var(--on-dark); }
.on-baize { background: var(--baize); color: var(--on-dark); }
.on-ivory { background: var(--ivory); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.sec-head .sec-title { display: grid; gap: 16px; max-width: 760px; }
.sec-head .sec-side { display: flex; gap: 10px; align-items: center; }

/* buttons */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: var(--pill);
  background: var(--bg); color: var(--fg); font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
  transition: transform .25s var(--ease), background .2s, box-shadow .25s, color .2s;
  white-space: nowrap; border: 1px solid transparent; position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12,30,32, .18); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn-baize { --bg: var(--baize); --fg: var(--on-dark); }
.btn-baize:hover { --bg: var(--baize-2); }
.btn-gold { --bg: var(--gold-2); --fg: var(--deep); }
.btn-gold:hover { --bg: #e2b64a; }
.btn-light { --bg: var(--paper); --fg: var(--ink); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); box-shadow: none; }
.on-dark .btn-ghost, .btn-ghost.inv { --fg: var(--on-dark); border-color: rgba(244, 240, 230, .28); }
.on-dark .btn-ghost:hover, .btn-ghost.inv:hover { border-color: var(--on-dark); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.on-dark .icon-btn { background: transparent; color: var(--on-dark); border-color: rgba(244, 240, 230, .25); }
.on-dark .icon-btn:hover { background: var(--on-dark); color: var(--deep); }

/* ball dot */
.ball { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.75) 0 12%, transparent 30%), var(--c, var(--ball-red));
  box-shadow: inset -1px -2px 3px rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* layout — utility bar, header, mega menus, drawers, footer, page hero */

/* utility bar */
.utility { background: var(--deep); color: var(--on-dark-soft); font-size: 12.5px; position: relative; z-index: 60; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; height: 44px; gap: 16px; }
.utility .u-left, .utility .u-right { display: flex; align-items: center; gap: 22px; }
.utility .u-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.utility .u-item svg { width: 13px; height: 13px; opacity: .8; }
.utility .u-item:hover { color: var(--on-dark); }
.utility .live-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); }
.utility .live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.utility .socials { display: flex; gap: 8px; }
.utility .socials span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(244,240,230,.2); cursor: pointer; transition: background .2s, color .2s; }
.utility .socials span:hover { background: var(--on-dark); color: var(--deep); }
.utility .socials svg { width: 16px; height: 16px; }
.u-search { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; background: rgba(244,240,230,.08); border: 1px solid rgba(244,240,230,.16); color: var(--on-dark-soft); font-size: 12.5px; min-width: 220px; cursor: pointer; }
.u-search:hover { background: rgba(244,240,230,.14); color: var(--on-dark); }
.u-search svg { width: 15px; height: 15px; }
.u-search kbd { margin-left: auto; font: 11px var(--f-mono); padding: 1px 7px; border-radius: 6px; border: 1px solid rgba(244,240,230,.2); }

/* header */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(251, 250, 246, .86);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.hdr.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px rgba(18, 20, 18, .05); }
.hdr > .wrap { display: flex; align-items: center; height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; }
.brand-mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand-txt { display: grid; line-height: 1; }
.brand-txt b { font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.brand-txt span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-mute); margin-top: 5px; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); border-radius: var(--pill); white-space: nowrap; transition: background .2s, color .2s; }
.nav-item:hover, .nav-item.open { background: var(--ivory); color: var(--ink); }
.nav-item svg { width: 12px; height: 12px; opacity: .6; transition: transform .25s var(--ease); }
.nav-item.open svg { transform: rotate(180deg); }
.nav-item.active { color: var(--baize); }
.nav-item.active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--baize); transform: translateX(-50%); }
.nav-item.sbi { color: var(--gold); font-weight: 600; }
.nav-item.sbi:hover, .nav-item.sbi.open { background: var(--gold-soft); color: #8a6408; }

.hdr-actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.hdr-actions .btn { height: 42px; padding: 0 18px; font-size: 13.5px; }
.hdr-actions .btn svg { width: 17px; height: 17px; }
.search-btn { display: none; }
.cart-btn { position: relative; }
.cart-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--crimson); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-family: var(--f-mono); }
.cart-count:empty, .cart-count[data-n="0"] { display: none; }
.burger { display: none; }

/* dropdowns */
.dd { position: absolute; top: calc(100% + 10px); right: 0; background: var(--paper); border-radius: var(--r-lg); padding: 8px;
  min-width: 330px; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); z-index: 70; animation: ddIn .22s var(--ease); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); transition: background .15s; }
.dd-item:hover { background: var(--ivory); }
.dd-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ivory); color: var(--baize); flex-shrink: 0; }
.dd-item:hover .dd-ico { background: var(--baize); color: var(--on-dark); }
.dd-ico svg { width: 19px; height: 19px; }
.dd-t { font-weight: 600; font-size: 14px; }
.dd-d { font-size: 12.5px; color: var(--ink-mute); }
.dd-foot { border-top: 1px solid var(--line-soft); margin-top: 6px; padding: 12px 14px 6px; font-size: 12.5px; color: var(--ink-mute); display: flex; justify-content: space-between; }

/* mega */
.mega-wrap { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; }
.mega { background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 40px 80px rgba(18, 20, 18, .14); animation: ddIn .25s var(--ease); }
.mega-inner { display: grid; gap: 40px; padding-block: 32px 36px; }
.mega-col-title { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.mega-link { display: flex; gap: 14px; align-items: flex-start; padding: 12px 8px; margin-inline: -8px; border-radius: 12px; transition: background .15s; }
.mega-link:hover { background: var(--ivory); }
.mega-link .ml-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--ivory); color: var(--baize); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, color .2s; }
.mega-link:hover .ml-ico { background: var(--baize); color: var(--on-dark); }
.mega-link .ml-ico svg { width: 16px; height: 16px; }
.ml-t { font-family: var(--f-display); font-size: 16.5px; line-height: 1.2; }
.ml-d { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.mega-side { border-radius: var(--r-lg); padding: 26px; background: var(--deep); color: var(--on-dark); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.mega-side .ms-k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--gold-2); text-transform: uppercase; }
.mega-side h4 { font-size: 24px; }
.mega-side p { font-size: 13px; color: var(--on-dark-soft); }
.mega-side .ms-rows { display: grid; gap: 8px; font-size: 13px; }
.mega-side .ms-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--felt-line); padding-bottom: 8px; }
.mega-side .ms-row b { font-family: var(--f-mono); font-weight: 500; color: var(--on-dark); }
.mega-side .btn { margin-top: auto; }
.mega-coach { border-radius: var(--r-lg); overflow: hidden; background: var(--deep); color: var(--on-dark); display: flex; flex-direction: column; }
.mega-coach .mc-img { aspect-ratio: 1.6; overflow: hidden; position: relative; }
.mega-coach .mc-img svg { width: 100%; height: 100%; }
.mega-coach .mc-body { padding: 18px 20px 20px; display: grid; gap: 8px; }
.mega-coach .mc-tag { position: absolute; top: 12px; left: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; background: rgba(12,30,32,.8); padding: 5px 9px; border-radius: 6px; color: var(--gold-2); }
.mega-coach h4 { font-size: 22px; }
.mega-coach .mc-rates { font-family: var(--f-mono); font-size: 11.5px; color: var(--on-dark-soft); border-top: 1px solid var(--felt-line); padding-top: 10px; }
.mega-overlay { position: fixed; inset: 0; background: rgba(12,30,32, .22); z-index: 40; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* mobile drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(12,30,32, .45); backdrop-filter: blur(3px); z-index: 90; animation: fadeIn .25s; }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(460px, 100%); background: var(--paper); z-index: 91;
  display: flex; flex-direction: column; animation: slideIn .28s var(--ease); box-shadow: -30px 0 80px rgba(12,30,32,.2); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 24px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; background: var(--paper); }
.m-nav-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--f-display); font-size: 22px; width: 100%; text-align: left; }
.m-nav-item svg { width: 16px; height: 16px; transition: transform .25s; }
.m-nav-item.open svg { transform: rotate(180deg); }
.m-nav-item.sbi { color: var(--gold); }
.m-sub { display: grid; padding: 4px 0 14px; }
.m-sub span { padding: 10px 0 10px 16px; border-left: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; }
.m-sub span:hover { color: var(--baize); border-left-color: var(--baize); }

/* cart drawer */
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.cart-line .cl-img { width: 76px; height: 76px; border-radius: 12px; background: var(--ivory); overflow: hidden; }
.cart-line .cl-img svg { width: 100%; height: 100%; }
.cart-line .cl-t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.cart-line .cl-m { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); height: 34px; margin-top: 8px; }
.qty button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-soft); }
.qty button:hover { color: var(--ink); }
.qty span { min-width: 22px; text-align: center; font-family: var(--f-mono); font-size: 13px; }
.cart-line .cl-p { font-family: var(--f-mono); font-size: 14px; text-align: right; display: grid; gap: 8px; justify-items: end; }
.cart-line .cl-x { font-family: var(--f-body); font-size: 12px; color: var(--ink-mute); text-decoration: underline; }
.cart-totals { display: grid; gap: 8px; font-size: 14px; }
.cart-totals div { display: flex; justify-content: space-between; }
.cart-totals .grand { font-size: 18px; font-weight: 600; padding-top: 8px; border-top: 1px solid var(--line); }
.cart-totals .grand b { font-family: var(--f-mono); }
.free-ship { font-size: 12.5px; color: var(--ink-soft); display: grid; gap: 8px; padding: 14px 16px; background: var(--ivory); border-radius: var(--r); margin-bottom: 8px; }
.free-ship .bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.free-ship .bar i { display: block; height: 100%; background: var(--baize); border-radius: 2px; transition: width .4s var(--ease); }
.empty { text-align: center; padding: 60px 20px; display: grid; gap: 14px; justify-items: center; color: var(--ink-soft); }
.empty svg { width: 64px; height: 64px; opacity: .5; }

/* page hero (inner pages) */
.phero { position: relative; background: var(--deep); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.phero .ph-art { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.phero .ph-art svg, .phero .ph-art img { width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,30,32,.96) 0%, rgba(12,30,32,.82) 45%, rgba(12,30,32,.35) 100%); }
.phero .wrap { padding-block: clamp(36px, 5vw, 72px) clamp(32px, 4vw, 56px); display: grid; gap: 18px; }
.phero h1 { font-size: clamp(40px, 5.4vw, 76px); max-width: 16ch; }
.phero .lead { max-width: 56ch; }
.phero .ph-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.phero .ph-stat { display: grid; gap: 2px; }
.phero .ph-stat b { font-family: var(--f-display); font-weight: 400; font-size: 34px; line-height: 1; }
.phero .ph-stat span { font-size: 12.5px; color: var(--on-dark-mute); }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--on-dark-mute); font-family: var(--f-mono); letter-spacing: .04em; flex-wrap: wrap; }
.crumbs span[data-goto]:hover { color: var(--on-dark); }
.crumbs i { opacity: .5; font-style: normal; }
.crumbs.dark { color: var(--ink-mute); }
.crumbs.dark span[data-goto]:hover { color: var(--ink); }

/* sub navigation */
.subnav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(251,250,246,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; height: 58px; align-items: center; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav span { height: 36px; padding: 0 16px; border-radius: var(--pill); display: inline-flex; align-items: center; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; transition: background .2s, color .2s; }
.subnav span:hover { color: var(--ink); background: var(--ivory); }
.subnav span.on { background: var(--ink); color: var(--paper); }

/* footer */
.ftr { background: var(--deep); color: var(--on-dark-soft); position: relative; overflow: hidden; }
.ftr-cta { border-bottom: 1px solid var(--felt-line); }
.ftr-cta .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; padding-block: clamp(56px, 7vw, 96px); }
.ftr-cta h2 { color: var(--on-dark); font-size: clamp(34px, 4.6vw, 64px); }
.ftr-news { display: grid; gap: 12px; }
.ftr-news form { display: flex; gap: 8px; background: rgba(244,240,230,.06); border: 1px solid var(--felt-line); border-radius: var(--pill); padding: 6px; }
.ftr-news input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0 16px; color: var(--on-dark); outline: none; }
.ftr-news input::placeholder { color: var(--on-dark-mute); }
.ftr-news small { font-size: 12px; color: var(--on-dark-mute); }
.ftr-main .wrap { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-block: 64px; }
.ftr h5 { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 18px; font-weight: 500; }
.ftr-links { display: grid; gap: 10px; font-size: 14px; }
.ftr-links span:hover { color: var(--on-dark); }
.ftr-contact { display: grid; gap: 12px; font-size: 14px; margin-top: 22px; }
.ftr-contact div { display: flex; gap: 10px; align-items: flex-start; }
.ftr-contact svg { width: 15px; height: 15px; margin-top: 3px; color: var(--gold-2); flex-shrink: 0; }
.ftr-partners { border-top: 1px solid var(--felt-line); }
.ftr-partners .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 28px; flex-wrap: wrap; }
.ftr-partners .pl { display: flex; gap: clamp(20px, 3vw, 44px); align-items: center; flex-wrap: wrap; }
.ftr-bottom .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px 28px; font-size: 12.5px; color: var(--on-dark-mute); flex-wrap: wrap; border-top: 1px solid var(--felt-line); }
.ftr-bottom .fb-links { display: flex; gap: 22px; flex-wrap: wrap; }
.ftr-bottom .fb-links span:hover { color: var(--on-dark); }
.ftr-word { font-family: var(--f-display); font-size: clamp(64px, 16vw, 240px); line-height: .8; letter-spacing: -.05em; color: rgba(244,240,230,.04); white-space: nowrap; text-align: center; user-select: none; margin-bottom: -.12em; font-style: italic; font-weight: 300; }

/* accessibility widget */
.a11y-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 55; width: 50px; height: 50px; border-radius: 50%; background: var(--baize); color: var(--on-dark); display: grid; place-items: center; box-shadow: var(--shadow-2); }
.a11y-fab svg { width: 24px; height: 24px; }

/* responsive layout */
@media (max-width: 1360px) {
  .nav-item { padding: 0 10px; font-size: 13.5px; }
  .hdr-actions .btn-signin span { display: none; }
}
@media (max-width: 1220px) {
  .nav, .hdr-actions .hide-md { display: none; }
  .burger { display: inline-grid; }
  .search-btn { display: inline-grid; }
  .u-search { display: none; }
  .hdr-actions { margin-left: auto; }
  .ftr-main .wrap { grid-template-columns: 1fr 1fr 1fr; }
  .ftr-main .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .utility .u-left .u-hide { display: none; }
  .ftr-cta .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .utility .socials, .utility .u-left .u-item:not(.live-pill), .utility .u-right { display: none; }
  .utility .live-pill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 32px); display: block; }
  .brand-txt b { font-size: 15px; }
  .brand-mark { width: 36px; height: 36px; }
  .hdr-actions .btn-book { display: none; }
  .ftr-main .wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
  .a11y-fab { width: 44px; height: 44px; right: 14px; }
}
@media (max-width: 380px) { .brand-txt span { display: none; } }
.fb-proto { color: var(--gold-2) !important; }
.m-proto { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--ink-mute); cursor: pointer; }
.m-proto svg { width: 16px; height: 16px; }

/* components — chips, badges, cards, carousel, flip boxes, panels, accordion, tabs, forms, modal, toast, lightbox */

/* chips + filters */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { height: 38px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--paper); font-size: 13.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: all .2s; }
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .ct { font-family: var(--f-mono); font-size: 11px; opacity: .6; }
.on-dark .chip { background: transparent; border-color: var(--felt-line); color: var(--on-dark-soft); }
.on-dark .chip.on { background: var(--on-dark); color: var(--deep); }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; background: var(--ivory); color: var(--ink-2); white-space: nowrap; }
.badge.green { background: #e3f1e8; color: var(--ok); }
.badge.gold { background: var(--gold-soft); color: #7a5a06; }
.badge.red { background: #fbe4e2; color: var(--err); }
.badge.dark { background: var(--deep); color: var(--on-dark); }
.badge.glass { background: rgba(12,30,32,.62); color: var(--on-dark); backdrop-filter: blur(8px); }
.badge .ball { width: 8px; height: 8px; }

/* reveal: visible at rest, subtle rise when JS marks it */
.rv.in { animation: rvIn .9s var(--ease) backwards; }
@keyframes rvIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* media frame */
.media { position: relative; overflow: hidden; background: var(--cream); border-radius: var(--r-lg); }
.media img, .media > svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hover-zoom:hover .media img, .hover-zoom:hover .media > svg { transform: scale(1.05); }

/* news card */
.ncard { display: grid; gap: 16px; align-content: start; }
.ncard .media { aspect-ratio: 4 / 3; }
.ncard .nc-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-mute); }
.ncard h4 { font-size: 21px; line-height: 1.2; transition: color .2s; }
.ncard:hover h4 { color: var(--baize); }
.ncard p { font-size: 14px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.on-dark .ncard p, .on-dark .ncard .nc-meta { color: var(--on-dark-mute); }
.on-dark .ncard:hover h4 { color: var(--gold-2); }

/* carousel */
.car { position: relative; }
.car-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--car-w, calc((100% - 3 * 24px) / 4)); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 6px 28px; margin: -10px -6px -24px; scroll-padding-inline: 6px; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; min-width: 0; }
.car-3 .car-track { --car-w: calc((100% - 2 * 24px) / 3); }
.car-2 .car-track { --car-w: calc((100% - 24px) / 2); }
.car-nav { display: flex; gap: 8px; }
.car-progress { height: 2px; background: var(--line); margin-top: 32px; border-radius: 1px; overflow: hidden; }
.car-progress i { display: block; height: 100%; background: var(--ink); width: 25%; transition: transform .35s var(--ease), width .35s; }
.on-dark .car-progress { background: var(--felt-line); }
.on-dark .car-progress i { background: var(--gold-2); }
@media (max-width: 1100px) { .car-track { --car-w: calc((100% - 2 * 20px) / 3); gap: 20px; } .car-3 .car-track { --car-w: calc((100% - 20px) / 2); } }
@media (max-width: 760px) { .car-track, .car-3 .car-track, .car-2 .car-track { --car-w: 78%; gap: 16px; } }

/* flip boxes */
.flips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flip { perspective: 1400px; min-height: 300px; }
.flip-in { position: relative; height: 100%; min-height: 300px; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.flip:hover .flip-in, .flip:focus-within .flip-in, .flip.flipped .flip-in { transform: rotateY(180deg); }
.flip-f, .flip-b { position: absolute; inset: 0; border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.flip-f { background: var(--paper); border: 1px solid var(--line); }
.flip-f .fl-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--ivory); display: grid; place-items: center; color: var(--baize); }
.flip-f .fl-ico svg { width: 26px; height: 26px; }
.flip-f h4 { margin-top: auto; font-size: 28px; }
.flip-f p { font-size: 13.5px; color: var(--ink-mute); margin-top: 8px; }
.flip-f .fl-n { position: absolute; top: 24px; right: 26px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); }
.flip-b { background: var(--baize); color: var(--on-dark); transform: rotateY(180deg); gap: 14px; }
.flip-b .fb-k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--gold-2); text-transform: uppercase; }
.flip-b p { font-size: 14.5px; color: var(--on-dark-soft); }
.flip-b ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; }
.flip-b li { display: flex; gap: 8px; }
.flip-b li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); margin-top: 9px; flex-shrink: 0; }
.flip-b .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .flips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flips { grid-template-columns: 1fr; } .flip, .flip-in { min-height: 220px; } }
@media (hover: none) { .flip:hover .flip-in { transform: none; } .flip.flipped .flip-in { transform: rotateY(180deg); } }

/* expanding panels */
.panels { display: flex; gap: 12px; height: clamp(420px, 44vw, 560px); }
.panel { position: relative; flex: 1; border-radius: var(--r-lg); overflow: hidden; transition: flex .7s var(--ease); cursor: pointer; background: var(--deep); color: var(--on-dark); min-width: 0; }
.panel.on { flex: 4.2; }
.panel .pn-art { position: absolute; inset: 0; }
.panel .pn-art svg, .panel .pn-art img { width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,30,32,.1) 0%, rgba(12,30,32,.4) 45%, rgba(12,30,32,.94) 100%); }
.panel .pn-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px; display: grid; gap: 12px; }
.panel .pn-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--gold-2); }
.panel h4 { font-size: 26px; white-space: nowrap; }
.panel .pn-more { display: grid; gap: 14px; max-width: 440px; opacity: 0; transform: translateY(10px); transition: opacity .4s .2s, transform .5s .2s var(--ease); max-height: 0; overflow: hidden; }
.panel.on .pn-more { opacity: 1; transform: none; max-height: 260px; }
.panel .pn-more p { font-size: 14px; color: var(--on-dark-soft); }
.panel:not(.on) h4 { writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; bottom: 28px; left: 24px; }
.panel:not(.on) .pn-body { top: 0; }
.panel:not(.on) .pn-n { position: absolute; top: 24px; left: 26px; }
@media (max-width: 860px) {
  .panels { flex-direction: column; height: auto; }
  .panel { min-height: 96px; flex: none; }
  .panel.on { min-height: 400px; }
  .panel:not(.on) h4 { writing-mode: horizontal-tb; transform: none; position: static; }
  .panel:not(.on) .pn-n { position: static; }
}

/* counters */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.counter { padding: 28px 24px 0 0; display: grid; gap: 6px; border-right: 1px solid var(--line-soft); padding-left: 24px; }
.counter:first-child { padding-left: 0; }
.counter:last-child { border-right: 0; }
.counter b { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.counter span { font-size: 13.5px; color: var(--ink-mute); }
.on-dark .counters { border-top-color: var(--felt-line); }
.on-dark .counter { border-right-color: var(--felt-line); }
.on-dark .counter span { color: var(--on-dark-mute); }
@media (max-width: 760px) { .counters { grid-template-columns: 1fr 1fr; } .counter { padding: 22px 12px 18px 0; border-right: 0; } .counter:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--line-soft); } .counter:first-child { padding-left: 0; } }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc-i { border-bottom: 1px solid var(--line); }
.acc-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; text-align: left; font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; }
.acc-q .pm { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; transition: transform .35s var(--ease), background .2s; }
.acc-q .pm svg { width: 14px; height: 14px; }
.acc-i.open .acc-q .pm { transform: rotate(45deg); background: var(--ink); color: var(--paper); border-color: var(--ink); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc-i.open .acc-a { grid-template-rows: 1fr; }
.acc-a > div { overflow: hidden; }
.acc-a p { padding: 0 60px 26px 0; color: var(--ink-soft); max-width: 72ch; }

/* tabs */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--ivory); flex-wrap: wrap; }
.tab { height: 38px; padding: 0 18px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); transition: all .2s; white-space: nowrap; }
.tab.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
.on-dark .tabs { background: rgba(244,240,230,.07); }
.on-dark .tab { color: var(--on-dark-soft); }
.on-dark .tab.on { background: var(--on-dark); color: var(--deep); }

/* forms */
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.field label em, .field .lbl em { font-style: normal; color: var(--ink-mute); font-weight: 400; }
.inp { width: 100%; height: 52px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); padding: 0 16px; font-size: 15px; transition: border-color .2s, box-shadow .2s; outline: none; appearance: none; -webkit-appearance: none; }
textarea.inp { height: auto; min-height: 130px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23545a54' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.inp:hover { border-color: #cfc8b6; }
.inp:focus { border-color: var(--baize); box-shadow: 0 0 0 4px rgba(26,58,61,.1); }
.inp::placeholder { color: #a3a79f; }
.field.err .inp { border-color: var(--err); box-shadow: 0 0 0 4px rgba(180,35,24,.08); }
.field .msg { font-size: 12.5px; color: var(--err); display: none; }
.field.err .msg { display: block; }
.field .hint { font-size: 12.5px; color: var(--ink-mute); }
.inp-wrap { position: relative; }
.inp-wrap .inp-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; }
.inp-wrap .inp-ico svg { width: 17px; height: 17px; }
.inp-wrap.has-ico .inp { padding-left: 44px; }
.inp-wrap .inp-act { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.inp-wrap .inp-act:hover { background: var(--ivory); color: var(--ink); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); cursor: pointer; line-height: 1.45; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #c9c2b0; flex-shrink: 0; display: grid; place-items: center; transition: all .2s; background: var(--paper); margin-top: 0; }
.check .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: all .2s; }
.check input:checked + .box { background: var(--baize); border-color: var(--baize); }
.check input:checked + .box svg { opacity: 1; transform: none; }
.check input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }
.check a, .check .lnk { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.check.err .box { border-color: var(--err); }

.opt-cards { display: grid; gap: 12px; }
.opt { position: relative; border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; display: grid; gap: 6px; background: var(--paper); }
.opt:hover { border-color: #c9c2b0; }
.opt.on { border-color: var(--baize); background: #f3f8f4; box-shadow: 0 0 0 4px rgba(26,58,61,.08); }
.opt .o-t { font-weight: 600; font-size: 14.5px; }
.opt .o-d { font-size: 13px; color: var(--ink-mute); }
.opt .o-tick { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: all .2s; }
.opt.on .o-tick { background: var(--baize); border-color: var(--baize); color: #fff; }
.opt .o-tick svg { width: 12px; height: 12px; opacity: 0; }
.opt.on .o-tick svg { opacity: 1; }

.seg { display: inline-flex; border-radius: var(--pill); background: var(--ivory); padding: 4px; gap: 2px; }
.seg button { height: 36px; padding: 0 18px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.seg button.on { background: var(--ink); color: var(--paper); }
.seg .save { font-family: var(--f-mono); font-size: 10.5px; color: var(--ok); margin-left: 6px; }
.seg button.on .save { color: var(--gold-2); }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(12,30,32,.55); backdrop-filter: blur(4px); z-index: 95; display: grid; place-items: center; padding: 20px; animation: fadeIn .25s; }
.modal { background: var(--paper); border-radius: var(--r-xl); width: min(960px, 100%); max-height: calc(100vh - 40px); overflow: auto; position: relative; animation: popIn .35s var(--ease); box-shadow: var(--shadow-3); }
.modal.sm { width: min(520px, 100%); }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-x { position: absolute; top: 16px; right: 16px; z-index: 3; }

/* toast */
.toasts { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(460px, calc(100% - 32px)); }
.toast { background: var(--ink); color: var(--paper); padding: 14px 18px; border-radius: var(--r); font-size: 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-2); animation: toastIn .35s var(--ease); pointer-events: auto; }
.toast svg { width: 18px; height: 18px; color: var(--gold-2); flex-shrink: 0; }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 110; background: rgba(4, 18, 13, .96); display: grid; grid-template-rows: auto 1fr auto; animation: fadeIn .25s; color: var(--on-dark); }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px; font-family: var(--f-mono); font-size: 12px; }
.lb-stage { display: grid; place-items: center; padding: 0 70px; min-height: 0; position: relative; }
.lb-stage .media { width: min(1100px, 100%); aspect-ratio: 16/10; max-height: 100%; border-radius: var(--r); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-cap { text-align: center; padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--on-dark-soft); }
@media (max-width: 640px) { .lb-stage { padding: 0 12px; } .lb-prev, .lb-next { top: auto; bottom: -60px; } }

/* marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: clamp(40px, 6vw, 96px); width: max-content; animation: marq 40s linear infinite; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }

/* partner marks (typographic until SBI supplies SVGs) */
.pmark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink-soft); opacity: .78; transition: opacity .2s; font-size: 15px; }
.pmark:hover { opacity: 1; }
.pmark .pm-glyph { width: 30px; height: 30px; }
.pmark b { font-weight: 700; letter-spacing: .02em; }
.pmark small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; font-family: var(--f-mono); }
.on-dark .pmark { color: var(--on-dark-soft); }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tbl th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--ivory); white-space: nowrap; }
.tbl td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: #faf7ef; }
.tbl .r { text-align: right; }
.tbl .mono { font-size: 13.5px; }

/* person monogram */
.mono-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 18px; color: var(--on-dark); background: var(--baize); flex-shrink: 0; letter-spacing: -.02em; }
.mono-av.lg { width: 84px; height: 84px; font-size: 30px; }
.mono-av.gold { background: var(--gold); }
.mono-av.ink { background: var(--ink-2); }
.mono-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* skeleton-free empty note */
.note { padding: 16px 18px; border-radius: var(--r); background: var(--ivory); font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 12px; align-items: flex-start; }
.note svg { width: 18px; height: 18px; color: var(--baize); flex-shrink: 0; margin-top: 1px; }
.note.gold { background: var(--gold-soft); }
.note.gold svg { color: #8a6408; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 48px; }
.pager span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; border: 1px solid var(--line); }
.pager span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager span:hover:not(.on) { border-color: var(--ink); }
/* search overlay */
.srch-bg { position: fixed; inset: 0; z-index: 105; background: rgba(12,30,32,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; justify-items: center; align-items: start; padding: 10vh 16px 16px; animation: fadeIn .2s; }
.srch { width: min(680px, 100%); max-height: 76vh; background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow-3); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; animation: popIn .25s var(--ease); }
.srch-in { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.srch-in > svg { width: 20px; height: 20px; color: var(--ink-mute); }
.srch-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 18px; height: 40px; }
.srch-res { overflow-y: auto; padding: 8px; }
.srch-g { padding: 6px 0; }
.srch-h { display: block; padding: 8px 12px 6px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.srch-h i { font-style: normal; opacity: .7; }
.srch-r { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; text-align: left; }
.srch-r.on, .srch-r:hover { background: var(--ivory); }
.srch-r > span:nth-child(2) { display: grid; min-width: 0; }
.srch-r b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-r small { font-size: 12.5px; color: var(--ink-mute); }
.srch-r > svg { width: 16px; height: 16px; color: var(--ink-mute); }
.sr-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--ivory); color: var(--baize); display: grid; place-items: center; }
.srch-r.on .sr-ico { background: var(--baize); color: var(--on-dark); }
.sr-ico svg { width: 17px; height: 17px; }
.srch mark { background: var(--gold-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.srch-try { padding: 8px 12px 12px; font-size: 13px; color: var(--ink-mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.srch-try button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.srch-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-mute); }
.srch-foot kbd { font: 11px var(--f-mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--ivory); margin-right: 3px; }
@media (max-width: 640px) { .srch-bg { padding: 0; } .srch { max-height: 100vh; height: 100%; border-radius: 0; } .srch-foot { display: none; } }

/* ---------- quick-action image tiles (replace flip boxes) ---------- */
.qts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.qt { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; padding: 22px; border-radius: var(--r-lg); color: var(--on-dark); background: var(--deep); text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.qt-media { position: absolute; inset: 0; z-index: -2; }
.qt-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.9); }
.qt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,30,32,.25) 0%, rgba(12,30,32,.55) 45%, rgba(12,30,32,.94) 100%); transition: background .5s; }
.qt:hover, .qt:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(12,30,32,.28); }
.qt:hover .qt-media img, .qt:focus-visible .qt-media img { transform: scale(1.09); filter: saturate(1.05); }
.qt:hover::after, .qt:focus-visible::after { background: linear-gradient(180deg, rgba(12,30,32,.35) 0%, rgba(12,30,32,.75) 40%, rgba(12,30,32,.97) 100%); }
.qt:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.qt-top { display: flex; justify-content: space-between; align-items: flex-start; }
.qt-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(244,240,230,.14); backdrop-filter: blur(6px); border: 1px solid rgba(244,240,230,.2); transition: background .4s, color .4s, transform .4s var(--ease); }
.qt-ico svg { width: 22px; height: 22px; }
.qt:hover .qt-ico { background: var(--gold-2); color: var(--deep); transform: rotate(-6deg); }
.qt-n { font-size: 11px; color: rgba(244,240,230,.7); }
.qt-body { display: grid; gap: 6px; }
.qt-k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.qt h4 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; color: #fff; }
.qt-d { font-size: 13.5px; color: rgba(244,240,230,.78); }
.qt-more { display: grid; gap: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .4s, margin .4s; }
.qt:hover .qt-more, .qt:focus-visible .qt-more { max-height: 220px; opacity: 1; margin-top: 8px; }
.qt-list { display: grid; gap: 5px; font-size: 13px; color: rgba(244,240,230,.88); }
.qt-list span { display: flex; gap: 8px; }
.qt-list span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); margin-top: 7px; flex-shrink: 0; }
.qt-more .btn { justify-self: start; }
@media (max-width: 1000px) { .qts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) { .qt-more { max-height: none; opacity: 1; margin-top: 8px; } .qt-list { display: none; } }
@media (max-width: 760px) { .qts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .qts::-webkit-scrollbar { display: none; } .qt { flex: 0 0 78%; min-height: 300px; scroll-snap-align: start; } }
html.ax-anim .qt-media img { transform: none !important; }

/* ---------- subtle life for plain tiles ---------- */
.st3, .ref, .tier, .course:not(.dark), .dis-c, .cl-tables > div, .kpi { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.st3:hover, .ref:hover, .tier:hover, .dis-c:hover, .kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #d8cfb9; }
.st3, .ibox, .ref { position: relative; overflow: hidden; isolation: isolate; }
.st3::after, .ref::after { content: ""; position: absolute; right: -46px; bottom: -46px; width: 150px; height: 150px; border-radius: 50%; z-index: -1; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55) 0 8%, transparent 9%), radial-gradient(circle, rgba(26,58,61,.07) 0 60%, transparent 61%); transition: transform .8s var(--ease); }
.st3:hover::after, .ref:hover::after { transform: scale(1.18) translate(-8px, -8px); }
.ibox::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; z-index: -1; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.6) 0 8%, transparent 9%), radial-gradient(circle, rgba(214,169,58,.12) 0 60%, transparent 61%); transition: transform .8s var(--ease), opacity .4s; }
.ibox:hover::after { transform: scale(1.25); opacity: .6; }

/* ---------- ticker bar ---------- */
.tk { --tk-bg: var(--gold-2); --tk-fg: #1a1406; --tk-mute: rgba(26,20,6,.55); --tk-label-bg: var(--deep); --tk-label-fg: #f4f0e6; position: relative; display: flex; align-items: stretch; height: 48px; background: var(--tk-bg); color: var(--tk-fg); overflow: hidden; font-size: 14px; font-weight: 600; }
.tk-green { --tk-bg: var(--deep); --tk-fg: #f4f0e6; --tk-mute: rgba(244,240,230,.5); --tk-label-bg: var(--gold-2); --tk-label-fg: var(--deep); border-block: 1px solid var(--felt-line); }
.tk-light { --tk-bg: var(--ivory); --tk-fg: var(--ink); --tk-mute: var(--ink-mute); --tk-label-bg: var(--baize); --tk-label-fg: #fff; border-block: 1px solid var(--line); }
.tk-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); background: var(--tk-label-bg); color: var(--tk-label-fg); font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.tk-label::after { content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 14px; background: var(--tk-label-bg); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tk-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0412c; box-shadow: 0 0 0 0 rgba(224,65,44,.6); animation: pulse 2s infinite; }
.tk-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent); }
.tk-track { display: flex; width: max-content; animation: tkRun var(--tk-dur, 40s) linear infinite; }
.tk-run { display: flex; align-items: center; flex-shrink: 0; padding-left: 28px; }
@keyframes tkRun { to { transform: translateX(-50%); } }
.tk:hover .tk-track, .tk:focus-within .tk-track, .tk.paused .tk-track { animation-play-state: paused; }
.tk-i { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: inherit; text-decoration: none; padding: 6px 2px; border-radius: 6px; }
.tk-i.is-link .tk-t { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s; }
a.tk-i:hover .tk-t { text-decoration-color: currentColor; }
a.tk-i:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tk-ico svg { width: 15px; height: 15px; display: block; }
.tk-ext { font-size: 12px; opacity: .7; }
.tk-sep { width: 9px; height: 9px; margin: 0 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.7) 0 18%, transparent 20%), var(--tk-fg); opacity: .5; flex-shrink: 0; }
.tk-pause { position: relative; z-index: 2; width: 48px; display: grid; place-items: center; background: var(--tk-bg); color: var(--tk-fg); border-left: 1px solid color-mix(in srgb, var(--tk-fg) 15%, transparent); }
.tk-pause svg { width: 14px; height: 14px; }
.tk-pause:hover { background: color-mix(in srgb, var(--tk-fg) 8%, var(--tk-bg)); }
.tk-pause:focus-visible { outline: 2px solid var(--tk-fg); outline-offset: -4px; }
.tk-preview { border-radius: 10px; }
.tk-preview .tk-label { padding-left: 16px; }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } .tk-view { overflow-x: auto; } .tk-run[aria-hidden] { display: none; } }
html.ax-anim .tk-track { animation: none !important; }
html.ax-anim .tk-view { overflow-x: auto; }
html.ax-anim .tk-run[aria-hidden] { display: none; }
@media (max-width: 640px) { .tk { height: 42px; font-size: 13px; } .tk-label { padding-inline: 12px; font-size: 10px; } .tk-label .tk-lt { display: none; } .tk-pause { width: 42px; } }
#tkGlobal:empty { display: none; }

/* ---------- admin tabs + ticker editor ---------- */
.as-tabs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.as-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--felt-line); color: var(--on-dark-soft); font-size: 13.5px; font-weight: 600; }
.as-tabs button svg { width: 15px; height: 15px; }
.as-tabs button.on { background: var(--on-dark); color: var(--deep); border-color: var(--on-dark); }
.tke { display: grid; gap: 20px; }
.tke-prev { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.tke-prev-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tke-empty { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 10px; border: 1.5px dashed var(--line); color: var(--ink-mute); font-size: 13.5px; }
.tke-empty svg { width: 16px; height: 16px; }
.tke-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tke-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); transition: opacity .2s; }
.tke-row.off .tke-main { opacity: .5; }
.tke-row.err { background: #fbe9e5; border-radius: var(--r); padding-inline: 8px; }
.tke-ord { display: grid; justify-items: center; gap: 2px; }
.tke-ord .mono { font-size: 11px; color: var(--ink-mute); }
.tke-ord .icon-btn { width: 26px; height: 22px; border-radius: 6px; }
.tke-ord .icon-btn svg { width: 14px; height: 14px; }
.tke-ord [data-mv="-1"] svg { rotate: 180deg; }
.tke-ord .icon-btn:disabled { opacity: .3; }
.tke-main { display: grid; gap: 8px; min-width: 0; }
.tke-l1 { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.tke-l1 .inp { height: 40px; }
.tke-count { font-size: 11px; color: var(--ink-mute); }
.tke-l2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tke-l2 select { width: auto; min-width: 170px; }
.tke-url { flex: 1 1 220px; }
.tke-url.bad { border-color: #c0392b; background: #fdf3f1; }
.tke-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.tke-act { display: flex; gap: 8px; align-items: center; }
.tke-save { display: grid; gap: 8px; }
.btn.pulse { box-shadow: 0 0 0 0 rgba(26,58,61,.45); animation: btnPulse 1.8s infinite; }
@keyframes btnPulse { 70% { box-shadow: 0 0 0 10px rgba(26,58,61,0); } }
@media (max-width: 640px) { .tke-l1 { grid-template-columns: 1fr; } .tke-count { display: none; } .tke-row { grid-template-columns: 28px minmax(0, 1fr); } .tke-act { grid-column: 2; } }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qt.rv.in { animation-fill-mode: backwards; }
.tke > *, .tke-prev > *, #tkPrev { min-width: 0; } .tk { max-width: 100%; }

/* ---------- smooth, consistent card motion (hover: lift + grow + highlight) ---------- */
:root, :host { --ease-card: cubic-bezier(.22, 1, .36, 1); }
.tiers.tiers { align-items: stretch; }
.tier { display: flex; flex-direction: column; gap: 18px; will-change: transform; transition: transform .55s var(--ease-card), box-shadow .55s var(--ease-card), border-color .4s ease, background-color .4s ease; }
.tier > .btn, .tier > span.btn { margin-top: auto; }
.tier .ticks { flex: 1; }
.tier.feat { transform: none; box-shadow: var(--shadow-2); }
.tier:hover, .tier:focus-within { transform: translateY(-8px) scale(1.025); box-shadow: 0 26px 50px rgba(12,30,32,.16); border-color: var(--gold-2); z-index: 1; }
.tier.feat:hover { box-shadow: 0 30px 60px rgba(12,30,32,.35); }
.tier:hover .btn-ghost { background: var(--baize); color: #fff; border-color: var(--baize); }
.ref, .st3, .dis-c, .kpi, .course, .person, .club, .ncard, .pcard, .ev-row, .cl-n, .ibox, .coach-opt, .vn, .tp, .opt { transition: transform .55s var(--ease-card), box-shadow .55s var(--ease-card), border-color .4s ease, background-color .4s ease; }
.ref:hover, .st3:hover, .dis-c:hover, .person:hover, .club:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 44px rgba(12,30,32,.13); border-color: var(--gold-2); }
.ref:hover .mono-av, .person:hover .mono-av { transform: scale(1.06); }
.ref .mono-av, .person .mono-av { transition: transform .55s var(--ease-card), background-color .4s; }
.ref:hover .mono-av { background: var(--baize); }
.ref:hover .ref-stats > div { background: var(--gold-soft); }
.ref-stats > div { transition: background-color .4s ease; }
.coach-opt:hover, .vn:hover, .tp:not(.dis):hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12,30,32,.1); border-color: #c9c2b0; }
@media (prefers-reduced-motion: reduce) { .tier:hover, .ref:hover, .st3:hover, .person:hover, .club:hover, .qt:hover { transform: none !important; } }
html.ax-anim .tier:hover, html.ax-anim .ref:hover, html.ax-anim .qt:hover { transform: none !important; }

/* ---------- booking venues + coach meta ---------- */
.venues { display: grid; gap: 12px; }
.vn { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px; padding-right: 20px; border-radius: var(--r-xl); border: 1.5px solid var(--line); background: var(--paper); text-align: left; }
.vn.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 4px rgba(26,58,61,.08); }
.vn-img { width: 150px; height: 104px; border-radius: 14px; overflow: hidden; }
.vn-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-card); }
.vn:hover .vn-img img { transform: scale(1.07); }
.vn-b { display: grid; gap: 6px; min-width: 0; }
.vn-b > b { font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.1; }
.vn-t, .vn-m span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-mute); }
.vn-t svg, .vn-m svg { width: 14px; height: 14px; }
.vn-m { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vn .badge { justify-self: start; }
.vn .o-tick { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.vn .o-tick svg { width: 13px; height: 13px; opacity: 0; color: #fff; }
.vn.on .o-tick { background: var(--baize); border-color: var(--baize); } .vn.on .o-tick svg { opacity: 1; }
.co-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-mute); }
.co-meta span { display: inline-flex; align-items: center; gap: 5px; }
.co-meta svg { width: 13px; height: 13px; }
@media (max-width: 640px) { .vn { grid-template-columns: 1fr auto; } .vn-img { grid-column: 1 / -1; width: 100%; height: 130px; } }
.badge svg { width: 12px; height: 12px; }

/* ---------- parallax (driven by parallax.js) ---------- */
.px-in { overflow: hidden; }
.px-in img { scale: 1.14; will-change: translate; }
.hs-art, .hs-grid, .hs-photo { will-change: translate; }
.ldr-ghost { will-change: translate; }
.px-host { position: relative; isolation: isolate; }
.px-balls { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pxb { position: absolute; border-radius: 50%; will-change: translate; box-shadow: 0 30px 50px -10px rgba(0,0,0,.45); }
.pxb::after { content: ""; position: absolute; left: 22%; top: 16%; width: 26%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(2px); transform: rotate(-30deg); }
.pxb.red { background: radial-gradient(circle at 34% 28%, #ff7a70 0%, #c2140f 55%, #5c0503 100%); }
.pxb.yellow { background: radial-gradient(circle at 34% 28%, #ffe98a 0%, #e0a90c 55%, #7a5300 100%); }
.pxb.blue { background: radial-gradient(circle at 34% 28%, #86a9ff 0%, #1d4ed8 55%, #0b1f6b 100%); }
.pxb.pink { background: radial-gradient(circle at 34% 28%, #ffd0e0 0%, #e27aa0 55%, #8d3558 100%); }
.pxb.black { background: radial-gradient(circle at 34% 28%, #6a6a6a 0%, #181818 55%, #000 100%); }
.pxb.green { background: radial-gradient(circle at 34% 28%, #6fe09a 0%, #138043 55%, #063d1d 100%); }
@media (max-width: 760px) { .pxb { transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .px-in img { scale: 1; translate: none !important; } }
html.ax-anim .px-in img { scale: 1; translate: none !important; }

/* quick search: "see all results" row */
.srch-all { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; margin-bottom: 4px; border-radius: 12px; text-align: left; background: var(--deep); color: var(--on-dark); transition: background .2s; }
.srch-all:hover { background: var(--baize); }
.srch-all > svg { width: 38px; height: 38px; padding: 10px; border-radius: 10px; background: rgba(214,169,58,.18); color: var(--gold-2); }
.srch-all span { display: grid; min-width: 0; font-size: 14.5px; }
.srch-all b { font-weight: 600; }
.srch-all small { font-size: 12px; color: var(--on-dark-mute); }
.srch-all kbd { font: 11px var(--f-mono); padding: 3px 8px; border-radius: 6px; background: rgba(244,240,230,.12); color: var(--on-dark-soft); }

/* ---------- calendar PDF window ---------- */
.cp-bg { position: fixed; inset: 0; z-index: 120; background: rgba(6,20,14,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: fadeIn .25s; }
.cp-bg.out { opacity: 0; transition: opacity .2s; }
.cp { width: min(1240px, 100%); height: min(860px, calc(100dvh - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 40px 100px rgba(0,0,0,.45); animation: popIn .35s var(--ease); }
.cp-view { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #2a2f2c; min-width: 0; min-height: 0; }
.cp-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px; background: #1d211f; color: #e8e4d9; border-bottom: 1px solid rgba(255,255,255,.06); }
.cp-file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.cp-file svg { width: 16px; height: 16px; color: var(--gold-2); }
.cp-file b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pg { margin-left: auto; font-size: 12px; color: rgba(232,228,217,.65); white-space: nowrap; }
.cp-zoom { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); }
.cp-zoom button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #e8e4d9; }
.cp-zoom button:hover { background: rgba(255,255,255,.1); }
.cp-zoom svg { width: 14px; height: 14px; }
.cp-zoom span { font-size: 11.5px; min-width: 40px; text-align: center; color: rgba(232,228,217,.8); }
.cp-scroll { overflow: auto; overscroll-behavior: contain; padding: 28px 24px 40px; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.cp-pages { --z: 1; display: grid; justify-items: center; gap: 22px; }
.cp-page { position: relative; margin: 0; width: calc(560px * var(--z)); max-width: none; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.35); transition: width .3s var(--ease); animation: rise .5s var(--ease) both; }
.cp-page:nth-child(2) { animation-delay: .06s; } .cp-page:nth-child(3) { animation-delay: .12s; } .cp-page:nth-child(4) { animation-delay: .18s; }
.cp-page img { display: block; width: 100%; height: auto; aspect-ratio: 595 / 842; }
.cp-page figcaption { position: absolute; left: -34px; top: 0; font-size: 11px; color: rgba(232,228,217,.5); }
.cp-side { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-left: 1px solid var(--line); }
.cp-head { display: flex; justify-content: space-between; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.cp-head h2 { margin: 6px 0 8px; font-size: 30px; }
.cp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-meta span { font: 500 11px var(--f-mono); padding: 3px 8px; border-radius: 6px; background: var(--ivory); color: var(--ink-soft); }
.cp-sidebody { overflow-y: auto; overscroll-behavior: contain; }
.cp-panel { padding: 20px 22px 24px; display: grid; gap: 16px; align-content: start; animation: rise .35s var(--ease) both; }
.cp-acts { display: grid; gap: 10px; }
.cp-acts .btn-lg small { font: 500 11.5px var(--f-mono); opacity: .7; margin-left: 4px; }
.cp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cp-tiles button { display: grid; justify-items: start; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; transition: border-color .25s, transform .3s var(--ease-card), box-shadow .3s, background .25s, color .25s; }
.cp-tiles button:hover { transform: translateY(-2px); border-color: var(--baize); background: var(--deep); color: var(--on-dark); box-shadow: 0 16px 30px -20px rgba(12,30,32,.6); }
.cp-tiles svg { width: 20px; height: 20px; color: var(--baize-3); margin-bottom: 6px; transition: color .25s; }
.cp-tiles button:hover svg { color: var(--gold-2); }
.cp-tiles b { font-size: 14px; font-weight: 600; }
.cp-tiles span { font-size: 11.5px; color: var(--ink-mute); line-height: 1.3; transition: color .25s; }
.cp-tiles button:hover span { color: var(--on-dark-mute); }
.cp-ed { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cp-ed button { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; transition: border-color .25s, box-shadow .25s, background .25s; }
.cp-ed button:hover { border-color: var(--baize-3); }
.cp-ed button.on { border-color: var(--baize); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--baize); }
.cp-ed-th { flex: none; width: 34px; height: 48px; border-radius: 3px; background: #fff center top / cover no-repeat; box-shadow: 0 0 0 1px var(--line), 0 4px 10px -6px rgba(12,30,32,.5); }
.cp-ed span { display: grid; gap: 2px; min-width: 0; }
.cp-ed b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cp-ed button.on b::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--baize); }
.cp-ed small { font-size: 11.5px; color: var(--ink-mute); line-height: 1.3; }
.cp-lnk { padding: 0; border: 0; background: none; color: var(--baize); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cp-inside { padding: 16px; border-radius: 16px; background: var(--ivory); display: grid; gap: 10px; }
.cp-inside h4 { margin: 0; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.cp-inside ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.cp-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.cp-leg span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.cp-leg i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.6), transparent 45%), var(--c); }
.cp-src { margin: 0; font-size: 12px; color: var(--ink-mute); }
.cp-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--baize-3); }
.cp-back svg { width: 15px; height: 15px; }
.cp-panel h3 { font-size: 26px; margin: 0; }
.cp-p { margin: -6px 0 0; font-size: 14px; color: var(--ink-soft); }
.cp-link { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; }
.cp-link input { flex: 1; min-width: 0; border: 0; background: none; font: 13px var(--f-mono); color: var(--ink-2); outline: none; }
.cp-link svg { width: 15px; height: 15px; }
.cp-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.cp-sh { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color .2s, transform .25s var(--ease); }
.cp-sh:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.cp-sh svg { width: 22px; height: 22px; color: var(--baize-3); }
.cp-qr { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--deep); color: var(--on-dark); }
.cp-qr div { width: 104px; height: 104px; flex-shrink: 0; padding: 6px; background: #fff; border-radius: 10px; }
.cp-qr svg { width: 100%; height: 100%; display: block; }
.cp-qr span { font-size: 12.5px; color: var(--on-dark-soft); display: grid; gap: 3px; }
.cp-qr b { color: var(--on-dark); font-size: 14px; }
.cp-f { display: grid; gap: 6px; }
.cp-f > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cp-f > label small { font-weight: 400; color: var(--ink-mute); }
.cp-f > input, .cp-f textarea { width: 100%; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 11px 14px; font-size: 14.5px; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.cp-f > input:focus, .cp-f textarea:focus, .cp-rc input:focus { outline: 0; border-color: var(--baize-3); box-shadow: 0 0 0 4px rgba(57,103,106,.12); }
.cp-f > input.bad { border-color: var(--err); }
.cp-rcpts { display: grid; gap: 6px; }
.cp-rc { position: relative; display: flex; align-items: center; }
.cp-rn { position: absolute; left: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); font-size: 10.5px; color: var(--ink-mute); pointer-events: none; }
.cp-rc input { width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 0 44px 0 42px; font-size: 14.5px; transition: border-color .2s, box-shadow .2s; animation: rise .3s var(--ease) both; }
.cp-rc.bad input { border-color: var(--err); background: #fff8f7; }
.cp-rm { position: absolute; right: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mute); }
.cp-rm:hover { background: var(--ivory); color: var(--err); }
.cp-rm svg { width: 14px; height: 14px; }
.cp-err { font-size: 12.5px; color: var(--err); margin: -2px 0 2px 4px; }
.cp-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed #cfc7b5; font-size: 13.5px; font-weight: 600; color: var(--baize-3); transition: border-color .2s, background .2s; }
.cp-add:hover { border-color: var(--baize-3); background: #f1f7f3; }
.cp-add svg { width: 15px; height: 15px; }
.cp-hint { font-size: 12px; color: var(--ink-mute); }
.cp-chk { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.cp-chk input { width: 18px; height: 18px; accent-color: var(--baize-3); }
.cp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); border-top-color: currentColor; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.cp-panel .btn svg { width: 17px; height: 17px; }
.cp-done { justify-items: start; }
.cp-tick { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-2); color: var(--deep); animation: popIn .5s var(--ease); }
.cp-tick svg { width: 28px; height: 28px; stroke-width: 2.4; }
.cp-sentto { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.cp-sentto li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); font-size: 14px; }
.cp-sentto svg { width: 16px; height: 16px; color: var(--ok); }
.cp-row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .cp-bg { padding: 0; place-items: stretch; }
  .cp { height: 100dvh; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .cp-view { grid-template-rows: auto auto; }
  .cp-bar .cp-zoom { display: none; }
  .cp-scroll { display: block; padding: 16px 16px 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .cp-pages { display: flex; gap: 14px; width: max-content; }
  .cp-page { width: min(62vw, 300px); scroll-snap-align: center; }
  .cp-page figcaption { display: none; }
  .cp-side { border-left: 0; min-height: 0; overflow-y: auto; grid-template-rows: auto auto; }
  .cp-sidebody { overflow: visible; }
  .cp-head { padding: 16px 16px 12px; position: sticky; top: 0; background: var(--paper); z-index: 2; }
  .cp-head h2 { font-size: 24px; }
  .cp-panel { padding: 16px 16px 32px; }
  .cp-tiles span { display: none; }
}

/* pages — home, compete, members, academy, sbi, shop, account */
#top { display: contents; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }
#app:focus { outline: none; }
.lnk { color: var(--baize); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.on-dark .lnk { color: var(--gold-2); }
.lnk-btn { font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.lnk-btn:hover { color: var(--ink); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; width: fit-content; }
.back svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.back:hover svg { transform: translateX(-3px); }
.back.inv { color: var(--on-dark-soft); }
.back.inv:hover { color: var(--on-dark); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.ticks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; background: var(--baize) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.on-dark .ticks li, .course.dark .ticks li { color: var(--on-dark-soft); }
.on-dark .ticks li::before, .course.dark .ticks li::before { background-color: var(--gold); }
.modal-pad { padding: clamp(28px, 4vw, 44px); }
.done { text-align: center; display: grid; gap: 18px; justify-items: center; }
.done-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--baize); color: var(--on-dark); box-shadow: 0 0 0 10px rgba(26,58,61,.08); }
.done-ico svg { width: 32px; height: 32px; }
.done-ico.sm { width: 52px; height: 52px; box-shadow: 0 0 0 7px rgba(26,58,61,.08); }
.done-ico.sm svg { width: 22px; height: 22px; }

/* ---------- home: hero slider ---------- */
.hs { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(560px, 78vh, 760px); display: grid; }
.hs-slide { grid-area: 1 / 1; position: relative; display: grid; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; }
.hs-slide.on { opacity: 1; visibility: visible; }
.hs-art { position: absolute; inset: 0; z-index: -2; }
.hs-art svg { width: 100%; height: 100%; }
.hs-slide.on .hs-art svg { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.hs-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,30,32,.95) 0%, rgba(12,30,32,.72) 42%, rgba(12,30,32,.1) 100%); }
.hs-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-block: 72px 150px; }
.hs-copy { display: grid; gap: 24px; max-width: 700px; }
.hs-copy h1 { font-size: clamp(44px, 6.6vw, 104px); line-height: .96; }
.hs-slide.on .hs-copy > * { animation: rise .9s var(--ease) both; }
.hs-slide.on .hs-copy > *:nth-child(2) { animation-delay: .08s; }
.hs-slide.on .hs-copy > *:nth-child(3) { animation-delay: .16s; }
.hs-slide.on .hs-copy > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hs-act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hs-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-3); transform: rotate(1.5deg); max-width: 460px; justify-self: end; width: 100%; }
.hs-photo img { width: 100%; height: 100%; object-fit: cover; }
.hs-photo .badge { position: absolute; left: 16px; bottom: 16px; }
.hs-photo .badge svg { width: 13px; height: 13px; }
.hs-bar { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; z-index: 3; }
.hs-dots { display: flex; gap: 20px; }
.hs-dot { display: grid; gap: 10px; color: var(--on-dark-mute); font-size: 12px; text-align: left; min-width: 80px; }
.hs-dot i { height: 2px; background: rgba(244,240,230,.2); position: relative; overflow: hidden; display: block; border-radius: 1px; }
.hs-dot i::after { content: ""; position: absolute; inset: 0; background: var(--gold-2); transform: scaleX(0); transform-origin: left; }
.hs-dot.on { color: var(--on-dark); }
.hs-dot.run i::after { animation: prog 7s linear forwards; }
.hs.paused .hs-dot.run i::after { animation-play-state: paused; }
@keyframes prog { to { transform: scaleX(1); } }
.hs-next { display: flex; align-items: center; gap: 22px; padding: 16px 20px; border-radius: var(--r-lg); background: rgba(244,240,230,.07); border: 1px solid var(--felt-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; transition: background .2s; }
.hs-next:hover { background: rgba(244,240,230,.12); }
.hs-next > div:first-child { display: grid; gap: 4px; max-width: 220px; }
.hs-next b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.cd { display: flex; gap: 6px; }
.cd > div { display: grid; justify-items: center; min-width: 48px; padding: 8px 4px; border-radius: 10px; background: rgba(12,30,32,.5); }
.cd b { font-family: var(--f-mono); font-size: 20px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.cd span { font-size: 10px; color: var(--on-dark-mute); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }
.cd-lg { margin-top: 24px; }
.cd-lg > div { min-width: 70px; padding: 12px 6px; background: rgba(244,240,230,.07); border: 1px solid var(--felt-line); }
.cd-lg b { font-size: 30px; }
@media (max-width: 960px) {
  .hs-slide::before { background: linear-gradient(180deg, rgba(12,30,32,.9) 0%, rgba(12,30,32,.78) 60%, rgba(12,30,32,.92) 100%); }
  .hs-grid { grid-template-columns: 1fr; padding-block: 56px 190px; }
  .hs-photo { display: none; }
  .hs-bar { flex-direction: column; align-items: flex-start; bottom: 24px; }
}
@media (max-width: 560px) { .hs-dots { gap: 12px; } .hs-dot { min-width: 56px; } .hs-next { width: 100%; justify-content: space-between; } .hs-next > div:first-child { max-width: 150px; } .cd > div { min-width: 40px; } .cd b { font-size: 17px; } }

.intro-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 860px) { .intro-split { grid-template-columns: 1fr; } }

/* rankings snapshot + podium */
.rank-home { position: relative; overflow: hidden; }
.rank-note { margin-top: 24px; font-size: 13px; color: var(--on-dark-mute); }
.rank-note.dark { color: var(--ink-mute); }
.podium { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px; }
.pod { border-radius: var(--r-lg); padding: 22px; display: grid; gap: 18px; align-content: start; border: 1px solid var(--felt-line); background: rgba(244,240,230,.04); min-width: 0; }
.pod-1 { background: linear-gradient(160deg, rgba(214,169,58,.24), rgba(214,169,58,.05) 60%); border-color: rgba(214,169,58,.45); }
.pod-top { display: flex; justify-content: space-between; align-items: center; }
.pod-pos { font-size: 13px; color: var(--on-dark-mute); }
.pod-1 .pod-pos { color: var(--gold-2); }
.pod-crown { display: inline-flex; gap: 6px; align-items: center; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.pod-crown svg { width: 15px; height: 15px; }
.pod-who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pod-who > div { min-width: 0; }
.pod-who h4 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-who span:not(.mono-av) { font-size: 12.5px; color: var(--on-dark-mute); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-pts { display: flex; align-items: baseline; gap: 8px; }
.pod-pts b { font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; }
.pod-1 .pod-pts b { font-size: clamp(52px, 6vw, 88px); color: var(--gold-2); }
.pod-pts span { font-size: 12px; color: var(--on-dark-mute); text-transform: uppercase; letter-spacing: .12em; }
.pod-foot { font-size: 11.5px; color: var(--on-dark-mute); border-top: 1px solid var(--felt-line); padding-top: 12px; }
.section:not(.on-dark) .podium .pod:not(.on-dark *), .ev-detail .pod { background: var(--paper); border-color: var(--line); }
.section:not(.on-dark) .pod-1, .ev-detail .pod-1 { background: linear-gradient(160deg, var(--gold-soft), var(--paper) 70%); border-color: #e5cf92; }
.section:not(.on-dark) .pod-who span:not(.mono-av), .section:not(.on-dark) .pod-pts span, .section:not(.on-dark) .pod-pos, .section:not(.on-dark) .pod-foot, .ev-detail .pod-who span:not(.mono-av), .ev-detail .pod-pos { color: var(--ink-mute); }
.section:not(.on-dark) .pod-1 .pod-pts b, .section:not(.on-dark) .pod-1 .pod-pos, .section:not(.on-dark) .pod-crown { color: #8a6408; }
.section:not(.on-dark) .pod-foot { border-top-color: var(--line); }
.pod-stage { padding: clamp(14px, 2vw, 20px); border-radius: var(--r-xl); background: var(--deep); }
.podium.sm { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .podium { grid-template-columns: 1fr 1fr; } .pod-1 { grid-column: 1 / -1; } }
@media (max-width: 460px) { .podium { grid-template-columns: 1fr; } }

/* feature story */
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--deep); color: var(--on-dark); cursor: pointer; }
.feature .media { border-radius: 0; min-height: 360px; }
.ft-body { padding: clamp(28px, 4vw, 52px); display: grid; gap: 18px; align-content: center; justify-items: start; position: relative; }
/* Said rather than inherited. Everything else in .ft-body names its own colour
   — the standfirst, the link, the date — and the heading was the one part
   taking it from .feature's `color` two levels up. Anything that colours a
   heading on the way down, in the page or in the browser, lands on dark text on
   the dark card and the headline disappears. It costs nothing to be explicit. */
.ft-body h3 { font-size: clamp(28px, 3vw, 42px); color: var(--on-dark); }
.ft-body p { color: var(--on-dark-soft); }
.ft-body .link-arrow { color: var(--gold-2); width: fit-content; }
.ft-date { font-size: 12px; color: var(--on-dark-mute); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature .media { min-height: 0; aspect-ratio: 16 / 9; } }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; margin-top: 48px; }
@media (max-width: 960px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* event rows */
.ev-list { display: grid; gap: 12px; }
.ev-row { display: grid; grid-template-columns: 124px 1fr auto 44px; gap: 24px; align-items: center; padding: 20px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.ev-row:hover { border-color: var(--ink-soft); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.ev-date { display: grid; gap: 2px; border-right: 1px solid var(--line); padding-right: 20px; }
.ev-date b { white-space: nowrap; font-family: var(--f-display); font-weight: 300; font-size: 36px; line-height: 1; letter-spacing: -.03em; }
.ev-date span { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; }
.ev-main { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.ev-main h4 { font-size: 21px; }
.ev-meta { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-mute); }
.ev-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.ev-side { display: grid; gap: 10px; justify-items: end; }
.ev-fill { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-mute); }
.ev-fill .bar { width: 90px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ev-fill .bar i { display: block; height: 100%; background: var(--baize); border-radius: 2px; }
.ev-fill.lg { display: grid; gap: 8px; margin: 16px 0; }
.ev-fill.lg .bar { width: 100%; height: 6px; }
.ev-go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); transition: background .2s, color .2s; }
.ev-go svg { width: 18px; height: 18px; }
.ev-row:hover .ev-go, .club:hover .ev-go { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) {
  .ev-row { grid-template-columns: 72px 1fr; gap: 16px; padding: 18px; }
  .ev-date { padding-right: 14px; }
  .ev-date b { font-size: 30px; }
  .ev-side { grid-column: 2; justify-items: start; }
  .ev-go { display: none; }
  .ev-main h4 { font-size: 18px; }
}

/* mosaic gallery */
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 16px; }
.mo { margin: 0; position: relative; cursor: zoom-in; border-radius: var(--r-lg); overflow: hidden; }
.mo .media { height: 100%; border-radius: var(--r-lg); }
.mo-0 { grid-row: 1 / 3; }
.mo figcaption, .mz figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(12,30,32,.85)); color: var(--on-dark); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; opacity: 0; transform: translateY(6px); transition: all .35s var(--ease); }
.mo figcaption .mono, .mz figcaption .mono { font-size: 11px; color: var(--on-dark-mute); white-space: nowrap; }
.mo:hover figcaption, .mz:hover figcaption, .mo:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .mo figcaption, .mz figcaption { opacity: 1; transform: none; } }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; } .mo-0 { grid-column: 1 / -1; grid-row: auto; } .mo-4 { display: none; } }

.partners-band { border-block: 1px solid var(--line); }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tier-mini { display: grid; gap: 10px; }
.tm { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--felt-line); background: rgba(244,240,230,.04); cursor: pointer; transition: all .25s var(--ease); }
.tm:hover { background: rgba(244,240,230,.09); border-color: rgba(214,169,58,.5); transform: translateX(4px); }
.tm > div { display: grid; gap: 2px; }
.tm b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.tm span { font-size: 13px; color: var(--on-dark-mute); }
.tm-p { display: grid; justify-items: end; }
.tm-p b { font-family: var(--f-mono); font-size: 22px; color: var(--gold-2); }
.tm-p small { font-size: 11px; color: var(--on-dark-mute); }
@media (max-width: 860px) { .join-grid { grid-template-columns: 1fr; } }

.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid > div:first-child { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid > div:first-child { position: static; } }

.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-art { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.cta-art svg { width: 100%; height: 100%; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--baize) 30%, rgba(26,58,61,.6)); }
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: clamp(56px, 7vw, 96px); flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(32px, 4vw, 56px); }
.cta-act { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- news article ---------- */
.art-head { padding-block: clamp(20px, 2.6vw, 36px) 28px; display: grid; gap: 14px; justify-items: start; }
.art-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; flex-wrap: wrap; margin-bottom: 6px; }
.art-kick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.art-kick .mono { font-size: 12px; color: var(--ink-mute); }
.art-head h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; }
.art-head .lead { margin-top: -2px; }
.art-by { display: flex; align-items: center; gap: 14px; width: 100%; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line); }
.art-by > div { display: grid; }
.art-by b { font-weight: 600; }
.art-by .mono { font-size: 12px; color: var(--ink-mute); }
.art-img .media { aspect-ratio: 16 / 7; }
.art-body { padding-block: 36px 40px; display: grid; gap: 20px; font-size: 18.5px; line-height: 1.7; color: var(--ink-2); }
.art-body p:first-child::first-letter { font-family: var(--f-display); font-size: 4.2em; float: left; line-height: .82; margin: 6px 12px 0 0; color: var(--baize); font-weight: 300; }
.art-foot { display: flex; align-items: center; gap: 12px; padding-block: 20px 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mute); flex-wrap: wrap; }

/* ---------- events ---------- */
.ev-tools { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 40px; flex-wrap: wrap; }
.ev-tools .chips { flex: 1; min-width: 0; }
.ev-tools-r { display: flex; gap: 10px; }
.ev-tools-r .seg button svg { width: 16px; height: 16px; }
.ev-month + .ev-month { margin-top: 56px; }
.evm-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.evm-head .mono { font-size: 12px; color: var(--ink-mute); }
.cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); min-width: 770px; }
.cal-h { padding: 12px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid var(--line); background: var(--ivory); }
.cal-c { min-height: 110px; padding: 10px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.cal-c:nth-child(7n) { border-right: 0; }
.cal-c .mono { font-size: 12px; color: var(--ink-mute); }
.cal-c.off { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-soft) 6px 7px); }
.cal-c.today .mono { background: var(--ink); color: var(--paper); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.cal-ev { font-size: 12px; line-height: 1.3; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, var(--paper)); border-left: 3px solid var(--c); cursor: pointer; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 22%, var(--paper)); }

.ev-hero, .club-hero { position: relative; overflow: hidden; isolation: isolate; }
.ev-hero .ph-art, .club-hero .ph-art { position: absolute; inset: 0; z-index: -1; opacity: .55; }
.ev-hero .ph-art svg, .club-hero .ph-art svg { width: 100%; height: 100%; }
.ev-hero::after, .club-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,30,32,.97) 20%, rgba(12,30,32,.7)); }
.ev-hero .wrap, .club-hero .wrap { padding-block: clamp(40px, 6vw, 80px); display: grid; gap: 18px; justify-items: start; }
.ev-hero h1, .club-hero h1 { font-size: clamp(36px, 5vw, 68px); max-width: 18ch; }
.evh-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--on-dark-soft); }
.evh-meta span { display: inline-flex; gap: 8px; align-items: center; }
.evh-meta svg { width: 16px; height: 16px; color: var(--gold-2); }
.ev-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: 24px; }
.evd-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; }
.entry-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 12px; background: var(--paper); box-shadow: var(--shadow-1); }
.entry-card.ghost { box-shadow: none; background: var(--ivory); border-color: transparent; }
.entry-card h4 { font-size: 22px; }
.entry-card p { font-size: 14px; color: var(--ink-soft); }
.ec-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.ec-price > div { padding: 14px; border-radius: var(--r); background: var(--ivory); display: grid; gap: 2px; }
.ec-price > div:first-child { background: #e8f2ec; }
.ec-price b { font-size: 26px; font-weight: 500; }
.ec-price span { font-size: 12px; color: var(--ink-mute); }
.ec-small { font-size: 12.5px; color: var(--ink-mute); text-align: center; }
.sched { margin-top: 20px; border-top: 1px solid var(--line); }
.sc-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.sc-row .mono { color: var(--ink-mute); font-size: 13px; }
.evd-main > .ticks { margin-top: 20px; }
.venue-card { margin-top: 56px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--ivory); }
.venue-card .media { aspect-ratio: 16 / 10; border-radius: var(--r); }
.venue-card > div:last-child { display: grid; gap: 8px; justify-items: start; }
.venue-card p { color: var(--ink-soft); font-size: 14px; }
@media (max-width: 960px) { .ev-detail { grid-template-columns: 1fr; } .evd-side { position: static; } }
@media (max-width: 560px) { .venue-card { grid-template-columns: 1fr; } .sc-row { grid-template-columns: 90px 1fr; } }

/* rankings */
.rank-tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 64px 0 20px; flex-wrap: wrap; }
.rank-tbl .pos { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); font-size: 13px; }
.rank-tbl tr:first-child .pos { background: var(--gold-soft); color: #7a5a06; }
.mv { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-mute); }
.mv.new { color: var(--chalk); }
.mv.up { color: var(--ok); }
.mv.down { color: var(--err); }
.pl { display: flex; gap: 12px; align-items: center; }
.pl > div { display: grid; }
.pl b { font-weight: 600; }
.pl span:not(.mono-av) { font-size: 12.5px; color: var(--ink-mute); }
.pts { font-size: 17px; color: var(--baize); }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st3 { padding: 30px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 12px; }
.st3 .mono { font-size: 11px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.st3 p { color: var(--ink-soft); font-size: 14.5px; }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; } }

/* ---------- members ---------- */
.dir-tools { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mem { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.mem > div:nth-child(2) { display: grid; min-width: 0; }
.mem b { font-weight: 600; }
.mem span:not(.badge):not(.mono-av) { font-size: 13px; color: var(--ink-mute); }
.mem-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mem-meta .mono { font-size: 11.5px; }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; padding-top: 14px; }
.tier { position: relative; padding: 30px 26px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 18px; }
.tier.feat { background: var(--deep); color: var(--on-dark); border-color: var(--deep); box-shadow: var(--shadow-3); }
.tier.feat .ticks li { color: var(--on-dark-soft); }
.tier.feat .ticks li::before { background-color: var(--gold); }
.tier.feat p, .tier.feat .tier-price span { color: var(--on-dark-mute); }
.tier-flag { position: absolute; top: -12px; right: 22px; background: var(--gold-2); color: var(--deep); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: var(--pill); }
.tier-price { display: flex; align-items: baseline; gap: 8px; }
.tier-price b { font-size: 48px; font-weight: 400; letter-spacing: -.03em; }
.tier-price span { font-size: 13px; color: var(--ink-mute); }
.tier p { font-size: 14px; color: var(--ink-soft); min-height: 42px; }
@media (max-width: 1100px) { .tiers { grid-template-columns: 1fr 1fr; } .tier.feat { transform: none; } }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } }
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ref { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 16px; background: var(--paper); }
.ref-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ref-stats > div { padding: 12px 14px; border-radius: var(--r); background: var(--ivory); display: grid; }
.ref-stats b { font-size: 16px; }
.ref-stats span { font-size: 12px; color: var(--ink-mute); }
@media (max-width: 860px) { .ref-grid { grid-template-columns: 1fr; } }
.rules-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.rule-body { display: grid; gap: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-2); padding: 32px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); min-height: 200px; }
.ref-path { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.path { display: grid; gap: 12px; position: relative; }
.path-step { padding: 22px 24px 22px 70px; border-radius: var(--r-lg); border: 1px solid var(--line); position: relative; display: grid; gap: 4px; }
.path-step::before { content: ""; position: absolute; left: 28px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--baize); box-shadow: 0 0 0 5px #e3f1e8; }
.path-step .mono { font-size: 11px; letter-spacing: .12em; color: var(--ink-mute); text-transform: uppercase; }
.path-step p { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 860px) { .rules-grid, .ref-path { grid-template-columns: 1fr; } }

/* interactive boxes */
.ibox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ibox-grid.four { grid-template-columns: repeat(4, 1fr); }
.ibox { position: relative; padding: 30px 28px 34px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s, background .4s, color .4s; isolation: isolate; }
.ibox::before { content: ""; position: absolute; inset: 0; background: var(--deep); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.ibox:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); color: var(--on-dark); border-color: var(--deep); }
.ibox:hover::before { transform: none; }
.ib-n { position: absolute; top: 24px; right: 26px; font-size: 11px; color: var(--ink-mute); transition: color .3s; }
.ib-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--ivory); color: var(--baize); display: grid; place-items: center; transition: background .4s, color .4s, transform .5s var(--ease); }
.ib-ico svg { width: 24px; height: 24px; }
.ibox:hover .ib-ico { background: var(--gold-2); color: var(--deep); transform: rotate(-6deg) scale(1.05); }
.ibox h4 { font-size: 23px; margin-top: 10px; }
.ibox p { font-size: 14px; color: var(--ink-soft); transition: color .3s; }
.ibox:hover p, .ibox:hover .ib-n { color: var(--on-dark-soft); }
.ib-line { position: absolute; left: 28px; right: 28px; bottom: 0; height: 3px; background: var(--gold-2); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .1s; }
.ibox:hover .ib-line { transform: scaleX(1); }
.on-ivory .ibox { background: var(--paper); }
@media (max-width: 1000px) { .ibox-grid, .ibox-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ibox-grid, .ibox-grid.four { grid-template-columns: 1fr; } }

/* affiliate fees */
.fee-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.bands { margin-top: 32px; border-top: 1px solid var(--felt-line); }
.band-row { display: flex; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--felt-line); color: var(--on-dark-soft); transition: color .2s, padding .3s var(--ease), background .2s; border-radius: 8px; }
.band-row b { font-size: 18px; font-weight: 500; }
.band-row.on { color: var(--gold-2); background: rgba(214,169,58,.08); padding-inline: 14px; }
.fee-calc { padding: clamp(26px, 3vw, 40px); border-radius: var(--r-xl); background: rgba(244,240,230,.05); border: 1px solid var(--felt-line); display: grid; gap: 14px; }
.fc-l { font-size: 14px; color: var(--on-dark-soft); }
.fc-n { display: flex; align-items: baseline; gap: 10px; }
.fc-n b { font-family: var(--f-display); font-weight: 300; font-size: 88px; line-height: 1; }
.fc-n span { color: var(--on-dark-mute); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-2) var(--p, 33%), rgba(244,240,230,.18) var(--p, 33%)); outline: none; margin: 8px 0 18px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--on-dark); border: 6px solid var(--gold-2); cursor: grab; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--on-dark); border: 6px solid var(--gold-2); cursor: grab; }
.fc-out { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--felt-line); }
.fc-out b { font-size: 36px; color: var(--gold-2); font-weight: 500; }
@media (max-width: 860px) { .fee-grid { grid-template-columns: 1fr; } }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.st4 { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 10px; position: relative; }
.st4-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: #7a5a06; font-size: 16px; margin-bottom: 8px; }
.st4 p { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 960px) { .steps4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } }

.club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.club { padding: 24px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, border-color .2s; }
.club:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--ink-soft); }
.club-top { display: flex; justify-content: space-between; align-items: center; }
.club h4 { font-size: 24px; }
.club-meta { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink-mute); }
.club-meta svg { width: 14px; height: 14px; }
.club-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-soft); }
.club-foot .ev-go { width: 36px; height: 36px; }
@media (max-width: 960px) { .club-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .club-grid { grid-template-columns: 1fr; } }

/* ---------- academy ---------- */
.courses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.course { padding: clamp(28px, 3.5vw, 44px); border-radius: var(--r-xl); border: 1px solid var(--line); display: grid; gap: 22px; background: var(--paper); }
.course.dark { background: var(--deep); color: var(--on-dark); border-color: var(--deep); }
.co-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.co-price { display: grid; justify-items: end; }
.co-price b { font-size: 44px; font-weight: 400; line-height: 1; }
.co-price span { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.course.dark .co-price span, .course.dark .co-meta { color: var(--on-dark-mute); }
.course h3 { font-size: clamp(32px, 3.4vw, 48px); }
.co-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-mute); }
.co-meta span { display: inline-flex; gap: 6px; align-items: center; }
.co-meta svg { width: 15px; height: 15px; }
.co-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.course.dark .co-cols { border-top-color: var(--felt-line); }
.co-cols h5 { margin: 0 0 14px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.course.dark h5 { color: var(--gold-2); }
@media (max-width: 860px) { .courses { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .co-cols { grid-template-columns: 1fr; } }
.split-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split-media .media { aspect-ratio: 5 / 4; }
@media (max-width: 860px) { .split-media { grid-template-columns: 1fr; } }
.coach-feature { display: grid; grid-template-columns: 360px 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cf-art { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.cf-art svg { width: 100%; height: 100%; }
.cf-body { display: grid; gap: 20px; justify-items: start; }
.cf-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 520px; }
.cf-rates > div { padding: 16px; border-radius: var(--r); background: var(--ivory); display: grid; gap: 4px; }
.cf-rates span { font-size: 12.5px; color: var(--ink-mute); }
.cf-rates b { font-size: 22px; font-weight: 500; }
@media (max-width: 860px) { .coach-feature { grid-template-columns: 1fr; } .cf-art { max-width: 320px; } }
.report-band { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: #fbeeec; border: 1px solid #f2d3cf; }
.report-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc { padding: 22px; border-radius: var(--r-lg); background: var(--paper); display: grid; gap: 8px; justify-items: start; align-content: start; }
.rc b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.rc span:not(.eyebrow) { font-size: 13px; color: var(--ink-soft); }
.rc .btn { margin-top: 8px; }
@media (max-width: 960px) { .report-band { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .report-cards { grid-template-columns: 1fr; } }
.req-list { display: grid; gap: 12px; }
.req { display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center; padding: 22px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.req-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--baize); color: var(--on-dark); font-size: 16px; }
.req p { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 600px) { .req { grid-template-columns: 1fr; } }
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.doc { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, transform .25s var(--ease); }
.doc:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.doc > div { display: grid; min-width: 0; }
.doc b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.doc .mono { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.doc-ico { width: 42px; height: 42px; border-radius: 12px; background: #fbe4e2; color: var(--err); display: grid; place-items: center; }
.doc-ico svg, .doc-dl svg { width: 19px; height: 19px; }
.doc-dl { color: var(--ink-mute); }
.doc:hover .doc-dl { color: var(--baize); }
@media (max-width: 960px) { .doc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } }
.partner-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.pr { padding: 20px; border-radius: var(--r-lg); background: var(--paper); display: grid; gap: 4px; }
.pr span { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 860px) { .partner-row { grid-template-columns: 1fr 1fr; } }
.enquiry { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.form-card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
@media (max-width: 860px) { .enquiry { grid-template-columns: 1fr; } }
.dis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dis { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 8px; }
.dis p { color: var(--ink-soft); font-size: 14.5px; }
.dis .mono { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--baize); margin-top: 6px; }
.dis .mono svg { width: 15px; height: 15px; }
@media (max-width: 700px) { .dis-grid { grid-template-columns: 1fr; } }

/* ---------- sbi pages ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.people.two { grid-template-columns: 1fr 1fr; }
.person { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper); display: grid; }
.pp-img { aspect-ratio: 1; overflow: hidden; }
.pp-img svg { width: 100%; height: 100%; transition: transform 1s var(--ease); }
.person:hover .pp-img svg { transform: scale(1.04); }
.pp-body { padding: 20px; display: grid; gap: 6px; }
.pp-role { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pp-note { font-size: 13px; color: var(--ink-mute); }
.pp-mail { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); text-align: left; }
.pp-mail span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-mail svg { width: 15px; height: 15px; flex-shrink: 0; }
.pp-mail:hover { color: var(--baize); }
.person.row { grid-template-columns: 140px 1fr; }
.person.row .pp-img { aspect-ratio: auto; height: 100%; }
@media (max-width: 1000px) { .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .people, .people.two { grid-template-columns: 1fr; } .person.row { grid-template-columns: 110px 1fr; } }
.spons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.spon { padding: 30px; border-radius: var(--r-lg); background: var(--paper); display: grid; gap: 14px; justify-items: start; align-content: space-between; min-height: 160px; grid-column: span 2; }
.spon.small { grid-column: span 1; min-height: 110px; align-content: center; }
@media (max-width: 860px) { .spons { grid-template-columns: 1fr 1fr; } }
.masonry { columns: 3 300px; column-gap: 16px; }
.mz { margin: 0 0 16px; break-inside: avoid; position: relative; cursor: zoom-in; border-radius: var(--r-lg); overflow: hidden; }
.mz .media { border-radius: var(--r-lg); }
.mz:nth-child(3n+1) .media { aspect-ratio: 4 / 5; }
.mz:nth-child(3n+2) .media { aspect-ratio: 4 / 3; }
.mz:nth-child(3n) .media { aspect-ratio: 1; }
.key-doc { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--deep); color: var(--on-dark); cursor: pointer; }
.key-doc h3 { margin: 10px 0 6px; }
.key-doc p { color: var(--on-dark-soft); font-size: 14.5px; max-width: 60ch; }
.kd-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--gold-2); color: var(--deep); display: grid; place-items: center; }
.kd-ico svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .key-doc { grid-template-columns: 1fr; } }
.gov { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px; border-radius: var(--r-xl); background: var(--ivory); flex-wrap: wrap; }
.gov p { color: var(--ink-soft); margin-top: 6px; font-size: 14.5px; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-side { display: grid; gap: 12px; }
.cs-block { padding: 24px; border-radius: var(--r-lg); background: var(--ivory); display: grid; gap: 10px; justify-items: start; }
.cs-big { font-family: var(--f-display); font-size: 26px; line-height: 1.25; }
.cs-big.mono { font-family: var(--f-mono); font-size: 24px; }
.hours { display: grid; gap: 8px; width: 100%; }
.hours div { display: flex; justify-content: space-between; font-size: 14px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.stmt { display: grid; gap: 18px; padding-block: 24px 40px; }
.stmt h3 { margin-top: 28px; font-size: 26px; }
.stmt p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
.stmt-status { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-radius: var(--r-lg); background: var(--gold-soft); font-size: 14.5px; flex-wrap: wrap; }
.known { display: grid; gap: 10px; }
.known > div { padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); }
.known b { font-weight: 600; }
.known p { font-size: 14.5px; margin-top: 4px; }

/* ---------- shop ---------- */
/* product cards: a quiet card around image and details */
.pcard { position: relative; display: grid; gap: 0; align-content: start; min-width: 0; padding: 10px; border-radius: calc(var(--r-lg) + 6px); background: #fffdf9; border: 1px solid var(--line-soft); box-shadow: 0 1px 2px rgba(18,20,18,.04), 0 12px 28px -18px rgba(18,20,18,.18); }
.pcard:hover { transform: translateY(-4px); border-color: rgba(214,169,58,.42); box-shadow: 0 2px 4px rgba(18,20,18,.04), 0 26px 44px -22px rgba(12,30,32,.32); }
.pc-media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(circle at 50% 36%, #fdfbf6 0%, #f1ece1 72%); aspect-ratio: 1; cursor: pointer; }
.pc-media svg { width: 100%; height: 100%; transition: transform 1s var(--ease); }
.pcard:hover .pc-media svg { transform: scale(1.05); }
.pcard.out .pc-media svg { filter: grayscale(.9) opacity(.6); }
.pcard.out .pc-body { opacity: .75; }
.pc-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pc-quick { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 40px; border-radius: var(--pill); background: rgba(18,20,18,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--paper); font-weight: 600; font-size: 13px; opacity: 0; transform: translateY(8px); transition: all .35s var(--ease); }
.pcard:hover .pc-quick, .pc-quick:focus-visible { opacity: 1; transform: none; }
.pc-quick:hover { background: var(--baize); }
@media (hover: none) { .pc-quick { opacity: 1; transform: none; height: 36px; font-size: 12.5px; } }
.pc-body { display: grid; gap: 5px; padding: 14px 8px 4px; cursor: pointer; }
.pc-brand { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.pc-body h4 { font-size: 18px; line-height: 1.2; min-height: 2.4em; }
.pc-price { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pc-price > span:first-child { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pc-price b { font-family: var(--f-mono); font-weight: 500; font-size: 15.5px; }
.pc-price s { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-mute); }
.pc-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--line); color: var(--ink-soft); transition: background .35s var(--ease-card, ease), color .35s, border-color .35s, transform .35s var(--ease-card, ease); }
.pc-go svg { width: 15px; height: 15px; }
.pcard:hover .pc-go { background: var(--gold-2); border-color: var(--gold-2); color: var(--deep); transform: translateX(2px); }
@media (max-width: 760px) { .pcard { padding: 7px; border-radius: calc(var(--r-lg) + 2px); } .pc-body { padding: 11px 5px 3px; } .pc-go { width: 28px; height: 28px; } }
.shop-hero { padding-block: clamp(28px, 4vw, 56px); }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.sh-copy { display: grid; gap: 20px; }
.sh-copy h1 { font-size: clamp(44px, 6vw, 88px); }
.sh-perks { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.sh-perks span { display: inline-flex; align-items: center; gap: 8px; }
.sh-perks svg { width: 16px; height: 16px; color: var(--baize); }
.sh-feature { position: relative; border-radius: var(--r-xl); overflow: hidden; cursor: pointer; }
.sh-feature .media { aspect-ratio: 5 / 4; border-radius: var(--r-xl); }
.shf-tag { position: absolute; left: 20px; bottom: 20px; right: 20px; display: grid; gap: 6px; justify-items: start; padding: 18px 20px; border-radius: var(--r-lg); background: rgba(251,250,246,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.shf-tag b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.shf-tag s { color: var(--ink-mute); margin-left: 6px; }
@media (max-width: 860px) { .sh-grid { grid-template-columns: 1fr; } }
.cat-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 40px; }
.cat-tile { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.cat-tile:hover { border-color: var(--ink-soft); }
.cat-tile.on { border-color: var(--ink); background: var(--ivory); }
.ct-img { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; }
.ct-img svg { width: 100%; height: 100%; }
.cat-tile span { font-weight: 600; font-size: 14px; align-self: end; }
.cat-tile small { font-size: 11.5px; color: var(--ink-mute); align-self: start; }
@media (max-width: 960px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: 1fr 1fr; } }
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.shop-bar .chips { flex: 1; min-width: 0; }
.shop-bar-r { display: flex; gap: 16px; align-items: center; }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
@media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .prod-grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; } .pc-body h4 { font-size: 15.5px; } }
.perks4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk svg { width: 26px; height: 26px; color: var(--baize); flex-shrink: 0; }
.perk > div { display: grid; }
.perk b { font-weight: 600; }
.perk span { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 860px) { .perks4 { grid-template-columns: 1fr 1fr; } }
.pdp > *, .pdp-gal > *, .checkout > *, .acct-grid > *, .ev-detail > *, .contact-grid > * { min-width: 0; }
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.pdp-gal { display: grid; grid-template-columns: 80px 1fr; gap: 14px; position: sticky; top: calc(var(--header-h) + 20px); }
.pdp-thumbs { display: grid; gap: 10px; align-content: start; }
.pdp-th { border-radius: 12px; overflow: hidden; aspect-ratio: 1; border: 2px solid transparent; transition: border-color .2s; }
.pdp-th.on { border-color: var(--ink); }
.pdp-th svg { width: 100%; height: 100%; }
.pdp-main { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1; }
.pdp-img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.pdp-img.on { opacity: 1; }
.pdp-img svg { width: 100%; height: 100%; }
.pdp-flag { position: absolute; top: 18px; left: 18px; }
.pdp-info { display: grid; gap: 22px; }
.pdp-info h1 { font-size: clamp(34px, 4vw, 56px); }
.pdp-price { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pdp-price b { font-size: 30px; font-weight: 500; }
.pdp-price s { font-size: 17px; color: var(--ink-mute); }
.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size { min-width: 56px; height: 48px; border-radius: var(--r); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.size:hover { border-color: var(--ink); }
.size.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pdp-buy { display: flex; gap: 12px; }
.qty.lg { height: 56px; margin: 0; }
.qty.lg button { width: 46px; height: 54px; }
.qty.lg span { min-width: 30px; font-size: 16px; }
.qty button svg { width: 15px; height: 15px; }
.notify { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pdp-perks { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); padding-block: 18px; border-block: 1px solid var(--line); }
.pdp-perks span { display: inline-flex; align-items: center; gap: 8px; }
.pdp-perks svg { width: 16px; height: 16px; color: var(--baize); }
.sticky-buy { display: none; }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-gal { position: static; grid-template-columns: 1fr; }
  .pdp-thumbs { grid-template-columns: repeat(3, 72px); order: 2; }
  .sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: space-between; align-items: center; gap: 12px; box-shadow: 0 -10px 30px rgba(0,0,0,.06); }
  .sticky-buy > div { display: grid; min-width: 0; }
  .sticky-buy b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.co-title { font-size: clamp(40px, 5vw, 64px); margin: 14px 0 36px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.co-main { display: grid; gap: 20px; }
.co-sec { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); }
.co-h { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.co-h h4 { font-size: 24px; }
.co-alt { margin-left: auto; font-size: 13px; color: var(--ink-mute); display: inline-flex; gap: 6px; align-items: center; }
.co-alt svg { width: 14px; height: 14px; }
.bk-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 13px; flex-shrink: 0; }
.opt.row { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; text-align: left; }
.opt.row .o-tick { position: static; }
.co-side { position: sticky; top: calc(var(--header-h) + 20px); }
.summary { padding: clamp(22px, 3vw, 30px); border-radius: var(--r-xl); background: var(--ivory); display: grid; gap: 16px; }
.summary h4 { font-size: 24px; }
.sum-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: 14px; }
.sum-line > div:nth-child(2) { display: grid; }
.sum-line b { font-weight: 600; line-height: 1.3; }
.sum-line span:not(.mono) { font-size: 12.5px; color: var(--ink-mute); }
.sl-img { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: visible; }
.sl-img svg { width: 100%; height: 100%; border-radius: 12px; }
.sl-img .mono { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px; display: grid; place-items: center; }
.promo { display: flex; gap: 8px; padding-block: 14px; border-block: 1px solid var(--line); }
.sum-rows { display: grid; gap: 10px; }
.sum-rows > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.sum-rows span { color: var(--ink-mute); }
.sum-price { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.sum-price > div { display: flex; justify-content: space-between; align-items: baseline; }
.sum-price b { font-size: 26px; font-weight: 500; }
.sum-price .muted { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 960px) { .checkout { grid-template-columns: 1fr; } .co-side { position: static; order: -1; } }

/* ---------- auth split screens ---------- */
.split-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; min-height: 100dvh; }
.sa-art { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.sa-bg { position: absolute; inset: 0; z-index: -1; }
.sa-bg svg { width: 100%; height: 100%; }
.sa-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,30,32,.72), rgba(12,30,32,.94)); }
.sa-brand { color: var(--on-dark); }
.sa-copy { display: grid; gap: 22px; }
.sa-copy h1 { font-size: clamp(44px, 5vw, 80px); }
.sa-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.sa-list li { display: flex; gap: 14px; align-items: center; color: var(--on-dark-soft); font-size: 15px; }
.sa-list svg { width: 20px; height: 20px; color: var(--gold-2); flex-shrink: 0; }
.sa-foot { font-size: 13px; color: var(--on-dark-mute); }
.sa-main { background: var(--paper); display: flex; flex-direction: column; padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 80px); }
.sa-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.sa-switch { font-size: 13.5px; color: var(--ink-mute); }
.sa-form { width: 100%; max-width: 460px; margin: auto; padding-block: 48px; display: grid; gap: 14px; }
.sa-h { font-size: clamp(34px, 3.4vw, 48px); margin-top: 6px; }
.sa-sub { color: var(--ink-soft); margin-bottom: 14px; }
.sa-alt { font-size: 14px; color: var(--ink-mute); text-align: center; margin-top: 14px; }
@media (max-width: 900px) {
  .split-auth { grid-template-columns: 1fr; }
  .sa-art { min-height: 0; padding-block: 28px 36px; }
  .sa-copy h1 { font-size: 40px; }
  .sa-list, .sa-foot { display: none; }
}
.auth { display: grid; gap: 22px; }
.auth-seg { display: grid; grid-template-columns: 1fr 1fr; }
.auth-seg button { width: 100%; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-note { font-size: 14px; color: var(--ink-soft); }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp-i { height: 60px; border-radius: var(--r); border: 1px solid var(--line); text-align: center; font-family: var(--f-mono); font-size: 24px; background: var(--paper); outline: none; width: 100%; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.otp-i:focus { border-color: var(--baize); box-shadow: 0 0 0 4px rgba(26,58,61,.1); }
.otp.err .otp-i { border-color: var(--err); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.otp-err { color: var(--err); font-size: 13px; }
.demo-hint { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #7a5a06; background: var(--gold-soft); padding: 10px 14px; border-radius: var(--r); }
.demo-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
.sent, .twofa { display: grid; gap: 14px; justify-items: center; text-align: center; }
.twofa { justify-items: stretch; }
.twofa .done-ico { justify-self: center; }

/* ---------- account + club portal ---------- */
.acct-hero { padding-block: clamp(40px, 5vw, 64px); }
.acct-hero .wrap { display: grid; gap: 18px; }
.ah-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ah-row h1 { font-size: clamp(40px, 5vw, 72px); margin-top: 10px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.acct-main { display: grid; gap: 20px; }
.acct-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acct-tiles.four { grid-template-columns: repeat(4, 1fr); }
.at { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 4px; background: var(--paper); }
.at span { font-size: 12.5px; color: var(--ink-mute); }
.at b { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.1; }
.at b.mono { font-family: var(--f-mono); font-size: 28px; }
.at small { font-size: 12px; color: var(--ink-mute); }
.acct-card { padding: 26px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); display: grid; gap: 14px; }
.ac-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ac-head h3 { font-size: 24px; }
.bk-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.bk-line > div { display: grid; }
.bk-line span:not(.badge) { font-size: 12.5px; color: var(--ink-mute); }
.bk-d { width: 56px; height: 56px; border-radius: 14px; background: var(--ivory); display: grid; place-items: center; align-content: center; gap: 0; }
.bk-d b { font-size: 20px; line-height: 1; }
.bk-d span { font-size: 10.5px !important; text-transform: uppercase; }
.muted-p { color: var(--ink-mute); font-size: 14px; }
.ql { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ql-i { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--ivory); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; }
.ql-i:hover { background: var(--cream); }
.ql-i svg { width: 18px; height: 18px; color: var(--baize); }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.task-list li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-soft); padding: 10px 12px; border-radius: 10px; background: var(--ivory); }
.task-list li svg { width: 16px; height: 16px; color: var(--warn); }
.task-list li.done svg { color: var(--ok); }
@media (max-width: 1000px) { .acct-grid { grid-template-columns: 1fr; } .acct-tiles.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .acct-tiles { grid-template-columns: 1fr; } .acct-tiles.four { grid-template-columns: 1fr 1fr; } }

/* digital membership card */
.mcard { position: relative; aspect-ratio: 1.586; border-radius: 22px; overflow: hidden; color: var(--on-dark); padding: 22px 24px; display: grid; grid-template-rows: auto 1fr auto; box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(214,169,58,.35); isolation: isolate; max-width: 440px; width: 100%; }
.mc-bg { position: absolute; inset: 0; z-index: -1; }
.mc-bg svg { width: 100%; height: 100%; }
.mcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 40%), linear-gradient(0deg, rgba(12,30,32,.7), rgba(12,30,32,.15)); }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-top .brand-mark { width: 36px; height: 36px; }
.mc-top .mono { font-size: 11px; letter-spacing: .14em; color: var(--gold-2); }
.mc-name { align-self: center; display: grid; gap: 2px; }
.mc-name .eyebrow { color: var(--on-dark-mute); font-size: 9.5px; }
.mc-name b { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; }
.mc-name span:last-child { font-size: 12px; color: var(--on-dark-soft); }
.mc-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mc-bot > div { display: grid; gap: 2px; }
.mc-bot .eyebrow { font-size: 9px; color: var(--on-dark-mute); }
.mc-bot b { font-size: 15px; letter-spacing: .04em; }
.mc-bot span:not(.eyebrow) { font-size: 11.5px; color: var(--on-dark-soft); }
.mc-qr { width: 64px; height: 64px; border-radius: 8px; flex-shrink: 0; }
.demo-acct { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); background: var(--gold-soft); border: 1px dashed #d9b75e; }
.demo-acct > div { display: grid; gap: 1px; min-width: 0; }
.demo-acct .eyebrow { color: #7a5a06; font-size: 10px; }
.demo-acct b { font-size: 13.5px; overflow-wrap: anywhere; }
.demo-acct span.mono { font-size: 12px; color: #7a5a06; }
.da-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--paper); color: #8a6408; display: grid; place-items: center; }
.da-ico svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .demo-acct { grid-template-columns: 1fr auto; } .da-ico { display: none; } }
.plan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.on-dark .seg { background: rgba(244,240,230,.08); }
.on-dark .seg button { color: var(--on-dark-soft); }
.on-dark .seg button.on { background: var(--on-dark); color: var(--deep); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; }
.plan { position: relative; padding: 32px 28px; border-radius: var(--r-xl); border: 1px solid var(--felt-line); background: rgba(244,240,230,.04); display: grid; gap: 18px; align-content: start; }
.plan.feat { background: linear-gradient(160deg, rgba(214,169,58,.16), rgba(214,169,58,.03) 60%); border-color: rgba(214,169,58,.45); }
.plan p { color: var(--on-dark-soft); font-size: 14px; }
.plan .tier-price span { color: var(--on-dark-mute); }
.plan .ticks li { color: var(--on-dark-soft); }
.plan .ticks li::before { background-color: var(--gold); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ---------- tour tabs ---------- */
.rk-sec { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 560px) { .pod-stage { padding: 10px; } }
.tour-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 28px; padding: 6px; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tour-tabs::-webkit-scrollbar { display: none; }
.tt { display: grid; gap: 8px; text-align: left; padding: 12px 14px; border-radius: calc(var(--r-lg) - 4px); color: var(--ink-soft); transition: background .2s, color .2s, box-shadow .2s; min-width: 0; }
.tt:hover { background: var(--paper); color: var(--ink); }
.tt.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--line); }
.tt-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-prog { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tt-prog i { display: block; height: 100%; background: var(--baize); border-radius: inherit; }
.tt.on .tt-prog i { background: var(--gold); }
.tt-meta { font-size: 11px; color: var(--ink-mute); }

/* ---------- leaderboard ---------- */
.ldr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.ldr > div:first-child { display: grid; }
.ldr-lead { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 18px; align-content: space-between;
  background: radial-gradient(120% 90% at 100% 0%, rgba(214,169,58,.28), transparent 60%), linear-gradient(160deg, rgba(214,169,58,.14), rgba(244,240,230,.03)); border: 1px solid rgba(214,169,58,.42); }
.ldr-ghost { position: absolute; right: 18px; top: 30%; z-index: -1; font-family: var(--f-display); font-size: 200px; line-height: 1; color: rgba(214,169,58,.08); font-weight: 300; pointer-events: none; }
.ldr-lead-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ldr-lead-top .mono { font-size: 11.5px; color: var(--on-dark-mute); }
.ldr-crown { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: var(--pill); background: rgba(214,169,58,.16); color: var(--gold-2); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.ldr-crown svg { width: 14px; height: 14px; }
.ldr-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ldr-who .mono-av { width: 56px; height: 56px; font-size: 21px; }
.ldr-av { position: relative; flex-shrink: 0; display: inline-grid; }
.ldr-av .mono-av { box-shadow: 0 0 0 3px rgba(214,169,58,.28), 0 10px 24px rgba(0,0,0,.28); }
.ldr-crown-art { position: absolute; left: -15px; top: -30px; width: 50px; height: auto; transform: rotate(-20deg); transform-origin: 70% 90%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(232,187,69,.35)); animation: crownBob 5s ease-in-out infinite; transition: transform .5s var(--ease-card, ease); z-index: 1; }
.ldr-lead:hover .ldr-crown-art { animation-play-state: paused; transform: rotate(-8deg) translateY(-3px) scale(1.06); }
.ldr-glint { position: absolute; left: 13px; top: -31px; width: 10px; height: 10px; z-index: 2; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(0deg, transparent 44%, #fff 50%, transparent 56%), linear-gradient(90deg, transparent 44%, #fff 50%, transparent 56%); opacity: 0; animation: glint 5s ease-in-out infinite 1.2s; }
@keyframes crownBob { 0%, 100% { transform: rotate(-20deg) translateY(0); } 50% { transform: rotate(-15deg) translateY(-3px); } }
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 78% { opacity: 1; transform: scale(1.2) rotate(45deg); } 86% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .ldr-crown-art, .ldr-glint { animation: none; } }
.ldr-who > div { min-width: 0; }
.ldr-who h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; }
.ldr-who span:not(.mono-av) { display: block; font-size: 13px; color: var(--on-dark-mute); margin-top: 3px; }
.ldr-pts { display: flex; align-items: baseline; gap: 10px; }
.ldr-pts b { font-family: var(--f-display); font-weight: 300; font-size: clamp(64px, 7vw, 104px); line-height: .9; letter-spacing: -.04em; color: var(--gold-2); }
.ldr-pts span { font-size: 11.5px; color: var(--on-dark-mute); text-transform: uppercase; letter-spacing: .12em; }
.ldr-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(214,169,58,.3); padding-top: 14px; }
.ldr-stats div { display: grid; gap: 2px; }
.ldr-stats div + div { padding-left: 14px; border-left: 1px solid var(--felt-line); }
.ldr-stats b { font-family: var(--f-mono); font-size: 16px; font-weight: 500; color: var(--on-dark); }
.ldr-stats span { font-size: 11.5px; color: var(--on-dark-mute); }
.ldr-pack { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--felt-line); border-radius: var(--r-lg); background: rgba(244,240,230,.03); overflow: hidden; }
.ldr-pack-h { display: flex; justify-content: space-between; padding: 14px 20px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute); border-bottom: 1px solid var(--felt-line); }
.ldr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ldr-row { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 44px minmax(60px, 140px) 64px; align-items: center; gap: 14px; padding: 13px 20px; transition: background .2s; }
.ldr-row + .ldr-row { border-top: 1px solid var(--felt-line); }
.ldr-row:hover { background: rgba(244,240,230,.04); }
.ldr-pos { font-size: 13px; color: var(--on-dark-soft); text-align: center; }
.ldr-row .mono-av { width: 40px; height: 40px; font-size: 15px; background: rgba(244,240,230,.08); }
.ldr-n { min-width: 0; display: grid; }
.ldr-n b { font-weight: 600; font-size: 15px; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldr-n span { font-size: 12.5px; color: var(--on-dark-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldr-mv { font-family: var(--f-mono); font-size: 11px; color: var(--on-dark-mute); text-align: center; }
.ldr-mv.up { color: #7fd1a4; } .ldr-mv.down { color: #f0a08f; }
.ldr-mv.new { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--pill); background: rgba(244,240,230,.08); color: var(--on-dark-soft); }
.ldr-bar { height: 6px; border-radius: 6px; background: rgba(244,240,230,.08); overflow: hidden; }
.ldr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--baize-2, #4a7f82), #7fd1a4); }
.ldr-p { display: grid; justify-items: end; }
.ldr-p b { font-size: 18px; font-weight: 500; color: var(--on-dark); }
.ldr-p span { font-size: 11px; color: var(--on-dark-mute); }
.ldr-more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 13.5px; font-weight: 500; color: var(--gold-2); border-top: 1px solid var(--felt-line); cursor: pointer; }
.ldr-more:hover { background: rgba(214,169,58,.08); }
.ldr-more svg { width: 16px; height: 16px; }
@media (max-width: 980px) { .ldr { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ldr-row { grid-template-columns: 18px 36px minmax(0, 1fr) 56px; gap: 10px; padding: 12px 14px; }
  .ldr-row .mono-av { width: 36px; height: 36px; font-size: 13px; }
  .ldr-row .ldr-mv, .ldr-row .ldr-bar { display: none; }
  .ldr-pack-h { padding: 12px 14px; }
  .ldr-ghost { font-size: 200px; }
  .tour-tabs { grid-auto-columns: 150px; }
}
/* membership page: two kinds */
.mk-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 28px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); background: var(--deep); color: var(--on-dark); }
.mk-band h2 { font-size: clamp(28px, 3vw, 40px); margin: 8px 0 10px; }
.mk-band p { color: var(--on-dark-soft); font-size: 14.5px; }
.mk-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-t { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(244,240,230,.06); border: 1px solid var(--felt-line); }
.mk-t span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.mk-t b { font-size: 24px; font-weight: 500; }
.mk-t small { font-size: 12px; color: var(--on-dark-mute); }
.mk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 12px 0 26px; }
.mk-head h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 8px; }
.mk-head p { max-width: 520px; color: var(--ink-soft); }
@media (max-width: 1000px) { .mk-band { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mk-tiers { grid-template-columns: 1fr; } }

/* ---------- news: tools, list view, archive ---------- */
.nx-sec { padding-block: 28px clamp(48px, 6vw, 80px); }
.nx-tools { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, auto) auto; gap: 10px; align-items: end; padding: 14px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px -24px rgba(18,20,18,.4); position: sticky; top: calc(var(--header-h) + 10px); z-index: 20; }
.nx-search, .sx-form { position: relative; display: flex; align-items: center; }
.nx-si { position: absolute; left: 16px; display: grid; color: var(--ink-mute); pointer-events: none; }
.nx-si svg { width: 18px; height: 18px; }
.nx-search input, .sx-form input { width: 100%; height: 48px; border-radius: var(--pill); border: 1.5px solid var(--line); background: var(--paper); padding: 0 44px 0 46px; font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.nx-search input:focus, .sx-form input:focus { outline: 0; border-color: var(--baize-3); background: #fff; box-shadow: 0 0 0 4px rgba(57,103,106,.12); }
.nx-search input::-webkit-search-cancel-button, .sx-form input::-webkit-search-cancel-button { display: none; }
.nx-clear { position: absolute; right: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mute); }
.nx-clear:hover { background: var(--ivory); color: var(--ink); }
.nx-clear svg { width: 15px; height: 15px; }
.nx-sel { position: relative; display: grid; gap: 3px; }
.nx-sel > span { font: 500 9.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); padding-left: 16px; }
.nx-sel select { height: 48px; min-width: 130px; border-radius: var(--pill); border: 1.5px solid var(--line); background: var(--paper); padding: 0 38px 0 16px; font-size: 14px; font-weight: 500; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .2s; }
.nx-sel select:hover { border-color: var(--ink-soft); }
.nx-sel select:focus { outline: 0; border-color: var(--baize-3); box-shadow: 0 0 0 4px rgba(57,103,106,.12); }
.nx-sel > svg { position: absolute; right: 14px; bottom: 16px; width: 16px; height: 16px; pointer-events: none; color: var(--ink-mute); }
.nx-sel.sm select { height: 40px; width: 100%; }
.nx-sel.sm > svg { bottom: 12px; }
.nx-view { height: 48px; }
.nx-view button { width: 44px; display: grid; place-items: center; }
.nx-view svg { width: 17px; height: 17px; }
.nx-chips { margin-top: 18px; }
.nx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 18px 0 6px; font-size: 14px; color: var(--ink-soft); min-height: 30px; }
.nx-meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-meta > span:first-child { margin-right: 6px; }
.nx-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px; border-radius: var(--pill); background: var(--deep); color: var(--on-dark); font-size: 13px; font-weight: 500; transition: background .2s; }
.nx-pill:hover { background: var(--baize); }
.nx-pill svg { width: 13px; height: 13px; opacity: .8; }
.nx-grid { margin-top: 24px; }
.nx-arch { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.nx-list { display: grid; gap: 10px; margin-top: 20px; }
.nx-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 44px; gap: 20px; align-items: center; padding: 12px 18px 12px 12px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-soft); cursor: pointer; transition: transform .45s var(--ease-card), box-shadow .45s var(--ease-card), border-color .3s; }
.nx-row:hover { transform: translateY(-2px); border-color: rgba(214,169,58,.45); box-shadow: 0 18px 36px -24px rgba(12,30,32,.4); }
.nx-thumb { aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--ivory); }
.nx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.nx-row:hover .nx-thumb img { transform: scale(1.06); }
.nx-rb { display: grid; gap: 6px; min-width: 0; }
.nx-rm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); }
.nx-rb h4 { font-size: 19px; line-height: 1.2; }
.nx-rb p { font-size: 14px; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); transition: background .3s, color .3s, transform .3s var(--ease); }
.nx-go svg { width: 16px; height: 16px; }
.nx-row:hover .nx-go { background: var(--gold-2); color: var(--deep); transform: translateX(3px); }
mark { background: linear-gradient(transparent 40%, rgba(214,169,58,.45) 40%); color: inherit; padding: 0 1px; border-radius: 2px; }
.nx-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 44px; flex-wrap: wrap; }
.nx-pager button { min-width: 42px; height: 42px; padding: 0 6px; border-radius: 21px; display: grid; place-items: center; font: 500 13.5px var(--f-mono); border: 1px solid var(--line); background: var(--paper); transition: all .2s; }
.nx-pager button:hover:not(:disabled):not(.on) { border-color: var(--ink); }
.nx-pager button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nx-pager button:disabled { opacity: .35; cursor: default; }
.nx-pager svg { width: 16px; height: 16px; }
.nx-pager .gap { padding: 0 4px; color: var(--ink-mute); }
.nx-pg-t { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--ink-mute); margin-top: 6px; }
.nx-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nx-yr { display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-align: left; transition: transform .4s var(--ease-card), border-color .3s, box-shadow .4s, background .3s, color .3s; }
.nx-yr b { font: 400 28px/1 var(--f-display); letter-spacing: -.02em; }
.nx-yr .mono { font-size: 11.5px; color: var(--ink-mute); }
.nx-spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: 8px; }
.nx-spark i { flex: 1; border-radius: 2px; background: #d8d0bd; transition: background .3s; }
.nx-yr:hover { transform: translateY(-3px); border-color: var(--baize); background: var(--deep); color: var(--on-dark); box-shadow: 0 18px 34px -22px rgba(12,30,32,.6); }
.nx-yr:hover .mono { color: var(--on-dark-mute); }
.nx-yr:hover .nx-spark i { background: var(--gold-2); }
@media (max-width: 1000px) { .nx-tools { grid-template-columns: 1fr 1fr 1fr; position: static; } .nx-search { grid-column: 1 / -1; } .nx-view { display: none; } }
@media (max-width: 600px) { .nx-tools { grid-template-columns: 1fr 1fr; padding: 10px; } .nx-sel select { min-width: 0; width: 100%; } .nx-sel:last-of-type { grid-column: 1 / -1; } .nx-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; } .nx-go { display: none; } .nx-rb h4 { font-size: 16px; } .nx-rb p { display: none; } }

/* ---------- search results page ---------- */
.sx-top { padding: calc(var(--header-h) * 0 + 36px) 0 0; background: var(--ivory); border-bottom: 1px solid var(--line); }
.sx-top .crumbs { margin-bottom: 18px; }
.sx-form { max-width: 860px; gap: 10px; }
.sx-form input { height: 60px; font-size: 18px; padding-left: 50px; background: #fff; box-shadow: 0 14px 30px -24px rgba(18,20,18,.5); }
.sx-form .nx-si { left: 20px; }
.sx-form .btn { position: absolute; right: 7px; height: 46px; }
.sx-tabs { display: flex; gap: 4px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.sx-tabs::-webkit-scrollbar { display: none; }
.sx-tabs button { flex: none; padding: 12px 14px 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); border-bottom: 2.5px solid transparent; transition: color .2s, border-color .2s; }
.sx-tabs button .ct { font: 500 11.5px var(--f-mono); color: var(--ink-mute); margin-left: 3px; }
.sx-tabs button:hover:not(:disabled) { color: var(--ink); }
.sx-tabs button.on { color: var(--ink); border-color: var(--baize-3); font-weight: 600; }
.sx-tabs button:disabled { opacity: .4; cursor: default; }
.sx-sec { padding-block: 32px 80px; }
.sx-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.sx-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 22px; }
.sx-side:empty { display: none; }
.sx-f { display: grid; gap: 4px; }
.sx-f h5 { margin: 0 0 6px; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.sx-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; text-align: left; transition: background .2s; }
.sx-opt span { display: inline-flex; align-items: center; gap: 8px; }
.sx-opt i:not(.ball) { font: normal 500 11.5px var(--f-mono); color: var(--ink-mute); }
.sx-opt:hover:not(:disabled) { background: var(--ivory); }
.sx-opt.on { background: var(--deep); color: var(--on-dark); }
.sx-opt.on i:not(.ball) { color: var(--gold-2); }
.sx-opt:disabled { opacity: .35; cursor: default; }
.sx-f .seg { display: flex; }
.sx-f .seg button { flex: 1; white-space: nowrap; font-size: 13px; padding: 0 8px; }
.sx-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-soft); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sx-meta b { color: var(--ink); }
.sx-meta .mono { font-size: 12px; color: var(--ink-mute); }
.sx-dym { margin: 14px 0 0; font-size: 15px; }
.sx-dym .lnk-btn { font-style: italic; font-weight: 600; }
.sx-best { margin-top: 22px; padding: 16px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--gold-soft), #fff 70%); border: 1px solid #ecd9a6; }
.sx-best .eyebrow { display: block; margin-bottom: 4px; color: #7a5a06; }
.sx-best .sx-r { border: 0; background: transparent; padding: 8px 0 0; }
.sx-group { margin-top: 30px; display: grid; gap: 2px; }
.sx-group.flat { margin-top: 16px; }
.sx-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sx-gh h3 { font-size: 24px; }
.sx-gh h3 .mono { font-size: 12px; color: var(--ink-mute); margin-left: 6px; letter-spacing: 0; }
.sx-r { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px 14px; margin-inline: -14px; border-radius: var(--r); cursor: pointer; transition: background .25s; }
.sx-r:hover { background: #fff; box-shadow: 0 14px 30px -26px rgba(18,20,18,.5); }
.sx-r:hover h4 { color: var(--baize-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sx-th { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ivory); }
.sx-th img { width: 100%; height: 100%; object-fit: cover; }
.sx-dt { aspect-ratio: 1; border-radius: 12px; background: var(--deep); color: var(--on-dark); display: grid; place-content: center; text-align: center; }
.sx-dt b { font: 300 28px/1 var(--f-display); color: var(--gold-2); }
.sx-dt span { font: 500 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.sx-av { aspect-ratio: 1; border-radius: 50%; background: var(--baize); color: var(--gold-2); display: grid; place-items: center; font: 400 22px var(--f-display); }
.sx-ic { aspect-ratio: 1; border-radius: 12px; background: var(--ivory); color: var(--baize); display: grid; place-items: center; }
.sx-ic svg { width: 24px; height: 24px; }
.sx-b { display: grid; gap: 4px; min-width: 0; }
.sx-path { font: 12px var(--f-mono); color: var(--ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-b h4 { font-size: 20px; line-height: 1.2; transition: color .2s; }
.sx-b p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.sx-b .sx-meta { border: 0; }
.sx-b .sx-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0 0; font-size: 12px; justify-content: flex-start; }
.sx-empty { padding: 20px 0; display: grid; gap: 22px; max-width: 720px; }
.sx-empty h2 { font-size: clamp(34px, 4vw, 52px); }
.sx-sug h5 { margin: 0 0 10px; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.sx-sug .chip svg { width: 14px; height: 14px; margin-right: 4px; }
@media (max-width: 900px) { .sx-grid { grid-template-columns: 1fr; gap: 20px; } .sx-side { position: static; display: none; } .sx-form input { height: 54px; font-size: 16px; padding-right: 110px; } .sx-form .btn { height: 42px; } .sx-r { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; } .sx-b h4 { font-size: 17px; } }

/* ---------- event rows: deep green on hover, colours inverted ---------- */
.ev-row { position: relative; isolation: isolate; overflow: hidden; transition: transform .5s var(--ease-card), box-shadow .5s var(--ease-card), border-color .35s ease, color .35s ease; }
.ev-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 160% at 0% 0%, #2a5a5d 0%, var(--baize) 42%, var(--deep) 100%); clip-path: inset(0 100% 0 0 round var(--r-lg)); transition: clip-path .6s var(--ease-card); }
.ev-row::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(214,169,58,.22), transparent 70%); opacity: 0; transition: opacity .6s; }
.ev-row > * { transition: color .35s ease, border-color .35s ease; }
.ev-row:hover, .ev-row:focus-visible { border-color: var(--baize); color: var(--on-dark); transform: translateY(-3px); box-shadow: 0 24px 44px -24px rgba(12,30,32,.7); }
.ev-row:hover::before, .ev-row:focus-visible::before { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.ev-row:hover::after { opacity: 1; }
.ev-row:hover .ev-date { border-color: rgba(214,169,58,.35); }
.ev-row:hover .ev-date b { color: var(--gold-2); }
.ev-row:hover .ev-date span, .ev-row:hover .ev-meta, .ev-row:hover .ev-fill { color: var(--on-dark-soft); }
.ev-row:hover .ev-main h4 { color: #fff; }
.ev-row:hover .ev-main .badge { background: rgba(244,240,230,.12); color: var(--on-dark); }
.ev-row:hover .ev-side .badge.green { background: rgba(63,191,115,.2); color: #8ee3b1; }
.ev-row:hover .ev-side .badge.gold { background: rgba(214,169,58,.2); color: var(--gold-2); }
.ev-row:hover .ev-side .badge:not(.green):not(.gold) { background: rgba(244,240,230,.14); color: var(--on-dark); }
.ev-row:hover .ev-fill .bar { background: rgba(244,240,230,.18); }
.ev-row:hover .ev-fill .bar i { background: var(--gold-2); }
.ev-row:hover .ev-go { background: var(--gold-2); color: var(--deep); transform: translateX(3px); }
.ev-go { transition: background .35s, color .35s, transform .45s var(--ease-card); }

/* flows — full-screen booking, joining and application flows */
body.mode-full { background: var(--paper); }
body.mode-full .a11y-fab { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
body.mode-full.fl-nofoot .a11y-fab { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 860px) { body.mode-full .a11y-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; right: 12px; } body.mode-full.fl-nofoot .a11y-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
.flow { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }

/* rail */
.fl-rail { position: relative; overflow: hidden; isolation: isolate; background: var(--deep); color: var(--on-dark); padding: 28px 30px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto; }
.fl-rail-bg { position: absolute; inset: 0; z-index: -1; opacity: .45; }
.fl-rail-bg svg { width: 100%; height: 100%; }
.fl-rail::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,30,32,.86), rgba(12,30,32,.97) 55%); }
.fl-brand { color: var(--on-dark); }
.fl-brand .brand-txt span { color: var(--on-dark-mute); }
.fl-head { display: grid; gap: 12px; }
.fl-head h2 { font-size: 34px; }
.fl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
.fl-steps li { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 12px; color: var(--on-dark-mute); font-size: 14.5px; position: relative; }
.fl-steps li + li::before { content: ""; position: absolute; left: 25px; top: -8px; height: 12px; width: 1px; background: var(--felt-line); }
.fl-steps li[data-fl-to] { cursor: pointer; }
.fl-steps li[data-fl-to]:hover { background: rgba(244,240,230,.06); }
.fs-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--felt-line); display: grid; place-items: center; font-size: 12px; flex-shrink: 0; transition: all .3s var(--ease); }
.fs-n svg { width: 14px; height: 14px; }
.fl-steps li.on { color: var(--on-dark); background: rgba(244,240,230,.07); }
.fl-steps li.on .fs-n { background: var(--gold-2); border-color: var(--gold-2); color: var(--deep); box-shadow: 0 0 0 5px rgba(214,169,58,.18); }
.fl-steps li.done { color: var(--on-dark-soft); }
.fl-steps li.done .fs-n { background: var(--baize-3); border-color: var(--baize-3); color: #fff; }
.fl-sum { margin-top: auto; padding: 20px; border-radius: var(--r-lg); background: rgba(244,240,230,.06); border: 1px solid var(--felt-line); display: grid; gap: 14px; }
.fl-sum:empty { display: none; }
.fl-sum .eyebrow { color: var(--gold-2); font-size: 10.5px; }
.fs-rows { display: grid; gap: 8px; }
.fs-rows > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.fs-rows span { color: var(--on-dark-mute); white-space: nowrap; }
.fs-rows b { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--felt-line); }
.fs-total span { font-size: 13px; color: var(--on-dark-soft); }
.fs-total b { font-size: 24px; color: var(--gold-2); font-weight: 500; }
.fs-small { font-size: 12px; color: var(--on-dark-mute); }
.fl-help { font-size: 12.5px; color: var(--on-dark-mute); display: flex; gap: 8px; align-items: center; }
.fl-help svg { width: 14px; height: 14px; }

/* main column */
.fl-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: var(--paper); }
.fl-top { display: flex; align-items: center; gap: 20px; padding: 18px clamp(20px, 4vw, 48px); border-bottom: 1px solid var(--line-soft); }
.fl-prog { flex: 1; display: grid; gap: 8px; }
.fl-prog .mono { font-size: 11.5px; color: var(--ink-mute); letter-spacing: .04em; }
.fl-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fl-bar i { display: block; height: 100%; background: var(--baize); border-radius: 2px; transition: width .6s var(--ease); }
.fl-body { overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.fl-inner { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px) 48px; }
.fl-inner.fl-in > * { animation: flIn .5s var(--ease) both; }
.fl-inner.fl-in > *:nth-child(2) { animation-delay: .05s; }
.fl-inner.fl-in > *:nth-child(3) { animation-delay: .1s; }
@keyframes flIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fl-title { display: grid; gap: 12px; margin-bottom: 32px; }
.fl-title h1 { font-size: clamp(36px, 4.4vw, 60px); }
.fl-title .lead { font-size: 17px; }
.fl-title .eyebrow { color: var(--gold); }
.fl-foot { display: flex; align-items: center; gap: 16px; padding: 16px clamp(20px, 4vw, 48px) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(251,250,246,.96); backdrop-filter: blur(10px); }
.fl-foot-sum { flex: 1; display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; font-size: 13.5px; color: var(--ink-mute); min-width: 0; }
.fl-foot-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-foot-sum b { font-size: 22px; color: var(--ink); font-weight: 500; }
.fl-foot .btn-lg { min-width: 200px; }
.btn.is-soft { opacity: .55; }
.fl-h3 { font-size: 22px; margin: 36px 0 16px; }
.fl-card { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); }
.gh { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.gh h4 { font-size: 22px; display: flex; gap: 10px; align-items: center; }
.gh .badge svg { width: 12px; height: 12px; }
.inp.fake { display: flex; align-items: center; background: var(--ivory); color: var(--ink-soft); }
.seg.big { display: inline-flex; }
.seg.big button { height: 48px; padding: 0 26px; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.seg.big button svg { width: 17px; height: 17px; }

/* member card in flow */
.who { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-xl); background: var(--ivory); }
.who > div { display: grid; gap: 2px; min-width: 0; }
.who b { font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.who span:not(.badge):not(.mono-av) { font-size: 13px; color: var(--ink-mute); }
.who .badge svg { width: 12px; height: 12px; }
@media (max-width: 560px) { .who { grid-template-columns: auto 1fr; } .who .badge { grid-column: 1 / -1; justify-self: start; } }

/* calendar picker */
.cal-pick { border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(16px, 2.5vw, 26px); background: var(--paper); }
.cp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cp-head h3 { font-size: 28px; }
.cp-head .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.cp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cp-dow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); text-align: center; padding-bottom: 6px; }
.cd-c { aspect-ratio: 1; min-height: 52px; border-radius: var(--r); border: 1px solid var(--line); display: grid; place-items: center; align-content: center; gap: 2px; background: var(--paper); transition: all .2s var(--ease); }
.cd-c b { font-size: clamp(15px, 1.6vw, 20px); font-weight: 500; }
.cd-c span { font-size: 10.5px; color: var(--ok); }
.cd-c:not(.off):hover { border-color: var(--baize); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.cd-c.on { background: var(--baize); border-color: var(--baize); color: var(--on-dark); box-shadow: 0 10px 24px rgba(26,58,61,.25); }
.cd-c.on span { color: var(--gold-2); }
.cd-c.today:not(.on) { border-color: var(--gold-2); }
.cd-c.off { background: var(--ivory); border-color: transparent; color: #b4b8b0; cursor: not-allowed; }
.cd-c.off span { color: #b4b8b0; }
.cd-c.pad { border: 0; background: none; }
@media (max-width: 520px) { .cd-c span { display: none; } .cp-grid { gap: 5px; } .cd-c { min-height: 40px; } }

/* tables */
.tbl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tcard { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 18px 18px 16px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--paper); transition: all .25s var(--ease); overflow: hidden; }
.tcard::before { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3d8487, #1a3a3d 70%); opacity: .12; transition: opacity .3s, transform .5s var(--ease); }
.tcard:hover { border-color: var(--baize); transform: translateY(-2px); }
.tcard:hover::before { opacity: .25; transform: scale(1.2); }
.tcard.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 4px rgba(26,58,61,.1); }
.tcard.full { opacity: .5; cursor: not-allowed; }
.tc-n { font-size: 11px; color: var(--ink-mute); }
.tc-t { font-family: var(--f-display); font-size: 21px; }
.tc-m { font-size: 12.5px; color: var(--ink-mute); }
.tcard b { font-size: 18px; font-weight: 500; margin-top: 8px; }
.tcard b small { font-size: 12px; color: var(--ink-mute); font-weight: 400; }
.tcard .badge { margin-top: 6px; height: 22px; font-size: 10.5px; }
.tcard .badge svg { width: 11px; height: 11px; }
.tc-free { font-size: 11.5px; color: var(--ok); margin-top: 6px; }
@media (max-width: 900px) { .tbl-cards { grid-template-columns: 1fr 1fr; } }
.slot-empty { margin-top: 20px; padding: 40px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-xl); color: var(--ink-mute); display: grid; justify-items: center; gap: 10px; }
.slot-empty svg { width: 34px; height: 34px; opacity: .5; }
.slot-panel { margin-top: 20px; padding: clamp(18px, 2.5vw, 26px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); }
.sp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.sp-head h3 { font-size: 24px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-mute); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg-free { background: #e3f1e8; border: 1px solid #a9d3b8; }
.lg-on { background: var(--baize); }
.lg-tk { background: repeating-linear-gradient(135deg, #f3d5d2 0 3px, #fbeeec 3px 6px); }
.lg-past { background: var(--ivory); border: 1px solid var(--line); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sl { display: grid; gap: 2px; padding: 12px 6px; border-radius: 12px; border: 1px solid #a9d3b8; background: #f1f8f3; text-align: center; transition: all .2s var(--ease); }
.sl b { font-size: 15px; font-weight: 500; }
.sl span { font-size: 11px; color: var(--ok); }
.sl:not([disabled]):hover { background: #e0f0e6; transform: translateY(-1px); }
.sl.on { background: var(--baize); border-color: var(--baize); color: var(--on-dark); box-shadow: 0 6px 16px rgba(26,58,61,.25); }
.sl.on span { color: var(--gold-2); }
.sl.taken { background: repeating-linear-gradient(135deg, #fbeeec 0 6px, #f7e2df 6px 12px); border-color: #f0d0cb; color: #b88f8a; cursor: not-allowed; }
.sl.taken span { color: #c07a72; }
.sl.past { background: var(--ivory); border-color: var(--line-soft); color: #b4b8b0; cursor: not-allowed; }
.sl.past span { color: #b4b8b0; }
.sel-bar { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r); background: #eef4ff; color: var(--chalk); }
.sel-bar > div { display: grid; }
.sel-bar .mono { font-size: 13px; }
.sel-bar .lnk-btn { color: var(--chalk); }
.sp-hint { margin-top: 14px; font-size: 13px; color: var(--ink-mute); }

/* price breakdown */
.price-box { margin-top: 20px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); background: var(--ivory); display: grid; gap: 4px; }
.price-box.empty p { color: var(--ink-mute); font-size: 14px; }
.price-box.big { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pb-head .eyebrow { color: var(--gold); }
.pr-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.pr-row span { color: var(--ink-soft); }
.pr-row b { font-weight: 500; white-space: nowrap; }
.pr-row.minus b { color: var(--ok); }
.pr-row.total { border-bottom: 0; padding-top: 16px; align-items: baseline; }
.pr-row.total span { color: var(--ink); font-weight: 600; font-size: 16px; }
.pr-row.total b { font-size: 30px; color: var(--baize); }
.pb-note { font-size: 13px; color: var(--ink-mute); line-height: 1.55; margin-top: 4px; }

/* guests */
.guest { display: grid; grid-template-columns: 28px 1fr 1fr 44px; gap: 10px; align-items: center; margin-bottom: 10px; }
.guest .inp { height: 46px; }
.g-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e3f1e8; color: var(--ok); font-size: 11.5px; }
.add-g { display: inline-flex; gap: 8px; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--r); border: 1.5px dashed #b9c9bd; color: var(--baize); font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.add-g:hover { border-color: var(--baize); background: #f1f7f3; }
.add-g svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .guest { grid-template-columns: 28px 1fr 44px; } .guest .inp:nth-of-type(2) { grid-column: 2; } }

/* review */
.review { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); background: var(--ivory); display: grid; gap: 16px; justify-items: start; }
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; width: 100%; }
.rv-grid > div { display: grid; gap: 2px; min-width: 0; }
.rv-grid span { font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; font-family: var(--f-mono); }
.rv-grid b { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .rv-grid { grid-template-columns: 1fr; } }

/* done */
.done-card { display: grid; gap: 20px; justify-items: center; text-align: center; padding-block: 12px 24px; }
.done-card h1 { font-size: clamp(40px, 5vw, 72px); }
.done-card .lead { max-width: 52ch; }
.done-card.wide { text-align: left; justify-items: stretch; }
.done-act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.done-card.wide .done-act { justify-content: flex-start; }
.pass { display: flex; gap: 28px; align-items: center; justify-content: space-between; padding: 22px 26px; border-radius: var(--r-xl); background: var(--deep); color: var(--on-dark); width: 100%; max-width: 520px; text-align: left; position: relative; }
.pass::before, .pass::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); transform: translateY(-50%); }
.pass::before { left: -11px; } .pass::after { right: -11px; }
.pass-l { display: grid; gap: 4px; }
.pass-l .eyebrow { color: var(--gold-2); font-size: 10px; }
.pass-l b { font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.pass-l .mono { font-size: 12.5px; color: var(--on-dark-soft); }
.pass .mc-qr { width: 88px; height: 88px; }
.pr-mini { width: 100%; max-width: 520px; }
.next-steps { list-style: none; counter-reset: n; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 560px; text-align: left; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--ivory); }
.next-steps li::before { content: counter(n); grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 50%; background: var(--baize); color: var(--on-dark); display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; }
.next-steps b { font-weight: 600; }
.next-steps span { font-size: 13.5px; color: var(--ink-soft); }
.welcome { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.welcome > div:first-child { display: grid; gap: 20px; }
.welcome-card { display: grid; gap: 14px; justify-items: center; }
.welcome-card .mcard { transform: rotate(-3deg); animation: cardIn 1s var(--ease) both .2s; }
@keyframes cardIn { from { opacity: 0; transform: rotate(-12deg) translateY(30px) scale(.94); } to { opacity: 1; transform: rotate(-3deg); } }
@media (max-width: 1100px) { .welcome { grid-template-columns: 1fr; } .welcome-card { order: -1; } }

/* coaching */
.coach-list { display: grid; gap: 12px; }
.coach-opt { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px; border-radius: var(--r-xl); border: 1.5px solid var(--line); text-align: left; background: var(--paper); transition: all .2s; }
.coach-opt.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 4px rgba(26,58,61,.08); }
.co-b { display: grid; gap: 4px; }
.co-b b { font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.co-b > span:nth-child(2) { font-size: 13.5px; color: var(--ink-mute); }
.co-b .chips { margin-top: 6px; gap: 6px; }
.coach-opt .o-tick, .tp .o-tick { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.coach-opt .o-tick svg, .tp .o-tick svg { width: 13px; height: 13px; opacity: 0; color: #fff; }
.coach-opt.on .o-tick, .tp.on .o-tick { background: var(--baize); border-color: var(--baize); }
.coach-opt.on .o-tick svg, .tp.on .o-tick svg { opacity: 1; }
@media (max-width: 560px) { .coach-opt { grid-template-columns: auto 1fr; } .coach-opt .o-tick { position: absolute; top: 16px; right: 16px; } }
.dur-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dur { display: grid; gap: 4px; padding: 18px; border-radius: var(--r-lg); border: 1.5px solid var(--line); text-align: left; background: var(--paper); transition: all .2s; }
.dur span { font-weight: 600; font-size: 15px; }
.dur b { font-size: 26px; font-weight: 500; }
.dur small { font-size: 12px; color: var(--ink-mute); }
.dur:hover { border-color: #c9c2b0; }
.dur.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 4px rgba(26,58,61,.08); }
.day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day, .day-strip .day { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); transition: all .2s; min-width: 0; }
.day span { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.day b { font-size: 20px; font-weight: 500; }
.day:not(.closed):hover { border-color: var(--baize); }
.day.on { background: var(--baize); border-color: var(--baize); color: var(--on-dark); }
.day.on span { color: var(--gold-2); }
.day.closed { background: var(--ivory); color: #b4b8b0; border-color: transparent; cursor: not-allowed; }
@media (max-width: 520px) { .day-grid { gap: 4px; } .day b { font-size: 16px; } .day span { font-size: 9.5px; } }

/* join: tiers */
.tier-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.tp { position: relative; display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-xl); border: 1.5px solid var(--line); background: var(--paper); text-align: left; transition: all .25s var(--ease); }
.tp .o-tick { position: absolute; top: 18px; right: 18px; }
.tp:not(.dis):hover { border-color: #c9c2b0; transform: translateY(-2px); }
.tp.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 4px rgba(26,58,61,.08); }
.tp.dis { opacity: .45; cursor: not-allowed; }
.tp-n { font-family: var(--f-display); font-size: 26px; }
.tp-p { display: flex; align-items: baseline; gap: 6px; }
.tp-p b { font-size: 32px; font-weight: 500; }
.tp-p small { font-size: 12.5px; color: var(--ink-mute); }
.tp-d { font-size: 13.5px; color: var(--ink-mute); min-height: 40px; }
.tp .ticks li { font-size: 13px; }
@media (max-width: 640px) { .tier-pick { grid-template-columns: 1fr; } }

/* club application */
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.stepper { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.stepper .lbl { font-size: 14px; font-weight: 600; }
.band-live { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.bl { padding: 14px; border-radius: var(--r); background: var(--ivory); display: grid; gap: 2px; transition: all .25s var(--ease); }
.bl span { font-size: 12px; color: var(--ink-mute); }
.bl b { font-size: 18px; font-weight: 500; }
.bl.on { background: var(--deep); color: var(--on-dark); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.bl.on span { color: var(--gold-2); }
@media (max-width: 640px) { .steppers { grid-template-columns: 1fr; } .band-live { grid-template-columns: 1fr 1fr; } }

/* responsive shell */
@media (max-width: 1100px) { .flow { grid-template-columns: 300px minmax(0, 1fr); } .fl-rail { padding: 24px; } .fl-head h2 { font-size: 28px; } }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fl-rail { padding: 14px 16px; gap: 0; flex-direction: row; align-items: center; justify-content: space-between; overflow: visible; }
  .fl-rail .brand-txt, .fl-head .eyebrow, .fl-steps, .fl-sum, .fl-help { display: none; }
  .fl-head h2 { font-size: 20px; }
  .fl-brand .brand-mark { width: 34px; height: 34px; }
  .fl-main { min-height: 0; }
  .fl-top { padding: 12px 16px; }
  .fl-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .fl-foot .btn-lg { min-width: 0; flex: 1; height: 50px; }
  .fl-foot [data-fl-back] span { display: none; }
  .fl-foot [data-fl-back] { padding: 0 16px; }
  .fl-foot-sum { display: none; }
}
@media (max-width: 860px) { .fl-foot:has(.fl-foot-sum:not(:empty)) .fl-foot-sum { display: none; } }
/* club registration */
.perk-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 28px; }
.perk-strip span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--ivory); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.perk-strip svg { width: 18px; height: 18px; color: var(--baize); flex-shrink: 0; }
@media (max-width: 700px) { .perk-strip { grid-template-columns: 1fr 1fr; } }
.gh h4 svg { width: 20px; height: 20px; color: var(--baize); }
.chips.fac .chip { height: 42px; }
.chips.fac .chip svg { width: 14px; height: 14px; }
.logo-drop { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg); border: 1.5px dashed #c9c2b0; cursor: pointer; transition: border-color .2s, background .2s; }
.logo-drop:hover { border-color: var(--baize); background: #f6faf7; }
.logo-drop img, .ld-ico { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.ld-ico { display: grid; place-items: center; background: var(--ivory); color: var(--baize); }
.ld-ico svg { width: 26px; height: 26px; }
.logo-drop span:last-child { display: grid; gap: 2px; }
.logo-drop small { font-size: 12.5px; color: var(--ink-mute); }
.club-preview { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-xl); background: var(--deep); color: var(--on-dark); margin-bottom: 16px; }
.club-preview h3 { font-size: 28px; margin: 4px 0; }
.club-preview .eyebrow { color: var(--gold-2); font-size: 10px; }
.club-preview > div > span:not(.eyebrow) { font-size: 13.5px; color: var(--on-dark-soft); }
.cp-logo { width: 84px; height: 84px; border-radius: 20px; overflow: hidden; background: var(--baize-2); display: grid; place-items: center; font-family: var(--f-display); font-size: 30px; }
.cp-logo img { width: 100%; height: 100%; object-fit: cover; }
.rv-sec { padding: 20px 22px; border-radius: var(--r-xl); border: 1px solid var(--line); margin-bottom: 12px; background: var(--paper); }
.rv-sec-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.rv-sec-h h4 { font-size: 20px; }
.rv-grid .wide { grid-column: 1 / -1; }

/* ---------- payment method picker (shared by every checkout) ---------- */
.pay { display: grid; gap: 14px; }
.pay-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pay-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); text-align: left; transition: border-color .2s, background .2s, box-shadow .2s; }
.pay-opt:hover { border-color: #c9c2b0; }
.pay-opt.on { border-color: var(--baize); background: #f3f8f4; box-shadow: 0 0 0 4px rgba(26,58,61,.08); }
.pay-opt b, .pay-one b { display: block; font-size: 14.5px; font-weight: 600; }
.pay-opt small, .pay-one small { display: block; font-size: 12px; color: var(--ink-mute); line-height: 1.35; margin-top: 2px; }
.pay-opt .o-tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.pay-opt .o-tick svg { width: 12px; height: 12px; opacity: 0; }
.pay-opt.on .o-tick { background: var(--baize); border-color: var(--baize); color: #fff; }
.pay-opt.on .o-tick svg { opacity: 1; }
.pay-one { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--ivory); }
.po-mark { width: 44px; height: 30px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; background: var(--ivory); color: var(--baize); border: 1px solid var(--line); overflow: hidden; }
.po-mark svg { width: 100%; height: 100%; }
.po-mark.bank svg, .po-mark.cash svg { width: 18px; height: 18px; }
.po-mark.card, .po-mark.paypal { border: 0; }
.pay-body { display: grid; gap: 12px; }
.pay-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: var(--ivory); font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.pay-note svg { width: 18px; height: 18px; color: var(--baize); flex-shrink: 0; margin-top: 1px; }
.pay-note.warn { background: var(--gold-soft); color: #5e4608; }
.pay-note.warn svg { color: #8a6408; }
.bank-box { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 18px 20px; border-radius: var(--r); border: 1px dashed #c9c2b0; background: var(--paper); text-align: left; }
.bank-box > div { display: grid; gap: 2px; min-width: 0; }
.bank-box span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--f-mono); }
.bank-box b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bank-box > div:first-child:nth-last-child(5) { grid-column: 1 / -1; }
.bank-box.wide { width: 100%; max-width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.done-ico.warn { background: var(--gold); box-shadow: 0 0 0 10px rgba(214,169,58,.16); }
.slots.wide { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 520px) { .bank-box { grid-template-columns: 1fr; } }

/* PayPal simulation */
.pp-sim { display: grid; gap: 16px; justify-items: center; text-align: center; }
.pp-logo { font: italic 800 30px/1 Arial, sans-serif; color: #003087; letter-spacing: -.02em; }
.pp-logo::after { content: ""; }
.pp-acct { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); text-align: left; }
.pp-acct > div { display: grid; }
.pp-acct span:not(.mono-av) { font-size: 12.5px; color: var(--ink-mute); }
.pp-btn { background: #ffc439; color: #111; border: 0; font-weight: 700; }
.pp-btn:hover { background: #f2b52a; }

/* hosted payment-link page */
.paylink { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(100% 60% at 50% 0%, rgba(26,58,61,.08), transparent 60%), var(--ivory); }
.pl-card { width: min(560px, 100%); background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); padding: clamp(24px, 4vw, 40px); display: grid; gap: 10px; }
.pl-card h1 { font-size: clamp(30px, 4vw, 44px); }
.pl-card .done-ico { justify-self: start; }

/* prototype admin settings */
.as-hero { background: var(--deep); color: var(--on-dark); }
.as-hero .wrap { padding-block: clamp(32px, 4vw, 56px); display: grid; gap: 14px; }
.as-hero h1 { font-size: clamp(36px, 4.4vw, 56px); }
.as-hero .lead { max-width: 60ch; color: var(--on-dark-soft); }
.as-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.as-main, .as-side { display: grid; gap: 20px; min-width: 0; }
.as-side { position: sticky; top: calc(var(--header-h) + 20px); }
.as-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 12px; }
.as-card h3 { font-size: 22px; }
.as-sub { font-size: 13.5px; color: var(--ink-mute); margin-top: -6px; }
.as-card .set-row { padding-block: 12px; }
.as-card .set-row span { font-size: 12.5px; color: var(--ink-mute); }
.pend { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.pend > div { display: grid; gap: 3px; min-width: 0; }
.pend .badge { justify-self: start; }
.pend b { font-size: 14.5px; }
.pend span:not(.badge) { font-size: 12.5px; color: var(--ink-mute); }
.pend .pend-st { font-family: var(--f-mono); font-size: 11px !important; }
@media (max-width: 900px) { .as-grid { grid-template-columns: 1fr; } .as-side { position: static; } }

/* ================= streamlined booking pickers (v1.2.1) ================= */
.fl-ax { display: none; }
.pk-sec { display: grid; gap: 10px; margin-bottom: 22px; }
.pk-l { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.pk-l small { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--ink-soft); }
.pk-note { font-size: 12.5px; color: var(--ink-mute); margin: -2px 0 0; }
/* venue chips */
.vchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vchip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); text-align: left; min-width: 0; transition: border-color .3s, background .3s, box-shadow .3s; }
.vchip img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.vchip span { display: grid; min-width: 0; }
.vchip b { font-size: 14px; font-weight: 600; }
.vchip small { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vchip.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 3px rgba(26,58,61,.08); }
/* day strip */
.daysx { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: none; margin-inline: -2px; }
.daysx::-webkit-scrollbar { display: none; }
.dx { flex: 0 0 64px; display: grid; justify-items: center; gap: 2px; padding: 10px 0 9px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); scroll-snap-align: start; transition: all .3s var(--ease); }
.dx span { font-size: 11px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.dx b { font-size: 22px; font-weight: 500; line-height: 1.1; }
.dx small { font-size: 10.5px; color: var(--ink-mute); }
.dx.on { background: var(--deep); border-color: var(--deep); color: #fff; }
.dx.on span, .dx.on small { color: var(--gold-2); }
.dx.off { opacity: .45; }
/* length */
.seg.lens { display: flex; width: 100%; }
.seg.lens button { flex: 1; }
/* start times */
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.stm { display: grid; justify-items: center; gap: 1px; padding: 10px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); transition: all .25s var(--ease); }
.stm b { font-size: 15px; font-weight: 600; }
.stm small { font-size: 10.5px; color: var(--ok, #1b7a45); }
.stm:hover { border-color: #c9c2b0; }
.stm.on { background: var(--baize); border-color: var(--baize); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(26,58,61,.2); }
.stm.on small { color: var(--gold-2); }
/* table list */
.tlist { display: grid; gap: 8px; }
.tro { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 24px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); text-align: left; transition: all .3s var(--ease); }
.tl-n { width: 40px; height: 40px; border-radius: 10px; background: var(--ivory); display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--baize); }
.tl-b { display: grid; min-width: 0; } .tl-b b { font-size: 15px; font-weight: 600; } .tl-b small { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-p { display: grid; justify-items: end; } .tl-p b { font-size: 15px; } .tl-p small { font-size: 11px; color: var(--ink-mute); }
.tro .o-tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.tro .o-tick svg { width: 12px; height: 12px; opacity: 0; color: #fff; }
.tro.on { border-color: var(--baize); background: #f1f7f3; box-shadow: 0 0 0 3px rgba(26,58,61,.08); }
.tro.on .tl-n { background: var(--baize); color: #fff; }
.tro.on .o-tick { background: var(--baize); border-color: var(--baize); } .tro.on .o-tick svg { opacity: 1; }
.pk-price { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 0 16px; }
.pk-price > summary { cursor: pointer; padding: 14px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pk-price > summary::-webkit-details-marker { display: none; }
.pk-price > summary::after { content: "+"; font-size: 18px; color: var(--ink-mute); transition: transform .3s var(--ease); }
.pk-price[open] > summary::after { transform: rotate(45deg); }
.pk-price > summary em { font-style: normal; font-weight: 400; color: var(--ink-mute); margin-left: 6px; }
.pk-price .price-box { margin: 0 0 16px; }
/* review card */
.rvc { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; }
.rvc-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--ivory); }
.rvc-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--baize); color: #fff; display: grid; place-items: center; } .rvc-ico svg { width: 20px; height: 20px; }
.rvc-top > div { display: grid; min-width: 0; } .rvc-top b { font-size: 15.5px; font-weight: 600; } .rvc-top span { font-size: 13px; color: var(--ink-soft); }
.rvc-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.rvc-row > span { color: var(--ink-mute); font-size: 13px; }
.rvc-row b { font-weight: 600; text-align: right; } .rvc-row small { font-weight: 400; color: var(--ink-mute); font-size: 12px; }
.rvc-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.rvc-h { display: flex; justify-content: space-between; align-items: center; } .rvc-h span { color: var(--ink-mute); font-size: 13px; }
.rvc-mute { font-size: 13.5px; color: var(--ink-soft); }
.rvc textarea { min-height: 80px; }
.me-card { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--ivory); }
.me-card .mono-av { width: 42px; height: 42px; font-size: 16px; }
.me-card div { display: grid; min-width: 0; } .me-card b { font-weight: 600; } .me-card span { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg.wide2 { display: flex; width: 100%; max-width: 420px; } .seg.wide2 button { flex: 1; justify-content: center; }
.fl-h3.sm { font-size: 18px; margin: 24px 0 12px; }

/* ================= mobile flow chrome: compact app-style header + footer ================= */
@media (max-width: 860px) {
  .fl-rail { padding: 10px 16px; min-height: 52px; }
  .fl-head h2 { font-size: 18px; }
  .fl-top { padding: 8px 12px 8px 16px; gap: 8px; }
  .fl-prog { gap: 6px; } #flCount { font-size: 10.5px; }
  .fl-bar { height: 3px; }
  .fl-ax { display: grid; width: 38px; height: 38px; }
  .fl-ax svg { width: 18px; height: 18px; }
  .fl-x { width: 38px; height: 38px; }
  .fl-inner { padding: 18px 16px 28px; }
  .fl-title { gap: 6px; margin-bottom: 18px; }
  .fl-title .eyebrow { display: none; }
  .fl-title h1 { font-size: 30px; line-height: 1.05; }
  .fl-title .lead { font-size: 14.5px; }
  .fl-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .fl-foot .fl-foot-sum, .fl-foot:has(.fl-foot-sum:not(:empty)) .fl-foot-sum { display: grid; justify-items: start; gap: 0; font-size: 11.5px; line-height: 1.25; }
  .fl-foot-sum b { font-size: 18px; }
  .fl-foot-sum span { max-width: 100%; }
  .fl-foot .btn-lg { flex: none; min-width: 0; height: 50px; padding: 0 20px; }
  .fl-foot [data-fl-back] { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .fl-foot [data-fl-back][style*="hidden"] { display: none; }
  body.mode-full .a11y-fab { display: none !important; }
  .vchips { grid-template-columns: 1fr; }
  .vchip { padding: 7px; }
  .times { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .stm { padding: 9px 2px; } .stm b { font-size: 14px; }
  .seg.lens button { padding: 0 4px; font-size: 13px; }
  .tro { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px 12px; } .tro .o-tick { display: none; } .tl-n { width: 36px; height: 36px; }
  .coach-opt { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px; }
  .coach-opt .mono-av.lg { width: 48px; height: 48px; font-size: 18px; }
  .co-b b { font-size: 19px; } .co-b .chips { display: none; } .co-meta { font-size: 12px; }
  .dur-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .dur { padding: 12px; }
  .day-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .price-box { padding: 16px; }
  .rv-grid { gap: 10px; }
}
@media (max-width: 380px) { .times { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fl-foot .btn-lg { padding: 0 14px; font-size: 14px; } }
/* coaching day strip: always a horizontal scroller */
.day-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.day-strip::-webkit-scrollbar { display: none; }
.day-strip .day { flex: 0 0 66px; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; padding: 10px 0; border-radius: 14px; transition: all .3s var(--ease); }
@media (max-width: 860px) {
  .vchips { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
  .vchips::-webkit-scrollbar { display: none; }
  .vchip { flex: 0 0 auto; width: 210px; scroll-snap-align: start; }
  .slot-panel { padding: 14px; margin-top: 12px; }
  .sp-head h3 { font-size: 19px; }
  .slots.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* membership chooser (Carlow club here, SBI national on snookerscores.net) */
.mk { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-c { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--paper); text-align: left; color: inherit; text-decoration: none; transition: transform .5s var(--ease-card, var(--ease)), box-shadow .5s, border-color .3s; }
.mk-c:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(12,30,32,.12); border-color: var(--gold-2); }
.mk-c.on-club { background: var(--deep); color: var(--on-dark); border-color: var(--deep); }
.mk-tag { align-self: flex-start; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: rgba(214,169,58,.18); color: var(--gold-2); }
.mk-tag.ext { background: var(--ivory); color: var(--ink-soft); }
.mk-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ivory); color: var(--baize); }
.on-club .mk-ico { background: rgba(244,240,230,.1); color: var(--gold-2); }
.mk-ico svg { width: 22px; height: 22px; }
.mk-c b { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.mk-d { font-size: 14px; color: var(--ink-soft); } .on-club .mk-d { color: var(--on-dark-soft); }
.mk-c ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13.5px; }
.mk-c li { display: flex; gap: 8px; } .mk-c li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); margin-top: 8px; flex-shrink: 0; }
.mk-c .btn { margin-top: auto; align-self: flex-start; }
.tier-pick.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .mk { grid-template-columns: 1fr; } .tier-pick.three { grid-template-columns: 1fr; } .mk-c { padding: 18px; } .mk-c b { font-size: 22px; } }

/* mobile — tab bar, bottom sheet, swipe rows (phones) */
.m-tab { display: none; }
@media (max-width: 760px) {
  body.has-tab { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .m-tab { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(251,250,246,.94); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(18,20,18,.06); }
  .m-tab[hidden] { display: none; }
  .mt { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0 4px; font-size: 10.5px; font-weight: 600; color: var(--ink-mute); letter-spacing: .01em; }
  .mt svg { width: 22px; height: 22px; }
  .mt.on { color: var(--baize); }
  .mt.on::before { content: ""; position: absolute; top: -7px; width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--baize); }
  .mt-book i { width: 52px; height: 52px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-2); color: var(--deep); box-shadow: 0 8px 20px rgba(184,134,11,.35), 0 0 0 5px var(--paper); transition: transform .25s var(--ease); }
  .mt-book i svg { width: 24px; height: 24px; }
  .mt-book:active i { transform: scale(.92); }
  .mt-book span { color: var(--ink); }
  .mt-badge { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--crimson); color: #fff; font: 700 10px/17px var(--f-mono); text-align: center; }
  body.has-tab .a11y-fab { right: 14px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  body[data-route="product"] .a11y-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.has-tab .toasts { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body.has-tab .hdr-actions .cart-btn { display: none; }

  /* swipe rows instead of long stacks */
  .flips, .ibox-grid, .ibox-grid.four, .steps3, .steps4, .tiers, .courses, .ref-grid, .dis-grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 12px; padding-bottom: 6px; }
  .flips::-webkit-scrollbar, .ibox-grid::-webkit-scrollbar, .steps3::-webkit-scrollbar, .steps4::-webkit-scrollbar, .tiers::-webkit-scrollbar, .courses::-webkit-scrollbar, .ref-grid::-webkit-scrollbar, .dis-grid::-webkit-scrollbar { display: none; }
  .flips > *, .ibox-grid > *, .steps3 > *, .steps4 > *, .tiers > *, .courses > *, .ref-grid > *, .dis-grid > * { scroll-snap-align: start; }
  .flip, .flip-in { min-height: 250px; }
  .tier.feat { transform: none; }
  .tiers { padding-top: 14px; }
  .swipe-hint { display: flex; }

  /* tighter type and rhythm */
  :root { --section: 64px; }
  .sec-head { margin-bottom: 26px; gap: 16px; }
  .sec-head .sec-side .car-nav { display: none; }
  .hs { min-height: 0; }
  .hs-copy h1 { font-size: 46px; }
  .hs-act .btn-lg { height: 50px; padding: 0 20px; font-size: 14.5px; }
  .phero .wrap { padding-block: 36px 32px; }
  .phero h1 { font-size: 42px; }
  .phero .ph-meta { gap: 18px; }
  .phero .ph-stat b { font-size: 28px; }
  .subnav { top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
  .subnav .wrap { height: 52px; }
  .feature .ft-body h3 { font-size: 26px; }
  .ftr-cta h2 { font-size: 34px; }
  .ftr-word { display: none; }
  .ev-row { border-radius: var(--r); }
  .mosaic { gap: 10px; }
  .cta-band .cta-act { width: 100%; }
  .cta-band .cta-act .btn { flex: 1; }
}

/* hint shown under swipe rows */
.swipe-hint { display: none; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .06em; }
.swipe-hint svg { width: 14px; height: 14px; animation: nudge 1.6s ease-in-out infinite; }
.on-dark .swipe-hint { color: var(--on-dark-mute); }
@keyframes nudge { 50% { transform: translateX(4px); } }

/* bottom sheet */
.sheet-bg { position: fixed; inset: 0; z-index: 92; background: rgba(12,30,32,.45); opacity: 0; transition: opacity .3s; }
.sheet-bg.in { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 93; background: var(--paper); border-radius: 26px 26px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .38s var(--ease); max-height: 86vh; overflow-y: auto; box-shadow: 0 -20px 60px rgba(12,30,32,.25); }
.sheet.in { transform: none; }
.sh-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.sh-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sh-head h3 { font-size: 26px; }
.sh-list { display: grid; gap: 10px; }
.sh-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--ivory); cursor: pointer; }
.sh-item:active { background: var(--cream); }
.sh-item > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.sh-item b { font-weight: 600; font-size: 15.5px; }
.sh-item small { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-item > svg { width: 18px; height: 18px; color: var(--ink-mute); }
.sh-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--paper); color: var(--baize); display: grid; place-items: center; }
.sh-ico svg { width: 24px; height: 24px; }
.sh-ico.gold { background: var(--gold-2); color: var(--deep); }
.sh-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
@media (min-width: 761px) { .sheet { left: 50%; right: auto; width: 480px; margin-left: -240px; bottom: 24px; border-radius: 26px; } }

.m-a11y { display: none; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.m-a11y svg { width: 18px; height: 18px; color: var(--baize); }

/* portal — member dashboard shell */
.portal { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--ivory); }
.pt-side { background: var(--deep); color: var(--on-dark); display: flex; flex-direction: column; gap: 20px; padding: 22px 16px; overflow-y: auto; }
.pt-side .brand { padding: 0 8px; }
.pt-side .brand-txt span { color: var(--on-dark-mute); }
.pt-me { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: rgba(244,240,230,.06); border: 1px solid var(--felt-line); }
.pt-me .mono-av { background: var(--gold); width: 42px; height: 42px; font-size: 16px; }
.pt-me > div { display: grid; min-width: 0; }
.pt-me b { font-weight: 600; font-size: 14.5px; }
.pt-me span { font-size: 12px; color: var(--on-dark-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-nav { display: grid; gap: 18px; }
.pn-g { display: grid; gap: 2px; }
.pn-h { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mute); padding: 0 12px 6px; }
.pn-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--on-dark-soft); text-align: left; transition: background .15s, color .15s; position: relative; }
.pn-i svg { width: 18px; height: 18px; flex-shrink: 0; }
.pn-i:hover { background: rgba(244,240,230,.06); color: var(--on-dark); }
.pn-i.on { background: var(--on-dark); color: var(--deep); font-weight: 600; }
.pn-i.on svg { color: var(--baize); }
.pn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); margin-left: auto; box-shadow: 0 0 0 3px rgba(214,169,58,.2); }
.pt-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--felt-line); display: grid; gap: 2px; }
.pt-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.pt-top { display: flex; align-items: center; gap: 16px; padding: 18px clamp(18px, 3vw, 36px); background: var(--paper); border-bottom: 1px solid var(--line); }
.pt-top > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pt-top h1 { font-size: clamp(26px, 2.6vw, 36px); }
.pt-top .crumbs { font-size: 11.5px; }
.pt-top-act { display: flex; gap: 10px; align-items: center; }
.pt-burger { display: none; }
.pt-body { overflow-y: auto; padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 36px) 64px; display: grid; gap: 18px; align-content: start; }
.pt-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 14px; align-content: start; }
.pt-panel.dark-stage { background: var(--deep); border-color: var(--deep); }
.pt-sec-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pt-sec-h h3 { font-size: 22px; }
.pt-sec-h p { font-size: 13.5px; color: var(--ink-mute); margin-top: 4px; }
.pt-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin: 10px 0 0; }
.pt-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pt-cols > div { display: grid; gap: 18px; min-width: 0; }
.pt-cols.r { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ov-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); position: relative; overflow: hidden; }
.ov-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3d8487, #1a3a3d 60%, transparent 70%); opacity: .5; pointer-events: none; }
.ovh-l { display: grid; gap: 10px; position: relative; z-index: 1; }
.ov-hero h2 { font-size: clamp(34px, 4vw, 52px); }
.ov-hero p { color: var(--on-dark-soft); font-size: 14px; }
.ovh-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ovh-act .btn svg { width: 16px; height: 16px; }
.ovh-ring { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; padding: 14px 18px; border-radius: var(--r-lg); background: rgba(244,240,230,.06); border: 1px solid var(--felt-line); }
.ovh-ring > div { display: grid; }
.ovh-ring b { font-weight: 600; }
.ovh-ring span { font-size: 12.5px; color: var(--on-dark-mute); }
.ring { width: 84px; height: 84px; }
.pt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 18px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease); }
.kpi:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.kpi-ico { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 14px; background: var(--ivory); color: var(--baize); display: grid; place-items: center; }
.kpi-ico svg { width: 20px; height: 20px; }
.kpi b { font-size: 26px; line-height: 1; }
.kpi > span:last-child { font-size: 12.5px; color: var(--ink-mute); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tl li { display: grid; grid-template-columns: 90px 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 10px; border-radius: var(--r); cursor: pointer; transition: background .15s; }
.tl li:hover { background: var(--ivory); }
.tl-date { font-size: 12px; color: var(--ink-mute); }
.tl-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e3f1e8; color: var(--baize); }
.tl li.pending .tl-ico { background: var(--gold-soft); color: #8a6408; }
.tl-ico svg { width: 18px; height: 18px; }
.tl li > div { display: grid; min-width: 0; }
.tl b { font-weight: 600; font-size: 14.5px; }
.tl li > div span { font-size: 12.5px; color: var(--ink-mute); }
.tl li > svg { width: 16px; height: 16px; color: var(--ink-mute); }
.todo { display: grid; gap: 8px; }
.td { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--gold-soft); text-align: left; }
.td-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); color: #8a6408; display: grid; place-items: center; }
.td-ico svg, .td > svg { width: 18px; height: 18px; }
.td > span:nth-child(2) { display: grid; }
.td b { font-weight: 600; font-size: 14px; }
.td small { font-size: 12.5px; color: #6b5412; }
.rows { display: grid; gap: 8px; }
.row-i { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line-soft); }
.ri-main { display: grid; min-width: 0; }
.ri-main b { font-weight: 600; }
.ri-main span { font-size: 12.5px; color: var(--ink-mute); }
.ri-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ri-act .btn svg { width: 15px; height: 15px; }
.cr { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 16px; }
.cr-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.cr-top > div { display: grid; gap: 4px; }
.cr-ref { font-size: 11.5px; color: var(--ink-mute); }
.cr h4 { font-size: 20px; }
.cr-sub { font-size: 13px; color: var(--ink-mute); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stages li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mute); padding-top: 10px; border-top: 3px solid var(--line); }
.stages li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); font-family: var(--f-mono); font-size: 11px; flex-shrink: 0; }
.stages li span svg { width: 12px; height: 12px; }
.stages li.done { border-top-color: var(--baize); color: var(--ink-2); }
.stages li.done span { background: var(--baize); color: #fff; }
.stages li.on { border-top-color: var(--gold-2); color: var(--ink); font-weight: 600; }
.stages li.on span { background: var(--gold-2); color: var(--deep); }
.crs-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm { padding: 16px; border-radius: var(--r-lg); background: var(--ivory); display: grid; gap: 4px; justify-items: start; }
.cm b { font-family: var(--f-display); font-weight: 400; font-size: 22px; }
.cm > span:not(.eyebrow):not(.btn) { font-size: 13px; color: var(--ink-mute); margin-bottom: 8px; }
.saved-card { padding: 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, #1b2a4a, #0b1530); color: #fff; display: grid; gap: 10px; }
.sc-brand { font-weight: 800; font-style: italic; letter-spacing: .02em; font-size: 18px; }
.saved-card b { font-size: 17px; letter-spacing: .06em; }
.saved-card span.mono { font-size: 12px; opacity: .7; }
.po-status { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--gold-soft); }
.po-status > svg { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--paper); color: #8a6408; }
.po-status.ok { background: #e3f1e8; }
.po-status.ok > svg { color: var(--ok); }
.po-status.wait { background: #eef4ff; }
.po-status.wait > svg { color: var(--chalk); }
.po-status > div { display: grid; }
.po-status b { font-weight: 600; }
.po-status span { font-size: 13px; color: var(--ink-soft); }
.po-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.po-how > div { position: relative; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 6px; }
.po-how svg { width: 22px; height: 22px; color: var(--baize); }
.po-how b { font-weight: 600; font-size: 14.5px; }
.po-how span:not(.po-n) { font-size: 12.5px; color: var(--ink-mute); }
.po-n { position: absolute; top: 14px; right: 16px; font-size: 11px; color: var(--ink-mute); }
.card-stage { display: grid; place-items: center; padding: 20px 0 8px; }
.wallet { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wallet .btn { --fg: var(--on-dark); border-color: rgba(244,240,230,.28); }
.wallet .btn svg { width: 16px; height: 16px; }
.kv { display: grid; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv span { color: var(--ink-mute); }
.kv b { font-weight: 500; text-align: right; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.set-row > div { display: grid; gap: 2px; }
.set-row b { font-weight: 600; font-size: 14.5px; }
.set-row span:not(.badge) { font-size: 13px; color: var(--ink-mute); }
.set-row .badge svg { width: 11px; height: 11px; }
.switch { display: inline-block; vertical-align: middle; position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 13px; background: #d6d0c0; transition: background .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.switch input:checked + span { background: var(--baize); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch.dis { opacity: .5; }
.sess { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.sess > div { display: grid; }
.sess b { font-weight: 600; font-size: 14px; }
.sess span:not(.badge):not(.kpi-ico) { font-size: 12.5px; color: var(--ink-mute); }
.pw-meter { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 2px; }
.pw-meter i { display: block; height: 100%; width: 0; transition: width .3s, background .3s; }
.empty.sm { padding: 28px 16px; }
.empty.sm svg { width: 36px; height: 36px; }
.pt-gate { min-height: 100vh; display: grid; place-items: center; background: var(--ivory); }
.pt-scrim { display: none; }
@media (max-width: 1100px) { .pt-kpis { grid-template-columns: 1fr 1fr; } .pt-cols, .pt-cols.r { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; }
  .pt-side { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 80; transform: translateX(-102%); transition: transform .3s var(--ease); padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
  .portal.nav-open .pt-side { transform: none; box-shadow: 30px 0 80px rgba(0,0,0,.3); }
  .portal.nav-open .pt-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(12,30,32,.45); }
  .pt-burger { display: inline-grid; }
  .pt-top { padding: 12px 16px; gap: 12px; }
  .pt-top .crumbs { display: none; }
  .pt-top h1 { font-size: 24px; }
  .hide-sm { display: none; }
  .ov-hero { grid-template-columns: 1fr; }
  .po-how { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .row-i { grid-template-columns: 56px 1fr; }
  .row-i .ri-act, .row-i > .badge { grid-column: 1 / -1; }
  .tl li { grid-template-columns: 40px 1fr auto; }
  .tl-date { grid-column: 2; grid-row: 2; }
  .stages { grid-template-columns: 1fr 1fr; }
  .crs-mini { grid-template-columns: 1fr; }
  .po-status { grid-template-columns: 44px 1fr; }
  .po-status .btn { grid-column: 1 / -1; }
  .cr-top { flex-direction: column; }
}

body[data-route="account"] .a11y-fab { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- public club page ---------- */
.cl-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: var(--baize); color: var(--on-dark); flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.cl-logo b { font-family: var(--f-display); font-weight: 400; font-size: 22px; letter-spacing: -.02em; }
.cl-logo img { width: 100%; height: 100%; object-fit: cover; }
.cl-logo.lg { width: clamp(84px, 9vw, 112px); height: clamp(84px, 9vw, 112px); border-radius: 22px; background: var(--paper); color: var(--baize); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cl-logo.lg b { font-size: clamp(32px, 3.4vw, 42px); }

.cl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); color: var(--on-dark); }
.cl-cover { position: absolute; inset: 0; z-index: -2; }
.cl-cover img { width: 100%; height: 100%; object-fit: cover; }
.cl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,30,32,.72) 0%, rgba(12,30,32,.9) 55%, rgba(12,30,32,.98) 100%); }
.cl-hero .wrap { padding-block: clamp(24px, 3vw, 40px) clamp(28px, 3.4vw, 44px); display: grid; gap: 22px; }
.cl-id { display: flex; gap: clamp(16px, 2vw, 26px); align-items: flex-end; flex-wrap: wrap; }
.cl-id-t { display: grid; gap: 10px; min-width: 0; flex: 1; }
.cl-id h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.cl-tag { font-size: clamp(15px, 1.4vw, 18px); color: var(--on-dark-soft); max-width: 60ch; }
.cl-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cl-badges .badge svg { width: 12px; height: 12px; }
.cl-open { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--pill); font-size: 12.5px; font-weight: 600; background: rgba(240, 160, 143, .16); color: #f7c3b7; }
.cl-open i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cl-open.on { background: rgba(127, 209, 164, .16); color: #9fe0bb; }
.cl-open.on i { box-shadow: 0 0 0 4px rgba(127,209,164,.2); }
.cl-open.sm { height: 24px; font-size: 11.5px; padding: 0 10px; }
.ct .cl-open, .cl-card .cl-open, .cp-prev .cl-open { background: #fbe9e5; color: #a3402b; }
.ct .cl-open.on, .cl-card .cl-open.on, .cp-prev .cl-open.on { background: #e3f3ea; color: #15643c; }
.cl-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--on-dark-soft); }
.cl-meta > * { display: inline-flex; align-items: center; gap: 8px; }
.cl-meta svg { width: 16px; height: 16px; color: var(--gold-2); }
.cl-meta button:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cl-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.cl-stats { background: var(--deep); color: var(--on-dark); border-top: 1px solid var(--felt-line); }
.cl-stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cl-stat-row > div { display: grid; gap: 2px; padding: 18px 20px; border-left: 1px solid var(--felt-line); min-width: 0; }
.cl-stat-row > div:first-child { border-left: 0; padding-left: 0; }
.cl-stat-row b { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1; color: var(--gold-2); }
.cl-stat-row span { font-size: 12.5px; color: var(--on-dark-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cl-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cl-main { display: grid; gap: 14px; min-width: 0; }
.cl-main h2 { font-size: clamp(30px, 3.4vw, 44px); }
.cl-about { display: grid; gap: 14px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 68ch; }
.cl-h3 { font-size: 20px; margin-top: 18px; }
.cl-tables { display: flex; gap: 12px; flex-wrap: wrap; }
.cl-tables > div { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.cl-tables b { font-size: 30px; font-weight: 500; color: var(--baize); line-height: 1; }
.cl-tables span { display: grid; font-weight: 600; font-size: 14px; }
.cl-tables small { font-weight: 400; font-size: 12.5px; color: var(--ink-mute); }
.cl-fac { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cl-fac span { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r); background: var(--ivory); font-size: 13.5px; font-weight: 500; }
.cl-fac svg { width: 17px; height: 17px; color: var(--baize); }
.cl-side { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); }
.cl-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: grid; gap: 12px; }
.cl-card h4 { font-size: 17px; }
.cl-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cl-hours { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cl-hours th { text-align: left; font-weight: 500; color: var(--ink-soft); padding: 6px 0; }
.cl-hours td { text-align: right; padding: 6px 0; }
.cl-hours tr.today th, .cl-hours tr.today td { font-weight: 700; color: var(--ink); }
.cl-hours tr.today th::after { content: " · today"; font-weight: 400; color: var(--ink-mute); font-size: 12px; }
.cl-map { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 8; max-width: 100%; border: 1px solid var(--line); }
.cl-map-svg { width: 100%; height: 100%; display: block; }
.cl-map-pin { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -100%); width: 40px; height: 40px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--baize); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.cl-map-pin svg { rotate: 45deg; width: 18px; height: 18px; color: #fff; }
.cl-map-l { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--pill); background: var(--paper); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-1); }
.cl-map-l svg { width: 15px; height: 15px; }
.cl-map:hover .cl-map-l { background: var(--baize); color: #fff; }
.cl-contact { display: grid; }
.cl-contact button { display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); text-align: left; font-size: 14px; }
.cl-contact button:first-child { border-top: 0; }
.cl-contact button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-contact svg { width: 17px; height: 17px; color: var(--baize); }
.cl-contact svg:last-child { color: var(--ink-mute); opacity: 0; transition: opacity .2s; }
.cl-contact button:hover svg:last-child { opacity: 1; }
.cl-co { grid-template-columns: auto 1fr; align-items: start; background: #f3f8f4; border-color: #d4e5d9; }
.cl-co-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--baize); color: #fff; display: grid; place-items: center; }
.cl-co-ico svg { width: 20px; height: 20px; }
.cl-co > div { display: grid; gap: 4px; }
.cl-co .lnk { justify-self: start; font-size: 13.5px; }
.cl-co p { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; }
.cl-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-mute); }
.cl-note svg { width: 14px; height: 14px; }
.cl-lb .pl span.mono { font-size: 11.5px; }
.cl-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-n { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.cl-n:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.cl-n .media { aspect-ratio: 16 / 9; max-width: 100%; }
.cl-n-ph { display: grid; place-items: center; background: var(--ivory); }
.cl-n-b { display: grid; gap: 8px; padding: 16px 18px 18px; align-content: start; }
.cl-n-b .mono { font-size: 11.5px; color: var(--ink-mute); }
.cl-n-b h4 { font-size: 19px; }
.cl-n-b p { font-size: 14px; color: var(--ink-soft); }
.cl-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 14vw, 190px); gap: 10px; }
.cl-g { position: relative; border-radius: var(--r); overflow: hidden; }
.cl-g.big { grid-column: span 2; grid-row: span 2; }
.cl-g img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cl-g:hover img { transform: scale(1.04); }
.cl-g span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: 12.5px; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.6)); opacity: 0; transition: opacity .25s; }
.cl-g:hover span, .cl-g:focus-visible span { opacity: 1; }
.cl-lbx img { width: 100%; max-height: 72vh; object-fit: contain; background: #0b0f0c; display: block; }
.cl-lbx-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; }
.cl-lbx-f > div { display: flex; gap: 8px; }
.cl-empty { border: 1px dashed var(--line); border-radius: var(--r-lg); }
.cl-join { background: var(--deep); color: var(--on-dark); }
.cl-join .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(40px, 5vw, 72px); }
.cl-join h2 { font-size: clamp(32px, 4vw, 52px); margin: 10px 0 12px; }
.cl-join .lead { color: var(--on-dark-soft); }
.cl-fees { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; border-radius: var(--r-xl); background: rgba(244,240,230,.05); border: 1px solid var(--felt-line); }
.cl-fee { display: grid; gap: 2px; }
.cl-fee span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mute); font-family: var(--f-mono); }
.cl-fee b { font-size: 28px; font-weight: 500; color: var(--gold-2); }
.cl-fee small { font-size: 12.5px; color: var(--on-dark-mute); }
.cl-fees p { grid-column: 1 / -1; font-size: 13px; color: var(--on-dark-soft); }
.cl-join-act { grid-column: 1 / -1; display: grid; gap: 8px; }
@media (max-width: 1000px) { .cl-grid, .cl-join .wrap { grid-template-columns: 1fr; } .cl-side { position: static; } .cl-news { grid-template-columns: 1fr 1fr; } .cl-stat-row { grid-template-columns: repeat(3, 1fr); } .cl-stat-row > div:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) {
  .cl-news { grid-template-columns: 1fr; }
  .cl-gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
  .cl-stat-row { grid-template-columns: 1fr 1fr; }
  .cl-stat-row > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--felt-line); padding-block: 14px; }
  .cl-stat-row > div:nth-child(-n+2) { border-top: 0; }
  .cl-cta .btn { flex: 1 1 100%; }
  .cl-meta { font-size: 13.5px; }
}

/* ---------- club portal ---------- */
.club-portal .pt-me .cl-logo { width: 42px; height: 42px; border-radius: 12px; background: var(--gold); }
.club-portal .pt-me .cl-logo b { font-size: 16px; }
.pt-nav .pn-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: var(--deep); font-size: 11px; font-style: normal; display: grid; place-items: center; font-weight: 700; }
body[data-route="club-dash"] .a11y-fab { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.inp.sm { height: 36px; font-size: 13.5px; padding: 0 10px; }
.cp-msg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); text-align: left; width: 100%; }
.cp-msg span:nth-child(2) { display: grid; min-width: 0; }
.cp-msg small { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-msg .mono { font-size: 11.5px; color: var(--ink-mute); }
.cp-msg.unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: 8px; vertical-align: middle; }
.cp-spark { display: flex; align-items: flex-end; gap: 5px; height: 80px; }
.cp-spark i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--baize), #4a7f82); opacity: .85; min-height: 4px; }

.cp-edit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.cp-edit-main { display: grid; gap: 18px; min-width: 0; }
.cp-edit-side { position: sticky; top: 0; }
.cp-logo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cp-cov { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 2px solid transparent; }
.cp-cov img { width: 100%; height: 100%; object-fit: cover; }
.cp-cov.on { border-color: var(--baize); box-shadow: 0 0 0 3px rgba(26,58,61,.15); }
.hr-grid { display: grid; gap: 6px; }
.hr-row { display: grid; grid-template-columns: 110px auto 1fr auto 1fr; gap: 12px; align-items: center; font-size: 14px; }
.hr-row .inp:disabled { opacity: .4; }
.hr-to { color: var(--ink-mute); font-size: 13px; }
.cp-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 -8px 24px rgba(0,0,0,.06); }
.cp-save #cpDirty { flex: 1; font-size: 13px; color: var(--ink-mute); }
.cp-save #cpDirty.on { color: #8a6408; font-weight: 600; }
.cp-save #cpDirty.on::before { content: "● "; }
.cp-prev { border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.cp-prev-cover { aspect-ratio: 16 / 7; position: relative; }
.cp-prev-cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.cp-prev-b { padding: 0 16px 18px; display: grid; gap: 8px; }
.cp-prev-b .cl-logo { margin-top: -28px; border: 3px solid var(--paper); }
.cp-prev-b .cl-open { justify-self: start; }
.cp-prev-b h4 { font-size: 20px; }
.cp-prev-b p { font-size: 13.5px; color: var(--ink-soft); }
.cp-prev-m { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mute); }
.cp-prev-m svg { width: 14px; height: 14px; }
.cp-prev-f { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-prev-f span { font-size: 11.5px; padding: 3px 8px; border-radius: var(--pill); background: var(--ivory); }
.cp-thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cp-thumb.ph { display: grid; place-items: center; background: var(--ivory); color: var(--ink-mute); }
.cp-thumb.ph svg { width: 20px; height: 20px; }
.logo-drop.wide img { width: 120px; height: 72px; border-radius: 10px; }
.cp-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cp-gi { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.cp-gi img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cp-gi figcaption { display: flex; gap: 6px; padding: 8px; align-items: center; }
.cp-gi figcaption .inp { flex: 1; min-width: 0; }
.cp-gi figcaption > div { display: flex; gap: 4px; }
.cp-gi-b { position: absolute; top: 8px; left: 8px; }
.cp-drop { cursor: pointer; border: 1.5px dashed #c9c2b0; border-radius: var(--r-lg); }
.cp-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cp-tools .inp-wrap { flex: 0 1 300px; }
.cp-tools .chips { flex: 1; min-width: 0; }
.cp-roles { margin-top: 4px; }
.cp-inbox { display: grid; }
.cp-im { border-top: 1px solid var(--line-soft); }
.cp-im:first-child { border-top: 0; }
.cp-im-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 6px; text-align: left; border-radius: var(--r); }
.cp-im-h:hover { background: var(--ivory); }
.cp-im-h span:nth-child(2) { display: grid; min-width: 0; }
.cp-im-h small { font-size: 13px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-im-h .mono { font-size: 11.5px; color: var(--ink-mute); }
.cp-im.unread .cp-im-h b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: 8px; vertical-align: middle; }
.cp-im-b { padding: 4px 6px 18px 56px; display: grid; gap: 10px; }
.cp-im-b p { font-size: 15px; line-height: 1.6; }
.cp-im-b > .mono { font-size: 12px; color: var(--ink-mute); }
.cp-im-b form { display: grid; gap: 8px; }
.cp-im-b textarea.err { border-color: var(--red, #c0392b); }
.cp-plan { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--gold-soft), var(--paper) 70%); border: 1px solid #e5cf92; }
.cp-plan > div { display: grid; gap: 2px; }
.cp-plan b { font-size: 34px; font-weight: 500; }
.cp-plan span:not(.badge) { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 1100px) { .cp-edit { grid-template-columns: 1fr; } .cp-edit-side { position: static; order: -1; max-width: 420px; } }
@media (max-width: 640px) {
  .cp-logo-row { grid-template-columns: 1fr; }
  .hr-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .hr-row .inp, .hr-to { grid-column: auto; }
  .hr-row > span:first-child { font-weight: 600; }
  .hr-row select:first-of-type { grid-column: 1; }
  .hr-to { display: none; }
  .cp-im-b { padding-left: 6px; }
  .cp-save { flex-wrap: wrap; }
  .cp-save #cpDirty { flex-basis: 100%; }
}

.cl-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,30,32,.6); color: #fff; font-style: normal; font-family: var(--f-display); font-size: 32px; }
.cl-news.n1 { grid-template-columns: minmax(0, 640px); }
.cl-news.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-news.n2 .cl-n { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: none; }
.cl-news.n2 .cl-n .media { aspect-ratio: auto; height: 100%; min-height: 200px; }
@media (max-width: 1000px) { .cl-news.n2 .cl-n { grid-template-columns: 1fr; } .cl-news.n2 .cl-n .media { aspect-ratio: 16/9; min-height: 0; } }
@media (max-width: 640px) { .cl-news.n2 { grid-template-columns: 1fr; } }
.cp-prev-b .cl-logo { position: relative; z-index: 1; }

/* Accessibility Preferences widget — mirrors the widget on the current live SBI site */
:root, :host {
  --ax-head: #141915;
  --ax-hint: #8fd18a;
  --ax-bg: #ffffff;
  --ax-tile: #f3f6f0;
  --ax-tile-line: #dde5d6;
  --ax-tile-on: #e4efe0;
  --ax-ink: #111511;
  --ax-mute: #5b635b;
  --ax-green: #2f6f1c;
  --ax-ring: #f59e0b;
}

/* floating button */
.a11y-fab { width: 56px; height: 56px; background: #2f6f1c; color: #fff; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(10, 30, 10, .28), 0 0 0 1px rgba(0,0,0,.06); transition: transform .2s var(--ease), background .2s; }
.a11y-fab:hover { transform: scale(1.06); background: #286117; }
.a11y-fab:focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 3px; }
.a11y-fab svg { width: 30px; height: 30px; }
.a11y-fab.open { background: #1f4f12; }

/* panel */
.ax { position: fixed; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 130; width: min(400px, calc(100vw - 24px)); max-height: min(700px, calc(100dvh - 120px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--ax-bg); color: var(--ax-ink); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 20, 10, .28), 0 0 0 1px rgba(0,0,0,.08); font-family: var(--f-sans, Inter, system-ui, sans-serif); animation: axIn .22s var(--ease); }
@keyframes axIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ax-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ax-head); color: #fff; padding: 16px 16px 16px 18px; }
.ax-head h2 { font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.2; color: #fff; }
.ax-head span { display: block; font-size: 12px; font-weight: 600; color: var(--ax-hint); margin-top: 2px; }
.ax-x { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; color: #fff; border: 1.5px solid rgba(255,255,255,.55); background: transparent; }
.ax-x:hover { background: rgba(255,255,255,.1); }
.ax-x:focus, .ax-x:focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 2px; border-color: #fff; }
.ax-x svg { width: 22px; height: 22px; stroke-width: 2.2; }

.ax-body { overflow-y: auto; padding: 14px 14px 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b9c0b6 transparent; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ax-chip { height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #d6dbd2; background: #fff; font-size: 13px; font-weight: 700; color: var(--ax-ink); transition: background .15s, border-color .15s; }
.ax-chip:hover { border-color: var(--ax-green); }
.ax-chip.on { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }

.ax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ax-tile { position: relative; min-height: 92px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 12px 8px; background: var(--ax-tile); border: 1.5px solid var(--ax-tile-line); border-radius: 12px; color: var(--ax-ink); text-align: center; transition: border-color .15s, background .15s, transform .15s; }
button.ax-tile:hover { border-color: #b7c7ad; background: #eef3ea; }
button.ax-tile:active { transform: scale(.98); }
.ax-tile:focus-visible, .ax-chip:focus-visible, .ax-reset:focus-visible, .ax-lnk:focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 2px; }
.ax-tile.on { border: 2px solid var(--ax-green); background: var(--ax-tile-on); padding: 11.5px 7.5px; }
.ax-ti { width: 22px; height: 22px; }
.ax-tl { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.ax-ok { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--ax-green); color: #fff; display: grid; place-items: center; }
.ax-ok svg { width: 12px; height: 12px; stroke-width: 3; }
.ax-lv { display: flex; gap: 4px; margin-top: -2px; }
.ax-lv i { width: 16px; height: 4px; border-radius: 2px; background: #cfd8c8; }
.ax-lv i.on { background: var(--ax-green); }
.ax-lvt { font-size: 11px; color: var(--ax-mute); margin-top: -4px; }
.ax-sel { align-content: center; gap: 10px; }
.ax-sel label { font-size: 13.5px; font-weight: 600; }
.ax-sel select { width: 100%; height: 36px; border: 1.5px solid #c9d2c2; border-radius: 6px; background: #fff; padding: 0 8px; font: inherit; font-size: 13.5px; color: var(--ax-ink); }
.ax-sel select:focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 1px; }

.ax-foot { display: grid; gap: 6px; justify-items: center; padding: 12px 14px 14px; border-top: 1px solid #e6e9e3; background: #fff; }
.ax-reset { width: 100%; height: 42px; border-radius: 10px; border: 1.5px solid var(--ax-ink); background: #fff; font-size: 14px; font-weight: 700; color: var(--ax-ink); }
.ax-reset:hover { background: #f4f6f2; }
.ax-reset.ax-primary { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }
.ax-lnk { font-size: 12.5px; font-weight: 700; color: var(--ax-green); text-decoration: underline; text-underline-offset: 3px; padding: 2px 4px; }
.ax-lnk:hover { color: #1d4a10; }

/* report a problem */
.ax-sub { display: grid; gap: 12px; padding: 4px 4px 8px; }
.ax-sub h3 { font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.ax-sub p { font-size: 13.5px; color: var(--ax-mute); line-height: 1.5; }
.ax-sub form { display: grid; gap: 12px; }
.ax-sub label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ax-sub select, .ax-sub textarea, .ax-sub input { width: 100%; border: 1.5px solid #c9d2c2; border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; font-weight: 400; background: #fff; color: var(--ax-ink); }
.ax-sub textarea { resize: vertical; }
.ax-sub .bad { border-color: #c0392b; }
.ax-sub :is(select, textarea, input):focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 1px; }
.ax-meta { font-size: 12px !important; }
.ax-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ax-green); justify-self: start; }
.ax-back svg { width: 16px; height: 16px; }
.ax-sent { justify-items: center; text-align: center; padding-top: 18px; }
.ax-big-ok { width: 56px; height: 56px; border-radius: 50%; background: var(--ax-tile-on); color: var(--ax-green); display: grid; place-items: center; }
.ax-big-ok svg { width: 28px; height: 28px; stroke-width: 2.4; }

/* ---------- effects on the page (content only; the widget is outside #app) ---------- */
html.ax-text-1 :is(#app, #foot) { zoom: 1.1; }
html.ax-text-2 :is(#app, #foot) { zoom: 1.25; }
html.ax-text-3 :is(#app, #foot) { zoom: 1.4; }
html.ax-lh-1 :is(#app, #foot) :is(p, li, dd, dt, td, label, .lead, blockquote) { line-height: 1.6 !important; }
html.ax-lh-2 :is(#app, #foot) :is(p, li, dd, dt, td, label, .lead, blockquote) { line-height: 1.9 !important; }
html.ax-lh-3 :is(#app, #foot) :is(p, li, dd, dt, td, label, .lead, blockquote) { line-height: 2.2 !important; }
html.ax-sp-1 :is(#top, #app, #foot) :is(p, li, h1, h2, h3, h4, a, span, b, label, td, button) { letter-spacing: .05em !important; word-spacing: .1em !important; }
html.ax-sp-2 :is(#top, #app, #foot) :is(p, li, h1, h2, h3, h4, a, span, b, label, td, button) { letter-spacing: .09em !important; word-spacing: .18em !important; }
html.ax-sp-3 :is(#top, #app, #foot) :is(p, li, h1, h2, h3, h4, a, span, b, label, td, button) { letter-spacing: .13em !important; word-spacing: .26em !important; }
html.ax-dys :is(#top, #app, #foot) :is(p, li, h1, h2, h3, h4, h5, a, span, b, label, td, th, button, input, textarea, select, em, strong, small, dd, dt) { font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif !important; font-style: normal !important; }
html.ax-links :is(#top, #app, #foot) :is(a, span[data-goto], .link-arrow, .back) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; background: #fff3a3 !important; color: #111 !important; outline: 2px solid #111; outline-offset: 1px; border-radius: 2px; }
html.ax-img :is(#app, #foot) :is(img, video, .ph-art, .media) { visibility: hidden !important; }
html.ax-img :is(#app, #foot) .media { background: repeating-linear-gradient(45deg, #eee 0 10px, #e4e4e4 10px 20px) !important; visibility: visible !important; }
html.ax-img :is(#app, #foot) .media > * { visibility: hidden !important; }
html.ax-anim *, html.ax-anim *::before, html.ax-anim *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; scroll-behavior: auto !important; }
html.ax-align-1 :is(#app, #foot) :is(p, h1, h2, h3, h4, li, .lead, dd) { text-align: left !important; }
html.ax-align-2 :is(#app, #foot) :is(p, h1, h2, h3, h4, li, .lead, dd) { text-align: center !important; }
html.ax-align-3 :is(#app, #foot) :is(p, h1, h2, h3, h4, li, .lead, dd) { text-align: right !important; }
html.ax-focus :focus { outline: 4px solid var(--ax-ring) !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgba(245, 158, 11, .25) !important; }
html.ax-focus :is(#app, #top) :is(a, button, [data-goto], input, select):hover { outline: 2px dashed var(--ax-ring); outline-offset: 2px; }
html.ax-cur-1, html.ax-cur-1 * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5 20 12l-7.2 1.7L9 20.5z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; }
html.ax-cur-2, html.ax-cur-2 * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5 20 12l-7.2 1.7L9 20.5z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; }
/* dark contrast re-inverts media so photos look right */
html.ax-con-2 :is(img, video, .ph-art, .art-svg) { filter: invert(1) hue-rotate(180deg); }
/* light contrast: flatten neutrals to pure white / black */
html.ax-con-3 { --paper: #ffffff; --ivory: #ffffff; --ink-2: #000; --ink-soft: #111; --ink-mute: #2a2a2a; --line: #6b6b6b; --line-soft: #9a9a9a; }
/* screen reader highlight */
html.ax-sr .ax-speaking { outline: 3px solid var(--ax-ring) !important; outline-offset: 3px; background: rgba(245, 158, 11, .12) !important; border-radius: 4px; }
html.ax-dict :is(#app) { cursor: help; }
.ax-flash { animation: axFlash 1.6s var(--ease); }
@keyframes axFlash { 0%, 60% { background: #fff3a3; box-shadow: 0 0 0 8px #fff3a3; } }

/* reading mask + guide */
.ax-mask { position: fixed; inset: 0; z-index: 125; pointer-events: none; }
.ax-mask i { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, .6); }
.ax-mask i:first-child { top: 0; }
.ax-mask i:last-child { bottom: 0; }
.ax-guide { position: fixed; left: 0; right: 0; z-index: 125; height: 10px; pointer-events: none; background: #111; border-top: 3px solid #f5c518; border-bottom: 3px solid #f5c518; opacity: .85; }

/* dictionary */
.ax-def { position: fixed; z-index: 140; width: min(320px, calc(100vw - 24px)); background: #fff; color: var(--ax-ink); border-radius: 12px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.08); display: grid; gap: 8px; font-size: 14px; }
.ax-def-h { display: flex; justify-content: space-between; align-items: center; }
.ax-def-h b { font-size: 17px; text-transform: capitalize; }
.ax-def-h button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.ax-def-h button svg { width: 16px; height: 16px; }
.ax-def p { line-height: 1.5; color: #333; }
.ax-def-src { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ax-green); font-weight: 700; }
.ax-def a { font-size: 13px; font-weight: 600; color: var(--ax-green); text-decoration: underline; }

/* bars: screen reader + voice navigation */
.ax-srbar, .ax-vbar { position: fixed; left: 50%; transform: translateX(-50%); z-index: 128; width: min(620px, calc(100vw - 24px)); background: var(--ax-head); color: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.3); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; }
.ax-srbar { top: calc(12px + env(safe-area-inset-top, 0px)); }
.ax-vbar { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
.ax-srbar > svg, .ax-vbar > svg { width: 22px; height: 22px; color: var(--ax-hint); }
.ax-srbar > div { flex: 1; min-width: 0; display: grid; }
.ax-srbar > div span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-hint); font-weight: 700; }
.ax-srbar b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-srbar button:not(.ax-bx) { height: 34px; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; font-weight: 600; }
.ax-srbar button:not(.ax-bx):hover { background: rgba(255,255,255,.2); }
.ax-bx { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.ax-bx svg { width: 18px; height: 18px; }
.ax-vbar input { flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 0; background: rgba(255,255,255,.1); color: #fff; padding: 0 12px; font: inherit; font-size: 14px; }
.ax-vbar input::placeholder { color: rgba(255,255,255,.55); }
.ax-vbar input:focus-visible { outline: 2px solid var(--ax-ring); }
.ax-vmic { width: 40px; height: 40px; border-radius: 50%; background: #2f6f1c; color: #fff; display: grid; place-items: center; }
.ax-vmic svg { width: 20px; height: 20px; }
.ax-vmic.rec, .ax-mic.rec { background: #c0392b; animation: axPulse 1s infinite; }
@keyframes axPulse { 50% { box-shadow: 0 0 0 8px rgba(192, 57, 43, .25); } }
.ax-vhelp { flex-basis: 100%; font-size: 12px; color: rgba(255,255,255,.65); padding: 2px 2px 0 32px; }
.ax-vhelp b { color: #fff; font-weight: 600; }
body.ax-kb-on .ax-vbar { bottom: calc(262px + env(safe-area-inset-bottom, 0px)); }

/* talk & type mic */
.ax-mic { position: fixed; z-index: 129; width: 32px; height: 32px; border-radius: 50%; background: #2f6f1c; color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.ax-mic svg { width: 17px; height: 17px; }

/* virtual keyboard */
.ax-kb { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 127; width: min(760px, 100vw); background: #1b211c; color: #fff; border-radius: 16px 16px 0 0; padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; box-shadow: 0 -12px 40px rgba(0,0,0,.3); user-select: none; }
.ax-kb-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; padding: 0 4px 4px; color: rgba(255,255,255,.7); }
.ax-kb-h span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ax-hint); }
.ax-kb-h svg { width: 16px; height: 16px; }
.ax-kb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-kr { display: flex; gap: 5px; }
.ax-kr button { flex: 1; min-width: 0; height: 42px; border-radius: 7px; background: #323b33; color: #fff; font-size: 15px; font-weight: 500; }
.ax-kr button:hover { background: #3f4a40; }
.ax-kr button:active { background: #2f6f1c; }
.ax-kr button.fn { background: #262d27; font-size: 14px; color: #d8e8d4; }
.ax-kr button.fn.on { background: #2f6f1c; }
.ax-kr button.wide { flex: 5; }
body.ax-kb-on .a11y-fab { bottom: calc(270px + env(safe-area-inset-bottom, 0px)) !important; }
body.ax-kb-on .ax { bottom: calc(338px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 370px); }

/* read mode */
.ax-read { position: fixed; inset: 0; z-index: 150; background: #fbf8f1; color: #1a1a1a; overflow-y: auto; }
.ax-read-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; background: rgba(251, 248, 241, .95); border-bottom: 1px solid #e4ddcc; backdrop-filter: blur(6px); }
.ax-read-bar > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.ax-read-bar svg { width: 18px; height: 18px; }
.ax-read-bar > div { display: flex; gap: 6px; }
.ax-read-bar button { height: 36px; padding: 0 12px; border-radius: 8px; border: 1.5px solid #cfc7b4; background: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ax-read-x { background: #1a1a1a !important; color: #fff; border-color: #1a1a1a !important; }
.ax-read-in { max-width: 680px; margin: 0 auto; padding: 40px 20px 96px; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.7; display: grid; gap: 1em; }
.ax-read-in h1 { font-family: inherit; font-size: 2em; line-height: 1.15; letter-spacing: -.01em; }
.ax-read-in h2 { font-family: inherit; font-size: 1.35em; line-height: 1.25; margin-top: .6em; }
.ax-read-in li { margin-left: 1.2em; list-style: disc; }

/* page structure */
.ax-tree { position: fixed; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 131; width: min(400px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 120px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: #fff; color: var(--ax-ink); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08); }
.ax-tree [hidden] { display: none !important; }
.ax-tree-h { display: flex; justify-content: space-between; align-items: center; background: var(--ax-head); color: #fff; padding: 14px 14px 14px 18px; }
.ax-tree-h b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.ax-tree-h svg { width: 18px; height: 18px; }
.ax-tree-h button { width: 36px; height: 36px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.5); color: #fff; display: grid; place-items: center; }
.ax-tree-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #e6e9e3; }
.ax-tree-tabs button { height: 36px; border-radius: 8px; font-weight: 700; font-size: 13.5px; background: var(--ax-tile); border: 1.5px solid var(--ax-tile-line); }
.ax-tree-tabs button.on { background: var(--ax-green); border-color: var(--ax-green); color: #fff; }
.ax-tree-tabs i { font-style: normal; opacity: .7; font-weight: 500; }
.ax-tree-l { overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 2px; list-style: none; margin: 0; }
.ax-tree-l button { width: 100%; text-align: left; display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; }
.ax-tree-l button:hover { background: var(--ax-tile); }
.ax-tree-l .mono { font-size: 11px; color: var(--ax-green); font-weight: 700; flex-shrink: 0; }
.ax-tree-l .lv3 button { padding-left: 26px; }

@media (max-width: 640px) {
  .ax, .ax-tree { left: 0; right: 0; bottom: 0; width: 100%; max-height: 86dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation-name: axUp; }
  @keyframes axUp { from { transform: translateY(40px); opacity: 0; } }
  .ax-tile { min-height: 84px; }
  .ax-kr button { height: 40px; font-size: 14px; }
  .ax-vhelp { display: none; }
  body.has-tab .ax-vbar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== v1.3.0 additions ===== */
/* rankings: all tours visible, wrapping */
/* rankings: tour picker — one row of categories, arrows both sides, sub-tours in a tray below */
.tpk { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; align-items: center; padding: 6px; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tp-track { position: relative; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.tpk.at-start .tp-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); }
.tpk.at-end .tp-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px); mask-image: linear-gradient(90deg, transparent 0, #000 22px); }
.tpk.at-start.at-end .tp-track { -webkit-mask-image: none; mask-image: none; }
.tp-track::-webkit-scrollbar { display: none; }
.tp-t { flex: 0 0 188px; scroll-snap-align: start; }
.tp-arr { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink); transition: background .2s, color .2s, opacity .2s, border-color .2s; }
.tp-arr svg { width: 18px; height: 18px; }
.tp-arr:hover:not(:disabled) { background: var(--baize); border-color: var(--baize); color: var(--on-dark); }
.tp-arr:disabled { opacity: .35; cursor: default; }
.tpk.fits .tp-arr { visibility: hidden; }
.tpk-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--baize); color: var(--on-dark); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; margin-left: 2px; }
.tp-chev { display: inline-grid; margin-left: auto; color: var(--ink-mute); transition: transform .25s var(--ease); }
.tp-chev svg { width: 15px; height: 15px; }
.tp-t.open .tp-chev { transform: rotate(180deg); color: var(--baize); }
.tp-t.open { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--baize-3); }
.tp-sub { position: relative; margin-top: 12px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); animation: tpIn .25s var(--ease); }
.tp-sub::before { content: ""; position: absolute; top: -7px; left: var(--x, 50%); width: 12px; height: 12px; background: var(--paper); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); transition: left .25s var(--ease); }
.tp-sub[hidden] { display: none; }
.tp-sub-l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.tp-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-s { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--ivory); color: var(--ink-2); font-size: 13.5px; transition: background .2s, border-color .2s, color .2s; }
.tp-s b { font-weight: 600; }
.tp-s .mono { font-size: 11px; color: var(--ink-mute); }
.tp-s:hover { border-color: var(--baize-3); background: var(--paper); }
.tp-s.on { background: var(--baize); border-color: var(--baize); color: var(--on-dark); }
.tp-s.on .mono { color: var(--gold-2); }
.tp-gap { height: 28px; }
@keyframes tpIn { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 640px) { .tpk { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 4px; } .tp-arr { width: 34px; height: 34px; } .tp-t { flex-basis: 160px; } .tp-sub { flex-direction: column; align-items: flex-start; } }
.rank-wrap { overflow-x: visible; }
.rank-tbl .c { text-align: center; }
.pf-row { cursor: pointer; transition: background .15s; }
.pf-row:hover td, .pf-row:focus-visible td { background: rgba(214,169,58,.08); }
.pf-link { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.pf-link:hover { text-decoration-color: currentColor; }
.ev-row.cx h4 { text-decoration: line-through; opacity: .6; }
.note.red { background: #fbe4e2; border-color: #f2c4bf; } .note.red svg { color: var(--err); }
@media (max-width: 760px) { .hide-sm { display: none; } }

/* ---------- club directory tile (flip to contact) ---------- */
.club.ct { padding: 0; border: 0; background: none; perspective: 1400px; display: block; cursor: default; box-shadow: none; }
.club.ct:hover { transform: none; box-shadow: none; }
.ct-in { position: relative; display: grid; transition: transform .7s var(--ease); transform-style: preserve-3d; min-height: 100%; }
.ct.is-flipped .ct-in { transform: rotateY(180deg); }
.ct-f { grid-area: 1 / 1; min-height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; }
.ct-front { cursor: pointer; transition: box-shadow .3s, border-color .2s; }
.ct-front:hover { border-color: #d5ccb6; box-shadow: 0 24px 48px -30px rgba(12,30,32,.45); }
.ct-front:hover .ct-cover img { transform: scale(1.05); }
.ct-back { transform: rotateY(180deg); background: var(--deep); color: var(--on-dark); border-color: var(--deep); grid-template-rows: auto 1fr auto; overflow: hidden; }
.ct-cover { position: relative; height: 112px; overflow: hidden; background: var(--deep); }
.ct-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .8s var(--ease); }
.ct-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,30,32,.05), rgba(12,30,32,.55)); }
.ct-cover .badge { position: absolute; top: 12px; left: 12px; z-index: 1; }
.ct-cover .ct-prem { left: auto; right: 12px; } .ct-cover .badge svg { width: 11px; height: 11px; }
.ct-id { display: grid; gap: 10px; padding: 0 20px; margin-top: -32px; position: relative; z-index: 2; }
.ct-logo { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 3px solid var(--paper); box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); display: grid; place-items: center; overflow: hidden; }
.ct-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ct-logo.sm { width: 38px; height: 38px; border-radius: 10px; border-width: 2px; }
.ct-id h4 { font-size: 21px; line-height: 1.15; margin: 0 0 4px; }
.ct-facts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 14px 20px 0; font-size: 13px; color: var(--ink-soft); }
.ct-offers { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0; align-content: start; }
.ct-offers span { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: var(--ivory); color: var(--ink-2); }
.ct-offers svg { width: 13px; height: 13px; color: var(--baize); }
.ct-offers .muted { background: none; color: var(--ink-mute); font-weight: 500; padding-left: 0; }
.ct-act { display: flex; gap: 8px; align-items: center; padding: 16px 20px 18px; margin-top: 14px; border-top: 1px solid var(--line-soft); }
.ct-act .ev-go { margin-left: auto; width: 36px; height: 36px; }
.ct-back .ct-act { border-color: rgba(244,240,230,.12); flex-wrap: nowrap; }
.ct .ct-back .ev-go { display: grid; color: var(--on-dark); background: rgba(244,240,230,.1); cursor: pointer; flex: none; }
.ct .ct-back .ev-go:hover, .ct .ct-back .ev-go:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.ct-back .btn-sm { white-space: nowrap; }
.ct-back .btn-ghost { color: var(--on-dark); border-color: rgba(244,240,230,.25); }
.ct-back-h { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px 20px 6px; }
.ct-back-h b { font-size: 15px; line-height: 1.25; }
.ct-back-h .icon-btn { color: var(--on-dark); background: transparent; border: 1px solid rgba(244,240,230,.25); }
.ct-lines { display: grid; gap: 0; padding: 4px 12px; align-content: start; }
.ct-lines button { padding-top: 7px !important; padding-bottom: 7px !important; }
.ct-lines button { display: grid; grid-template-columns: 18px 1fr 16px; gap: 10px; align-items: center; text-align: left; padding: 9px 8px; border-radius: 10px; font-size: 13.5px; color: var(--on-dark); }
.ct-lines button:hover { background: rgba(244,240,230,.07); }
.ct-lines svg { width: 16px; height: 16px; color: var(--gold-2); }
.ct-lines svg:last-child { width: 13px; height: 13px; opacity: .45; color: var(--on-dark); }
.ct-lines span { overflow-wrap: anywhere; }
.ct-lines button.is-copied { background: rgba(214,169,58,.16); }
.ct-lines button.is-copied svg:last-child { opacity: 1; color: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .ct-in { transition: none; } }
.ct-link { color: inherit; }
.ct-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.ct-front { position: relative; }
.ct-front .ct-act { position: relative; z-index: 2; }
.ct-front:focus-within { border-color: #d5ccb6; }

/* ---------- club page: services + packages ---------- */
.svc-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid.n1 { grid-template-columns: minmax(0, 560px); }
.svc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); }
.svc-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--deep); color: var(--gold-2); display: grid; place-items: center; }
.svc-ico svg { width: 22px; height: 22px; }
.svc h3 { font-size: 26px; margin: 0; }
.svc p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.svc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; background: var(--line-soft); }
.svc-kv > div { background: var(--ivory); padding: 12px 14px; display: grid; gap: 2px; } .svc-kv b { font-size: 18px; } .svc-kv span { font-size: 12px; color: var(--ink-mute); }
.svc-co { display: grid; gap: 8px; }
.svc-co > div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.svc-co b { display: block; font-size: 14px; } .svc-co small { font-size: 12px; color: var(--ink-mute); }
.svc-foot { margin-top: auto; display: grid; gap: 14px; padding-top: 6px; }
.svc .btn-block { margin-top: 0; }
.svc-grid { align-items: stretch; }
.cl-join.pk .wrap { display: grid; gap: 32px; grid-template-columns: 1fr; }
.cl-join-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cl-join-h > div { max-width: 640px; }
.cl-pks { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-pks.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-pks.n1 { grid-template-columns: minmax(0, 420px); }
.cl-pk { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-xl); background: rgba(244,240,230,.05); border: 1px solid rgba(244,240,230,.14); }
.cl-pk .eyebrow { color: var(--gold-2); }
.cl-pk p { margin: 0; color: var(--on-dark-soft); font-size: 14px; }
.cl-pk-m { font-size: 12.5px; color: var(--on-dark-soft); }
.cl-pk .ticks li { color: var(--on-dark); }
.cl-pk .ticks { flex: 1; align-content: start; margin: 6px 0 4px; }
.cl-pk .btn { margin-top: auto; }
.cl-pks { align-items: stretch; }
@media (max-width: 980px) { .svc-grid, .svc-grid.n2, .cl-pks, .cl-pks.n2 { grid-template-columns: 1fr; } }

/* ---------- club portal additions ---------- */
.pn-lock { margin-left: auto; opacity: .55; display: grid; } .pn-lock svg { width: 13px; height: 13px; }
.cp-lock { padding: 38px 20px; }
.cp-lock-ico { width: 60px; height: 60px; border-radius: 18px; background: var(--ivory); display: grid; place-items: center; margin: 0 auto 6px; color: var(--ink-soft); }
.cp-lock-ico svg { width: 26px; height: 26px; }
.cp-lock h3 em { font-style: italic; }
/* full-width grids: no horizontal scroll, rows collapse to cards on small screens */
.xg { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.xg > .cg-h, .xg > .cg-r { display: grid; gap: 12px; align-items: center; padding: 11px 16px; }
.xg > .cg-h { background: var(--ivory); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.xg > .cg-r { border-top: 1px solid var(--line-soft); font-size: 14px; text-align: left; width: 100%; min-width: 0; }
.xg > button.cg-r { cursor: pointer; } .xg > button.cg-r:hover { background: var(--ivory); }
.xg .cg-r > * { min-width: 0; }
.xg .cg-r small { display: block; font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xg .c { text-align: center; justify-self: center; } .xg .r { text-align: right; justify-self: end; }
.xg .inp.sm { height: 36px; width: 100%; }
.cp-tbl > * { grid-template-columns: 52px minmax(0, 1.6fr) 110px minmax(0, 1fr) 40px; }
.cp-ses > * { grid-template-columns: 90px 110px minmax(0, 1fr) minmax(0, 1.2fr) 120px; }
.cp-apps > * { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) 80px 90px auto; }
.cp-joins > * { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) 80px 90px; }
.cp-sg > * { grid-template-columns: minmax(0, 1.6fr) 46px 46px 46px 140px 170px 84px; }
.cp-req > * { grid-template-columns: minmax(0, 1fr) 46px 46px 46px; }
.cp-inv > * { grid-template-columns: 120px 104px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 100px 96px 40px; }
.cp-sp > * { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px minmax(0, 1.1fr) 140px; }
.cp-inv .amt-in { color: var(--ok); }
@media (max-width: 1180px) {
  .cp-inv > * { grid-template-columns: 110px 96px minmax(0, 1.4fr) 96px 96px 36px; } .cp-inv > * > :nth-child(4), .cp-inv > * > :nth-child(5) { display: none; }
  .cp-sg > * { grid-template-columns: minmax(0, 1.4fr) 40px 40px 40px 150px 76px; } .cp-sg > * > :nth-child(5) { display: none; }
}
@media (max-width: 760px) {
  .xg > .cg-h { display: none; }
  .xg > .cg-r { grid-template-columns: 1fr 1fr !important; row-gap: 6px; }
  .xg > .cg-r > :first-child { grid-column: 1 / -1; }
  .xg > .cg-r > * { display: block !important; justify-self: start; text-align: left; }
  .xg .c, .xg .r { justify-self: start; text-align: left; }
}
.pk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pk-card { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
.pk-card.off { opacity: .6; background: var(--ivory); }
.pk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pkc-price b { font-size: 26px; } .pkc-price span { font-size: 12.5px; color: var(--ink-mute); display: block; }
.pk-card p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.pk-card .ticks { font-size: 13px; gap: 4px; }
.co-row { grid-template-columns: 56px 1fr auto; }
.co-row b .badge { margin-left: 6px; vertical-align: 2px; }
.sg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sg-k { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--baize); }
.sg-k.k1 { border-left-color: var(--ok); } .sg-k.k2 { border-left-color: var(--gold); } .sg-k.k3 { border-left-color: var(--err); }
.sg-k span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.sg-k b { font-size: 28px; line-height: 1.1; } .sg-k small { font-size: 12.5px; color: var(--ink-mute); }
.sg-q { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.sg-q svg { width: 14px; height: 14px; } .sg-q.y { background: #e3f1e8; color: var(--ok); } .sg-q.n { background: var(--ivory); color: #b8b19e; }
.sg-lvs { display: grid; gap: 8px; }
.sg-lv { display: grid; grid-template-columns: 1fr 170px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.sg-lv .ck { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.sg-lv .ck input { position: absolute; opacity: 0; }
.sg-lv .ck .box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; flex-shrink: 0; }
.sg-lv .ck .box svg { width: 13px; height: 13px; }
.sg-lv .ck input:checked + .box { background: var(--baize); border-color: var(--baize); color: #fff; }
.sg-lv .ck input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }
.sg-lv .inp:disabled { opacity: .45; }
@media (max-width: 900px) { .sg-kpis { grid-template-columns: 1fr 1fr; } .sg-lv { grid-template-columns: 1fr; } }
.bl-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: stretch; }
.bl-side { display: grid; gap: 18px; align-content: start; }
.bl-perks { columns: 2; column-gap: 24px; display: block; } .bl-perks li { break-inside: avoid; margin-bottom: 6px; }
.bl-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bl-sum > div { display: grid; gap: 2px; } .bl-sum span { font-size: 12.5px; color: var(--ink-mute); } .bl-sum b { font-size: 22px; }
@media (max-width: 980px) { .bl-top { grid-template-columns: 1fr; } .bl-perks { columns: 1; } }
.cp-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-feats span { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 5px 10px; border-radius: 99px; background: var(--ivory); color: var(--ink-mute); }
.cp-feats span.on { background: #e3f1e8; color: var(--ok); } .cp-feats svg { width: 12px; height: 12px; }
.sp-wrap { max-width: 860px; }
.sp-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sp-cat { display: grid; gap: 3px; text-align: left; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: border-color .2s, transform .2s; }
.sp-cat:hover { border-color: var(--baize-3); transform: translateY(-1px); }
.sp-cat b { font-size: 14px; } .sp-cat span { font-size: 12px; color: var(--ink-mute); }
@media (max-width: 900px) { .sp-cats { grid-template-columns: 1fr 1fr; } }
.sp-meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.sp-thread { display: grid; gap: 10px; }
.sp-msg { padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
.sp-msg.sbi { background: var(--ivory); margin-left: clamp(0px, 5vw, 48px); border-color: var(--line-soft); }
.sp-msg > div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; } .sp-msg > div span { color: var(--ink-mute); font-family: var(--f-mono); font-size: 11.5px; }
.sp-msg p { margin: 6px 0 0; font-size: 14.5px; white-space: pre-wrap; }

/* ---------- member score card fly-in ---------- */
.pf-fly { position: fixed; inset: 0; z-index: 300; background: rgba(12,30,32,0); transition: background .25s ease; }
.pf-fly.on { background: rgba(12,30,32,.42); }
html.pf-lock { overflow: hidden; }
.pf-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateX(100%); transition: transform .25s ease; box-shadow: -24px 0 60px -20px rgba(0,0,0,.35); }
.pf-fly.on .pf-panel { transform: none; }
.pf-head { position: sticky; top: 0; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 22px 22px 18px; background: var(--deep); color: var(--on-dark); }
.pf-head .icon-btn { color: var(--on-dark); background: transparent; border: 1px solid rgba(244,240,230,.25); flex-shrink: 0; }
.pf-head .icon-btn:hover { background: rgba(244,240,230,.1); }
.pf-id { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; min-width: 0; }
.pf-av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--deep); font-family: var(--f-display); font-size: 22px; }
.pf-id .eyebrow { color: var(--gold-2); font-size: 10px; }
.pf-id h3 { font-size: 26px; margin: 2px 0 6px; color: var(--on-dark); }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-body { overflow-y: auto; padding: 18px 22px 24px; display: block; }
.pf-body > * + * { margin-top: 18px; }
.pf-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pf-kv > div { display: grid; gap: 2px; } .pf-kv > div:first-child { grid-column: 1 / -1; }
.pf-kv span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.pf-kv b { font-size: 15px; } .pf-kv small { font-size: 12px; color: var(--ink-mute); }
.pf-kv .lnk { justify-self: start; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.pf-kv .lnk svg { width: 14px; height: 14px; }
.pf-note { margin: 0; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--line); gap: 1px; border: 1px solid var(--line); }
.pf-stats > div { background: #fff; padding: 12px 10px; display: grid; gap: 2px; text-align: center; }
.pf-stats b { font-size: 20px; } .pf-stats span { font-size: 11px; color: var(--ink-mute); line-height: 1.25; }
.pf-sc { display: grid; gap: 10px; }
.pf-sc-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.pf-sc-h .ball { width: 14px; height: 14px; }
.pf-sc-h b { font-size: 15px; } .pf-sc-h small { display: block; font-size: 12px; color: var(--ink-mute); }
.pf-sc-t { font-size: 20px; }
.pf-grid { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.pf-gh, .pf-gr, .pf-gt { display: grid; grid-template-columns: minmax(0, 1fr) 96px 38px 44px; gap: 8px; align-items: center; padding: 9px 12px; }
.pf-gh { background: var(--ivory); font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.pf-gr { border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-mute); }
.pf-gr b { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-gr small { font-size: 11px; }
.pf-gr.on { color: var(--ink); } .pf-gr.on b { color: var(--ink); font-weight: 600; }
.pf-gr.win { background: linear-gradient(90deg, rgba(214,169,58,.16), transparent 70%); }
.pf-gt { border-top: 1px solid var(--line); background: var(--ivory); font-weight: 600; font-size: 13px; }
.pf-gh .r, .pf-gr .r, .pf-gt .r { text-align: right; }
.pf-lines { display: grid; gap: 6px; } .pf-lines > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font-size: 13px; } .pf-lines span { color: var(--ink-mute); font-family: var(--f-mono); font-size: 11.5px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pf-chips span { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: #e3f1e8; color: var(--ok); } .pf-chips svg { width: 12px; height: 12px; }
.pf-p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pf-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px; border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-mute); }
.pf-empty svg { width: 24px; height: 24px; }
.pf-foot { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; background: var(--paper); border-top: 1px solid var(--line); }
.pf-foot .btn-baize { margin-left: auto; }
.mem[data-profile] { cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.mem[data-profile]:hover, .mem[data-profile]:focus-visible { border-color: #d5ccb6; transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(12,30,32,.45); }
@media (max-width: 520px) { .pf-stats { grid-template-columns: 1fr 1fr; } .pf-gh, .pf-gr, .pf-gt { grid-template-columns: minmax(0, 1fr) 82px 40px; } .pf-gh > :nth-child(3), .pf-gr > :nth-child(3), .pf-gt > :nth-child(3) { display: none; } }

/* ---------- prototype console: club features matrix ---------- */
.acf { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.acf-r { display: grid; grid-template-columns: minmax(170px, 1.4fr) 150px repeat(6, minmax(70px, 1fr)); gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.acf-r:first-child { border-top: 0; }
.acf-h { background: var(--ivory); font-size: 12px; font-weight: 600; }
.acf-h small, .acf-r > span small { display: block; font-size: 11px; color: var(--ink-mute); font-weight: 400; }
.acf-r > span:nth-child(n+3) { text-align: center; justify-self: center; }
.acf-c { position: relative; } .acf-c.ex::after { content: ""; position: absolute; top: -3px; right: -6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
@media (max-width: 1000px) { .acf { overflow-x: auto; } .acf-r { min-width: 860px; } }
@media (max-width: 760px) {
  .cl-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cl-cta > * { width: 100%; justify-content: center; }
  .cl-cta > :first-child { grid-column: 1 / -1; }
  .cl-cta .btn-lg { padding-left: 12px; padding-right: 12px; font-size: 14px; }
}

/* ---------- event banner: one tidy top row, then tags, title, meta ---------- */
.evh .wrap { gap: 0; }
.evh-top { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
.evh-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); background: rgba(244,240,230,.06); border: 1px solid rgba(244,240,230,.18); transition: background .2s, transform .2s; flex-shrink: 0; }
.evh-back:hover { background: rgba(244,240,230,.14); transform: translateX(-2px); }
.evh-back svg { width: 17px; height: 17px; }
.evh-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.evh-st { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: rgba(244,240,230,.08); color: var(--on-dark); border: 1px solid rgba(244,240,230,.14); }
.evh-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); }
.evh-st.open i { background: #5fd08a; box-shadow: 0 0 0 4px rgba(95,208,138,.18); }
.evh-st.done i { background: var(--on-dark-soft); } .evh-st.cx { color: #f5b3ab; } .evh-st.cx i { background: #e8453c; }
.evh h1 { font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02; max-width: 16ch; margin: 0; letter-spacing: -.02em; }
.evh-sub { display: block; font-size: .5em; line-height: 1.25; margin-top: 12px; font-style: italic; color: var(--gold-2); letter-spacing: 0; }
.evh .evh-meta { margin-top: 26px; row-gap: 10px; }
.evh .cd { margin-top: 30px; }
@media (max-width: 760px) { .evh-top .crumbs { font-size: 11.5px; } .evh h1 { max-width: none; } }

/* ---------- club portal: booking calendar ---------- */
.bc-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.bc-nav { display: flex; align-items: center; gap: 8px; }
.bc-nav b { font-size: 14.5px; margin-left: 6px; }
.bc-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: 12px; color: var(--ink-mute); }
.bc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.bc-sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid; }
.bc-sw.k-paid, .bc-bk.k-paid { background: #e3f1e8; border-color: #b9dcc6; color: #155e36; }
.bc-sw.k-counter, .bc-bk.k-counter { background: #fbf0db; border-color: #efd29d; color: #7a5206; }
.bc-sw.k-league, .bc-bk.k-league { background: #e6eef0; border-color: #b8ccd1; color: var(--baize); }
.bc-sw.k-walk, .bc-bk.k-walk { background: #eee9f8; border-color: #d3c7ef; color: #5b3aa8; }
.bc-bk.k-done { background: #f1efe9; border-color: #e1dccf; color: var(--ink-mute); }
.bc-grid { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.bc-hrow, .bc-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
.bc-hrow { background: var(--ivory); border-bottom: 1px solid var(--line); height: 34px; }
.bc-hours { position: relative; }
.bc-hours span { position: absolute; top: 9px; transform: translateX(-50%); font: 500 11px var(--f-mono); color: var(--ink-mute); }
.bc-hours span:first-child { transform: none; padding-left: 4px; }
.bc-row + .bc-row { border-top: 1px solid var(--line-soft); }
.bc-t { display: grid; align-content: center; padding: 0 14px; border-right: 1px solid var(--line-soft); background: #fcfbf8; }
.bc-t b { font: 700 14px var(--f-mono); } .bc-t small { font-size: 11px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-lane { position: relative; height: 54px; cursor: copy; }
.bc-lane:hover { background: rgba(26,58,61,.025); }
.bc-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); pointer-events: none; }
.bc-bk { position: absolute; top: 6px; bottom: 6px; border-radius: 9px; border: 1px solid; padding: 4px 9px; display: grid; align-content: center; text-align: left; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; z-index: 1; }
.bc-bk:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(0,0,0,.4); z-index: 2; }
.bc-bk b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-bk span { font-size: 10.5px; opacity: .8; white-space: nowrap; }
.bc-now { position: absolute; top: -4px; bottom: 0; width: 2px; background: #e8453c; z-index: 3; pointer-events: none; }
.bc-row:first-of-type .bc-now em { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font: 700 10px var(--f-mono); font-style: normal; color: #fff; background: #e8453c; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.bc-row:not(:first-of-type) .bc-now em { display: none; }
.bc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bc-day { display: grid; gap: 6px; align-content: start; text-align: left; padding: 12px; min-height: 190px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: border-color .2s, transform .2s; }
.bc-day:hover { border-color: var(--baize-3); transform: translateY(-2px); }
.bc-day.today { border-color: var(--baize); box-shadow: inset 0 0 0 1px var(--baize); }
.bc-day.closed { background: var(--ivory); color: var(--ink-mute); }
.bc-dh { display: flex; justify-content: space-between; align-items: baseline; } .bc-dh b { font-size: 14px; } .bc-dh span { font-size: 11.5px; color: var(--ink-mute); }
.bc-util { height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; } .bc-util i { display: block; height: 100%; background: var(--baize-3); }
.bc-day small { font-size: 11.5px; color: var(--ink-mute); }
.bc-items { display: grid; gap: 4px; margin-top: 2px; }
.bc-it { font-size: 11px; padding: 3px 6px; border-radius: 6px; border: 1px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-it.k-paid { background: #e3f1e8; border-color: #b9dcc6; color: #155e36; } .bc-it.k-counter { background: #fbf0db; border-color: #efd29d; color: #7a5206; } .bc-it.k-league { background: #e6eef0; border-color: #b8ccd1; color: var(--baize); } .bc-it.k-walk { background: #eee9f8; border-color: #d3c7ef; color: #5b3aa8; } .bc-it.k-done { background: #f1efe9; border-color: #e1dccf; color: var(--ink-mute); }
.bc-more { font-size: 11px; color: var(--ink-mute); padding-left: 4px; }
@media (max-width: 1100px) { .bc-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bc-grid { overflow-x: auto; } .bc-hrow, .bc-row { min-width: 720px; } .bc-week { grid-template-columns: 1fr 1fr; } .bc-leg { margin-left: 0; } }
.evh-tags .badge { height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; background: rgba(244,240,230,.08); border: 1px solid rgba(244,240,230,.14); color: var(--on-dark); gap: 7px; }

/* members directory tile v2: calm — full name and club, role pill top right, one quiet line for rank · tour · points */
.mem.mem2 { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px 14px; padding: 18px 18px 14px; }
.mem2 > div:nth-child(2) { padding-top: 1px; gap: 2px; }
.mem2 > div:nth-child(2) b { line-height: 1.25; overflow-wrap: anywhere; }
.mem2 > div:nth-child(2) span { line-height: 1.35; overflow-wrap: anywhere; }
.mem-role { align-self: start; height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 99px; font-size: 11px !important; font-weight: 600; background: var(--ivory); color: var(--ink-soft) !important; white-space: nowrap; border: 1px solid var(--line-soft); }
.mem2 .mem-meta { display: flex; align-items: center; gap: 8px; padding-top: 12px; margin-top: 2px; font-size: 13px; }
.mem2 .mem-meta > span { font-size: 13px !important; }
.mem-rk { font-weight: 600; color: var(--ink) !important; }
.mem-rk.g1 { color: #8a6412 !important; }
.mem-sep { color: var(--line) !important; }
.mem-tour { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-soft) !important; }
.mem-tour .ball { width: 8px; height: 8px; flex: none; }
.mem-tour em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem2 .mem-meta .mem-pts { margin-left: auto; color: var(--ink-mute) !important; white-space: nowrap; }
.mem2 .mem-meta .mem-pts b { font-size: 13px; font-weight: 600; color: var(--baize); }
.mem-note { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft) !important; min-width: 0; }
.mem-note svg { width: 14px; height: 14px; color: var(--ink-mute); flex: none; }
.mem-open { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px !important; font-weight: 600; color: var(--baize) !important; opacity: 0; transition: opacity .2s; }
.mem-open svg { width: 13px; height: 13px; }
.mem2:hover .mem-open, .mem2:focus-visible .mem-open { opacity: 1; }
.mem2:focus:not(:focus-visible) { outline: none; }

/* club portal calendar: drag to move */
.bc-bk[data-bkitem]:not(.k-done), .bc-it[data-bkitem]:not(.k-done) { cursor: grab; touch-action: none; }
.bc-bk.dragging { z-index: 5; cursor: grabbing; box-shadow: 0 12px 26px -10px rgba(12,30,32,.55); outline: 2px solid var(--gold); outline-offset: 1px; transition: none; }
.bc-bk.dragging.bad { outline-color: var(--err); background: #fbe4e2 !important; color: var(--err) !important; }
.bc-it.dragging { opacity: .35; }
.bc-lane.drop { background: rgba(214,169,58,.08); }
.bc-lane.drop-bad { background: rgba(200,30,30,.06); }
.bc-day.drop { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(214,169,58,.25); }
.bc-day.drop-bad { border-color: var(--err) !important; box-shadow: 0 0 0 3px rgba(200,30,30,.15); }
.bc-dragging, .bc-dragging * { user-select: none; cursor: grabbing !important; }
.bc-ghost { position: fixed; z-index: 400; pointer-events: none; max-width: 220px; padding: 6px 10px !important; border-radius: 8px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); background: var(--paper); font-size: 12px; }
.mv-diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 16px; }
.mv-diff > div { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ivory); }
.mv-diff > div.now { background: rgba(26,58,61,.06); border-color: var(--baize-3); }
.mv-diff small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.mv-diff b { font-size: 14.5px; } .mv-diff .mono { font-size: 12px; color: var(--ink-soft); }
.mv-diff > div:first-child b, .mv-diff > div:first-child .mono { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.3); }
.mv-arr { color: var(--gold); display: grid; } .mv-arr svg { width: 20px; height: 20px; }
.mv-n { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.mv-n input { width: 18px; height: 18px; accent-color: var(--baize); margin-top: 2px; }
.mv-n span { display: grid; gap: 2px; } .mv-n b { font-size: 14px; } .mv-n small { font-size: 12.5px; color: var(--ink-mute); }
.mv-ch { display: flex; gap: 18px; padding: 12px 2px 10px; font-size: 13.5px; }
.mv-ch label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; } .mv-ch input { accent-color: var(--baize); width: 16px; height: 16px; }
.mv-m textarea { width: 100%; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.mv-m [hidden] { display: none !important; }
@media (max-width: 520px) { .mv-diff { grid-template-columns: 1fr; } .mv-arr { transform: rotate(90deg); justify-self: center; } }
/* rankings: switching tour swaps the standings in place with a soft fade */
.tp-swap .rk-sec .wrap > :not(.tpk):not(.tp-sub):not(.tp-gap), .tp-swap .ph-meta { animation: tpSwap .42s var(--ease) both; }
.tp-swap .rk-sec .wrap > :nth-child(n+5) { animation-delay: .06s; }
@keyframes tpSwap { from { opacity: 0; transform: translateY(8px); } }
.tp-t, .tp-s { transition: background .25s, color .25s, box-shadow .25s, border-color .25s; }
.tp-t:active, .tp-s:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .tp-swap * { animation: none !important; } }

/* booking flows opened from a club: the club's brand, not SBI's */
.fl-club .fl-rail { --gold: var(--cb2); --gold-2: var(--cb2); --deep: var(--cb1); background: var(--cb1); }
.fl-club .fl-rail::after { background: linear-gradient(180deg, color-mix(in srgb, var(--cb1) 84%, transparent), color-mix(in srgb, var(--cb1) 96%, #000) 60%); }
.fl-club .fl-rail-bg { opacity: .28; filter: grayscale(1); }
.fl-club .fl-main { --baize: var(--cb1); --baize-3: color-mix(in srgb, var(--cb1) 80%, #fff); --deep: var(--cb1); }
.fl-club .fl-main .btn-gold { background: var(--cb1); border-color: var(--cb1); color: #fff; }
.fl-club .fl-main .btn-gold:hover { background: color-mix(in srgb, var(--cb1) 88%, #000); }
.fl-club .fl-steps li.on .fs-n { color: var(--cb2-on); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cb2) 22%, transparent); }
.fl-club .fl-steps li.done .fs-n { background: color-mix(in srgb, var(--cb2) 30%, var(--cb1)); border-color: transparent; }
.fl-club .fl-bar i { background: var(--cb1); }
.fl-cbrand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.fl-cbrand img { width: 46px; height: 46px; border-radius: 12px; background: #fff; padding: 3px; object-fit: contain; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); flex: none; }
.fl-cbrand .brand-txt b { font-family: var(--f-display); font-size: 18px; line-height: 1.15; font-weight: 500; }
.fl-cbrand .brand-txt span { letter-spacing: .02em !important; text-transform: none !important; font-size: 12px !important; }
.fl-powered { margin: -18px 0 0; font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .02em; }
@media (max-width: 900px) { .fl-cbrand img { width: 34px; height: 34px; border-radius: 9px; } .fl-powered { display: none; } }
/* club portal: booking page colours */
.cp-brand { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-bs { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); transition: border-color .2s, box-shadow .2s; }
.cp-bs i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.cp-bs:hover { border-color: #d5ccb6; }
.cp-bs.on { border-color: var(--baize); box-shadow: 0 0 0 3px rgba(26,58,61,.12); color: var(--ink); }
.field .lbl em { font-style: normal; font-weight: 400; color: var(--ink-mute); margin-left: 6px; }
.mem.mem2 { grid-template-rows: auto 1fr; }
.mem2 .mem-meta { align-self: end; }
.fl-club .fl-head h2 em { color: var(--cb2); }

/* coming soon page (menu items the Super Admin marks "Coming soon") */
.soon { padding: clamp(56px, 8vw, 120px) 0; background: radial-gradient(120% 80% at 90% 10%, rgba(214,169,58,.12), transparent 55%), var(--ivory); }
.soon-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.soon-txt h1 { font-size: clamp(48px, 7vw, 88px); line-height: 1; margin: 18px 0 20px; }
.soon-txt .lead { font-size: 20px; color: var(--ink); margin: 0 0 12px; }
.soon-sub { color: var(--ink-soft); max-width: 520px; margin: 0 0 28px; }
.soon-act { display: flex; gap: 12px; flex-wrap: wrap; }
.soon-help { display: flex; gap: 8px; align-items: center; margin-top: 26px; font-size: 13.5px; color: var(--ink-mute); }
.soon-help svg { width: 16px; height: 16px; }
.soon-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(12,30,32,.3)); }
.soon-ball { offset-path: path("M120 210 L370 52"); animation: soonRoll 3.6s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes soonRoll { 0%, 12% { offset-distance: 0%; opacity: 1; } 70% { offset-distance: 94%; opacity: 1; } 78% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
.soon-cue { animation: soonCue 3.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes soonCue { 0% { translate: -18px 11px; } 10% { translate: 6px -4px; } 16%, 100% { translate: -30px 19px; } }
.ml-soon { font-style: normal; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; padding: 2px 6px; border-radius: 5px; background: rgba(214,169,58,.18); color: #8a6412; vertical-align: 2px; }
@media (max-width: 880px) { .soon-in { grid-template-columns: 1fr; } .soon-art { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .soon-ball, .soon-cue { animation: none; } }
/* category icons uploaded in the console replace the ball */
.ball.ball-img { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); overflow: hidden; display: inline-grid; place-items: center; }
.ball.ball-img::after, .ball.ball-img::before { display: none; }
.ball.ball-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

</head>
<body>
<a class="skip" href="#app">Skip to content</a>
<div id="top"></div>
<main id="app" tabindex="-1"></main>
<div id="foot"></div>
<button class="a11y-fab" id="a11yFab" aria-label="Display options"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="4.5" r="1.8"/><path d="M5 8.5c2.3.7 4.6 1 7 1s4.7-.3 7-1M12 9.5V14m0 0-3 6.5M12 14l3 6.5"/></svg></button>
<div class="toasts" id="toasts" aria-live="polite"></div>


/* ==========================================================================
   Builder-only adjustments. The prototype is a single-page app whose sections
   live inside #app; a builder page drops the same sections straight into the
   document, so the few rules that depended on that wrapper are restated here.
   ========================================================================== */
/* A block is a full-width section wherever the builder drops it. */
.lb-container > .sbi-blk, .lb-container > [class*="sbi-"] { width: 100%; }
.sbi-blk > section:first-child { margin-top: 0; }

/* Photographs where the prototype had only vector art. Every one of these
   containers was written for an inline <svg>; the blocks put a real image in
   the same slot, so the image needs the sizing the svg had. */
.pp-img img, .hs-art img, .pn-art img, .pc-media img, .ev-hero .ph-art img, .club-hero .ph-art img { width: 100%; height: 100%; object-fit: cover; }
.pc-media img { transition: transform 1s var(--ease); }
.pcard:hover .pc-media img { transform: scale(1.05); }
.pcard.out .pc-media img { filter: grayscale(.9) opacity(.6); }
.person:hover .pp-img img { transform: scale(1.04); }
.pp-img img { transition: transform 1s var(--ease); }
.hs-slide.on .hs-art img { animation: kenburns 14s ease-out forwards; }

/* The mosaic's figures are buttons when a lightbox is switched on. */
.mosaic [data-lb-i], .news-grid [data-lb-i] { cursor: zoom-in; }

/* Rows the county filter has hidden. */
.club-grid [data-county-row][hidden] { display: none; }
.chips [data-county].on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Coach and board cards carry a short paragraph and a button the prototype's
   person card never had. */
.pp-body p { font-size: 13.5px; color: var(--ink-mute); }
.pp-body .chips { margin-top: 4px; }
.pp-body .btn { justify-self: start; margin-top: 8px; }

/* A tier price row in the join band is a link here, not a click handler. */
a.tm { text-decoration: none; }

/* The footer block carries a blurb and social links the prototype's footer did
   not; its own rules target <span>, because nothing in it was a real link. */
.ftr .ftr-brand p { margin-top: 18px; font-size: 14px; max-width: 34ch; }
.ftr .ftr-links a:hover, .ftr .fb-links a:hover, .ftr-contact a:hover { color: var(--on-dark); }
.ftr .socials { display: flex; gap: 8px; }
.ftr .socials a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--felt-line); transition: background .2s, color .2s; }
.ftr .socials a:hover { background: var(--on-dark); color: var(--deep); }
.ftr .socials svg { width: 16px; height: 16px; }

/* A brand lockup uploaded as an image keeps its own proportions. The
   prototype's mark is a square SVG, and .brand-mark sizes it 42x42; a
   wordmark is wider than it is tall and was being squashed into that
   square. Only the <img> is freed — Art::mark() draws an <svg> with the
   same class and should stay square. */
img.brand-mark { width: auto; height: 42px; max-width: 200px; object-fit: contain; }

/* The header block's search is a real form, not the prototype's button. */
.hdr-block .u-search { display: flex; align-items: center; gap: 8px; }
.hdr-block .u-search svg { width: 15px; height: 15px; }
.hdr-block .hdr { position: static; }
.hdr-block .brand img { height: 38px; width: auto; }

/* Tabs and headings the prototype drew as <span> with a click handler are real
   links here, so the rules that styled those spans need to reach an <a> too. */
.subnav a { height: 36px; padding: 0 16px; border-radius: var(--pill); display: inline-flex; align-items: center; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; transition: background .2s, color .2s; }
.subnav a:hover { color: var(--ink); background: var(--ivory); }
.subnav a.on { background: var(--ink); color: var(--paper); }
.crumbs a:hover { color: var(--on-dark); }

/* The segmented switches are links too — the period switch and the view toggle
   on the event calendar, and the view toggle on the news archive — so that
   filtering works with JavaScript off. The prototype's `.seg button` rules
   never reached them, which left "Upcoming Results All" as three words of
   unstyled inline text running out of the pill. A button centres its own label
   and honours a height; an anchor has to be told to. */
.seg a {
  height: 36px; padding: 0 18px; border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; transition: background .2s, color .2s;
}
.seg a.on { background: var(--ink); color: var(--paper); }
.seg a svg { width: 16px; height: 16px; }
.on-dark .seg a { color: var(--on-dark-soft); }
.on-dark .seg a.on { background: var(--on-dark); color: var(--deep); }

/* A baize surface is a dark surface: the prototype only ever set lead colour
   for .on-dark, and the CTA band is .on-baize. */
.on-baize .lead, .on-baize p { color: var(--on-dark-soft); }
.on-baize h1 em, .on-baize h2 em, .on-baize h3 em { color: var(--gold-2); }

/* The builder canvas mounts each block in a shadow root, where `body` never
   reaches. This carries the same type and colour the page would give it. */
.sbi-live-root {
  background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sbi-live-root *, .sbi-live-root *::before, .sbi-live-root *::after { box-sizing: border-box; }
.sbi-live-root img, .sbi-live-root svg { display: block; max-width: 100%; }
.sbi-live-root svg { flex-shrink: 0; }
.sbi-live-root a { color: inherit; text-decoration: none; }
.sbi-live-root button:not([class*="btn"]) { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
/* A button that is a design-system button keeps its own fill: this reset is an
   element selector and would otherwise outrank .btn-gold inside the canvas. */
.sbi-live-root button[class*="btn"] { cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------------------
   The server-rendered header.

   The prototype built each panel on demand and removed it again, so nothing in
   the design ever needed a hidden state. Here every panel is in the markup from
   the start — which is what makes the menu work with JavaScript off, and what
   lets the editor canvas draw it — so the ones whose display the design sets
   have to be told what `hidden` means.
   ------------------------------------------------------------------------- */
.drawer[hidden],
.m-sub[hidden],
.mega[hidden],
.dd[hidden],
.drawer-bg[hidden] { display: none; }

/* The drawer's own links, which the prototype wrote as <span>. */
.m-sub a { display: block; padding: 10px 0 10px 16px; border-left: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; }
.m-sub a:hover { color: var(--baize); border-left-color: var(--baize); }

/* The utility search is a real form here, not a button that opens an overlay. */
.u-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: inherit; font: inherit; outline: none; }
.u-search input::placeholder { color: inherit; opacity: .75; }

/* The brand mark may be a supplied logo rather than the drawn one. */
img.brand-mark { object-fit: contain; }

/* The block wrapper has to be transparent to layout, or the sticky header would
   only stick within it — which is the height of the header itself, so it would
   scroll away at once. The prototype does the same to its own #top. */
.sbi-header { display: contents; }

/* A supplied photograph fills the same frame the drawn tile does. */
.mega-coach .mc-img img { width: 100%; height: 100%; object-fit: cover; }

/* The newsletter form is the prototype's single pill — see .ftr-news form
   above. It had been turned into a grid to make room for a consent tick under
   it; the tick is gone, and so is the reshaping. */

/* The next-event bar with nothing scheduled: an arrow where the countdown sits,
   so the bar keeps its shape rather than collapsing to a label. */
.hs-next-go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--felt-line); flex-shrink: 0; }
.hs-next:hover .hs-next-go { background: var(--gold); color: var(--deep); border-color: var(--gold); }

/* ---------------------------------------------------------------------------
   Links where the prototype had spans.

   The prototype was a single-page app: everything clickable was a <span> with a
   handler, so the design system styles `span`. Here they are real anchors, and
   an element selector does not follow a class rename — so each of these mirrors
   the rule above it. Check them if sbi.css is re-extracted.
   ------------------------------------------------------------------------- */

/* mirrors `.utility .socials span` */
.utility .socials :is(a, button) { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(244,240,230,.2); cursor: pointer; transition: background .2s, color .2s; }
.utility .socials :is(a, button):hover { background: var(--on-dark); color: var(--deep); }

/* mirrors `.subnav span` */
.subnav :is(a, button) { height: 36px; padding: 0 16px; border-radius: var(--pill); display: inline-flex; align-items: center; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; transition: background .2s, color .2s; }
.subnav :is(a, button):hover { color: var(--ink); background: var(--ivory); }
.subnav :is(a, button).on { background: var(--ink); color: var(--paper); }

/* mirrors `.crumbs span[data-goto]:hover` */
.crumbs a:hover { color: var(--on-dark); }
.crumbs.dark a:hover { color: var(--ink); }

/* ---------- search results: the tab strip, the sidebar and the sort ----------
   The prototype re-rendered this page in place, so its tabs and filters were
   buttons. Served from the server every narrowing has an address of its own and
   they are anchors — the one that is already on, and the one with nothing
   behind it, are spans, because neither is somewhere to go. `.off` stands in
   for the `:disabled` the buttons carried. */

/* mirrors `.sx-tabs button` */
.sx-tabs :is(a, span) { flex: none; padding: 12px 14px 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); border-bottom: 2.5px solid transparent; transition: color .2s, border-color .2s; }
.sx-tabs a:hover { color: var(--ink); }
.sx-tabs :is(a, span).on { color: var(--ink); border-color: var(--baize-3); font-weight: 600; }
.sx-tabs :is(a, span).off { opacity: .4; cursor: default; }

/* mirrors `.sx-opt:disabled` */
.sx-opt.off { opacity: .35; cursor: default; }

/* The overlay's "see all results" row, reached by the arrow keys rather than by
   the pointer. It is the one row in the panel `.srch-r.on` does not cover, and
   without this the selection appears to vanish when it reaches the top. */
.srch-all.on { background: var(--baize); }

/* mirrors `.seg button` and `.sx-f .seg button` */
.seg :is(a, span) { height: 36px; padding: 0 18px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.seg :is(a, span).on { background: var(--ink); color: var(--paper); }
.sx-f .seg :is(a, span) { flex: 1; white-space: nowrap; font-size: 13px; padding: 0 8px; }

/* ---------------------------------------------------------------------------
   A block that continues the one above it.

   The design composes some pairs as a single band — the split intro and the
   figures beneath it are one <section> in the prototype, separated by a margin,
   not two sections whose paddings stack. As separate blocks they are separately
   arrangeable, which is the point of a builder, so the join is a class instead:
   the block drops its own top padding and takes the design's own gap, and the
   block before it gives up its bottom padding.
   ------------------------------------------------------------------------- */
.sbi-blk.sbi-join { padding-top: 0; margin-top: clamp(40px, 6vw, 72px); }
.sbi-blk:has(+ .sbi-blk.sbi-join) { padding-bottom: 0; }

/* ---------- news archive: pager and view toggle as links ----------
   The prototype's archive was a single-page app, so its pager and its view
   toggle were buttons it re-rendered in place. Served from the server every
   state of the archive has an address of its own, so both are anchors — and the
   rules that styled the buttons are extended to them rather than restated under
   new class names, so the two can never drift apart. */
.nx-pager a, .nx-pager span.on, .nx-pager span.off { min-width: 42px; height: 42px; padding: 0 6px; border-radius: 21px; display: grid; place-items: center; font: 500 13.5px var(--f-mono); border: 1px solid var(--line); background: var(--paper); transition: all .2s; }
.nx-pager a:hover { border-color: var(--ink); }
.nx-pager span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nx-pager span.off { opacity: .35; cursor: default; }
.nx-view a { width: 44px; height: 36px; display: grid; place-items: center; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: background .2s, color .2s; }
.nx-view a.on { background: var(--ink); color: var(--paper); }
/* The year the archive is currently showing, held in the state its own hover
   describes — the prototype never marked it, because it never stayed on it. */
.nx-yr.on { border-color: var(--baize); background: var(--deep); color: var(--on-dark); }
.nx-yr.on .mono { color: var(--on-dark-mute); }
.nx-yr.on .nx-spark i { background: var(--gold-2); }
/* The archive's results are their own destination: every filter is a fresh page,
   so its links carry #news to land the reader back at the toolbar rather than at
   the masthead. This is what keeps the sticky header from covering it. */
.nx-sec { scroll-margin-top: calc(var(--header-h) + 14px); }
/* While a filter is being fetched. The results stay put and stay readable — they
   are still the right answer to the previous question — but they dim enough that
   a second click on a chip does not feel like it went nowhere. */
[data-nx-block][aria-busy="true"] [data-nx-body] { opacity: .55; transition: opacity .18s ease; }
[data-nx-block][aria-busy="true"] .nx-tools { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  [data-nx-block][aria-busy="true"] [data-nx-body] { transition: none; }
}

/* ==========================================================================
   Header and footer design controls.

   The one hand-written block in this sheet, and the reason it is kept when the
   rest is re-extracted from the prototype.

   Everything above sets the header's colours, sizes and weights literally. A
   header built in the page builder has to be able to change them, so each of
   those values is re-declared here through a custom property whose fallback is
   the value the prototype already used. A header with no design settings is
   therefore byte-identical to the one above; a header with settings gets them
   from the custom properties App\PageBuilder\Sbi\Chrome writes onto the block.

   Scoped to .sbi-header / .ftr so the properties cannot leak into a page that
   happens to reuse .btn or .socials.

   Keep this block when re-extracting sbi.css from the prototype.
   ========================================================================== */

/* ---------------------------------------------------------- utility bar */
.sbi-header .utility {
  background: var(--sbih-util-bg, var(--deep));
  color: var(--sbih-util-fg, var(--on-dark-soft));
  font-size: var(--sbih-util-size, 12.5px);
}
.sbi-header .utility .wrap { height: var(--sbih-util-h, 44px); gap: var(--sbih-util-gap, 16px); }
.sbi-header .utility .u-left, .sbi-header .utility .u-right { gap: var(--sbih-util-item-gap, 22px); }
.sbi-header .utility .u-item:hover, .sbi-header .utility .live-pill { color: var(--sbih-util-fg-strong, var(--on-dark)); }
.sbi-header .utility .live-pill i { background: var(--sbih-util-pill, #ef4444); }
.sbi-header .utility .socials span { border-color: var(--sbih-util-social-border, rgba(244,240,230,.2)); }
.sbi-header .utility .socials span:hover {
  background: var(--sbih-util-social-hover-bg, var(--on-dark));
  color: var(--sbih-util-social-hover-fg, var(--deep));
}
.sbi-header .u-search {
  background: var(--sbih-search-bg, rgba(244,240,230,.08));
  border-color: var(--sbih-search-border, rgba(244,240,230,.16));
  color: var(--sbih-search-fg, var(--on-dark-soft));
  min-width: var(--sbih-search-w, 220px);
}

/* --------------------------------------------------------------- the bar */
.sbi-header .hdr {
  background: var(--sbih-bar-bg, rgba(251, 250, 246, .86));
  backdrop-filter: saturate(160%) blur(var(--sbih-bar-blur, 18px));
  -webkit-backdrop-filter: saturate(160%) blur(var(--sbih-bar-blur, 18px));
  z-index: var(--sbih-bar-z, 50);
}
.sbi-header .hdr.scrolled {
  border-bottom-color: var(--sbih-bar-border, var(--line));
  box-shadow: var(--sbih-bar-shadow, 0 8px 30px rgba(18, 20, 18, .05));
}
.sbi-header .hdr > .wrap { height: var(--sbih-bar-h, var(--header-h)); gap: var(--sbih-bar-gap, 24px); }

/* A header whose brand sits in the middle, or whose nav hugs the brand. The
   nav's `margin-left:auto` is what pushes everything right by default, so the
   three arrangements are three values for that one margin. */
.sbi-header .hdr > .wrap { justify-content: var(--sbih-bar-justify, flex-start); }
.sbi-header .nav { margin-left: var(--sbih-nav-push, auto); gap: var(--sbih-nav-gap, 2px); }
.sbi-header .hdr-actions { margin-left: var(--sbih-act-push, 12px); gap: var(--sbih-act-gap, 8px); }

/* ------------------------------------------------------------- the brand */
.sbi-header .brand { gap: var(--sbih-brand-gap, 12px); }
.sbi-header .brand-mark { width: var(--sbih-brand-mark, 42px); height: var(--sbih-brand-mark, 42px); }
.sbi-header .brand-txt b {
  font-size: var(--sbih-brand-size, 17px);
  font-weight: var(--sbih-brand-weight, 500);
  color: var(--sbih-brand-fg, inherit);
}
.sbi-header .brand-txt span {
  font-size: var(--sbih-brand-sub-size, 9.5px);
  letter-spacing: var(--sbih-brand-sub-track, .34em);
  color: var(--sbih-brand-sub-fg, var(--ink-mute));
}

/* -------------------------------------------------------- the navigation */
.sbi-header .nav-item {
  height: var(--sbih-nav-h, 40px);
  padding: 0 var(--sbih-nav-pad, 13px);
  font-size: var(--sbih-nav-size, 14px);
  font-weight: var(--sbih-nav-weight, 500);
  color: var(--sbih-nav-fg, var(--ink-2));
  border-radius: var(--sbih-nav-radius, var(--pill));
  text-transform: var(--sbih-nav-transform, none);
  letter-spacing: var(--sbih-nav-track, normal);
}
.sbi-header .nav-item:hover, .sbi-header .nav-item.open {
  background: var(--sbih-nav-hover-bg, var(--ivory));
  color: var(--sbih-nav-hover-fg, var(--ink));
}
.sbi-header .nav-item.active { color: var(--sbih-nav-active, var(--baize)); }
.sbi-header .nav-item.active::after { background: var(--sbih-nav-active, var(--baize)); }
.sbi-header .nav-item.sbi { color: var(--sbih-nav-gold, var(--gold)); }
.sbi-header .nav-item.sbi:hover, .sbi-header .nav-item.sbi.open {
  background: var(--sbih-nav-gold-hover-bg, var(--gold-soft));
  color: var(--sbih-nav-gold-hover-fg, #8a6408);
}

/* ---------------------------------------------------------- the actions */
.sbi-header .hdr-actions .btn {
  height: var(--sbih-btn-h, 42px);
  padding: 0 var(--sbih-btn-pad, 18px);
  font-size: var(--sbih-btn-size, 13.5px);
  border-radius: var(--sbih-btn-radius, var(--pill));
}
.sbi-header .hdr-actions .btn-gold { --bg: var(--sbih-book-bg, var(--gold-2)); --fg: var(--sbih-book-fg, var(--deep)); }
.sbi-header .hdr-actions .btn-baize { --bg: var(--sbih-shop-bg, var(--baize)); --fg: var(--sbih-shop-fg, var(--on-dark)); }
.sbi-header .hdr-actions .btn-ghost {
  --fg: var(--sbih-ghost-fg, var(--ink));
  border-color: var(--sbih-ghost-border, var(--line));
}
.sbi-header .icon-btn {
  background: var(--sbih-icon-bg, var(--paper));
  color: var(--sbih-icon-fg, var(--ink));
  border-color: var(--sbih-icon-border, var(--line));
  border-radius: var(--sbih-icon-radius, 50%);
}
.sbi-header .icon-btn:hover {
  background: var(--sbih-icon-hover-bg, var(--ink));
  color: var(--sbih-icon-hover-fg, var(--paper));
  border-color: var(--sbih-icon-hover-bg, var(--ink));
}
.sbi-header .cart-count { background: var(--sbih-cart-bg, var(--crimson)); color: var(--sbih-cart-fg, #fff); }

/* ------------------------------------------------------- the small menus */
.sbi-header .dd { background: var(--sbih-dd-bg, var(--paper)); border-radius: var(--sbih-dd-radius, var(--r-lg)); }
.sbi-header .dd-item:hover { background: var(--sbih-dd-hover-bg, var(--ivory)); }
.sbi-header .dd-ico { background: var(--sbih-dd-ico-bg, var(--ivory)); color: var(--sbih-dd-ico-fg, var(--baize)); }
.sbi-header .dd-item:hover .dd-ico {
  background: var(--sbih-dd-ico-hover-bg, var(--baize));
  color: var(--sbih-dd-ico-hover-fg, var(--on-dark));
}
.sbi-header .dd-t { color: var(--sbih-dd-fg, inherit); }
.sbi-header .dd-d { color: var(--sbih-dd-sub, var(--ink-mute)); }

/* -------------------------------------------------------- the mega menus */
.sbi-header .mega {
  background: var(--sbih-mega-bg, var(--paper));
  border-top-color: var(--sbih-mega-border, var(--line));
}
.sbi-header .mega-inner { gap: var(--sbih-mega-gap, 40px); padding-block: var(--sbih-mega-pad, 32px) calc(var(--sbih-mega-pad, 32px) + 4px); }
.sbi-header .mega-col-title { color: var(--sbih-mega-title, var(--ink-mute)); border-bottom-color: var(--sbih-mega-border, var(--line)); }
.sbi-header .mega-link:hover { background: var(--sbih-mega-hover-bg, var(--ivory)); }
.sbi-header .mega-link .ml-ico { background: var(--sbih-dd-ico-bg, var(--ivory)); color: var(--sbih-dd-ico-fg, var(--baize)); }
.sbi-header .mega-link:hover .ml-ico {
  background: var(--sbih-dd-ico-hover-bg, var(--baize));
  color: var(--sbih-dd-ico-hover-fg, var(--on-dark));
}
.sbi-header .mega-side { background: var(--sbih-mega-side-bg, var(--deep)); color: var(--sbih-mega-side-fg, var(--on-dark)); }

/* ------------------------------------------------------------ the drawer */
.sbi-header .drawer { background: var(--sbih-drawer-bg, var(--paper)); color: var(--sbih-drawer-fg, var(--ink)); }

/* ============================================================== the footer */
.ftr {
  background: var(--sbif-bg, var(--deep));
  color: var(--sbif-fg, var(--on-dark-soft));
}
.ftr h5 { color: var(--sbif-heading, var(--gold-2)); font-size: var(--sbif-heading-size, 10.5px); letter-spacing: var(--sbif-heading-track, .2em); }
.ftr h2, .ftr .ftr-cta h2 { color: var(--sbif-title, var(--on-dark)); }
.ftr-cta, .ftr-partners { border-color: var(--sbif-rule, var(--felt-line)); }
.ftr-bottom .wrap { border-top-color: var(--sbif-rule, var(--felt-line)); color: var(--sbif-muted, var(--on-dark-mute)); }
.ftr-main .wrap { padding-block: var(--sbif-pad, 64px); gap: var(--sbif-gap, 40px); }
.ftr-links { font-size: var(--sbif-link-size, 14px); gap: var(--sbif-link-gap, 10px); }
.ftr .ftr-links a:hover, .ftr .fb-links a:hover, .ftr-contact a:hover { color: var(--sbif-link-hover, var(--on-dark)); }
.ftr-contact svg { color: var(--sbif-heading, var(--gold-2)); }
.ftr-news form { background: var(--sbif-news-bg, rgba(244,240,230,.06)); border-color: var(--sbif-rule, var(--felt-line)); }
.ftr-news input { color: var(--sbif-title, var(--on-dark)); }
.ftr-news input::placeholder { color: var(--sbif-muted, var(--on-dark-mute)); }
.ftr-word { color: var(--sbif-word, rgba(244,240,230,.04)); font-size: var(--sbif-word-size, clamp(64px, 16vw, 240px)); }
.ftr .socials a { border-color: var(--sbif-rule, var(--felt-line)); }
.ftr .socials a:hover { background: var(--sbif-social-hover-bg, var(--on-dark)); color: var(--sbif-social-hover-fg, var(--deep)); }

/* ------------------------------------------- the header taken apart

   A menu dropped on the bar as its own block has no .hdr to hang its panels
   off, and it may not even be the last thing on the row.

   They were fixed to an offset the script measured, and that was a mistake:
   the measurement was taken before the stylesheet had applied, came back as
   the header plus every panel stacked inside it, and the menus opened 476px
   down a header 120px tall. Nothing said so, because the menus really were
   opening.

   There is nothing to measure. The band around the header is sticky and
   carries a z-index, which makes it a positioned element, so `absolute` here
   resolves against the band and `top: 100%` is its bottom edge — worked out
   by the browser, correct on every page, and correct before any script has
   run at all. `left`/`right` take the band's width, which is the viewport. */
.sbi-header .mega-wrap.is-loose {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

/* A part sitting directly in a container is a flex item in its own right, so
   the action wrappers must not add a second row of their own. */
.sbi-header > .hdr-actions { margin-left: 0; }

/* ---------------------------------------- the utility strip, taken apart

   The strip's own rules are all written `.utility <thing>`, because until now
   the strip was one element that wrapped them. Split into blocks there is no
   such ancestor — the row is an ordinary container — so an icon kept only the
   `img, svg { max-width: 100% }` at the top of this sheet and grew to fill its
   flex item. That is what the giant envelopes and telephones were.

   Each rule is therefore re-declared against .sbi-header, which every part
   carries. The originals above are left exactly as they are: they still match
   inside sbi.header, and this matches beside it. */
.sbi-header .u-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sbi-header .u-item svg { width: 13px; height: 13px; opacity: .8; }
.sbi-header .u-item:hover { color: var(--sbih-util-fg-strong, var(--on-dark)); }

.sbi-header .live-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--sbih-util-fg-strong, var(--on-dark)); }
.sbi-header .live-pill i {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--sbih-util-pill, #ef4444);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
  animation: pulse 1.8s infinite;
}

.sbi-header .socials { display: flex; gap: 8px; }
.sbi-header .socials :is(a, button) {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--sbih-util-social-border, rgba(244, 240, 230, .2));
  cursor: pointer; transition: background .2s, color .2s;
}
.sbi-header .socials :is(a, button):hover {
  background: var(--sbih-util-social-hover-bg, var(--on-dark));
  color: var(--sbih-util-social-hover-fg, var(--deep));
}
.sbi-header .socials svg { width: 16px; height: 16px; }

/* The strip sheds its detail on the way down, as it always has. */
@media (max-width: 860px) {
  .sbi-header .u-hide { display: none; }
}
@media (max-width: 640px) {
  .sbi-header .socials, .sbi-header .u-item:not(.live-pill) { display: none; }
  .sbi-header .live-pill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 32px); }
}

/* --------------------------------------------- the search pill's field

   A search input carries a UA appearance of its own — a light box, its own
   font, and on WebKit a cancel button — and the strip is dark. The sheet above
   already makes it transparent; this also turns the appearance off, because
   inside the editor's shadow roots `color-scheme: only light` was enough to
   bring the light box back and the pill came out white on the dark strip. */
.sbi-header .u-search input,
.u-search input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}
.sbi-header .u-search input::-webkit-search-cancel-button,
.sbi-header .u-search input::-webkit-search-decoration { -webkit-appearance: none; }

/* ------------------------------------------- running two bands together

   The prototype often keeps what reads as two sections inside one: the intro
   and the counters under it are a single `.section`, separated by a margin
   rather than by two lots of section padding. Built as two blocks they came to
   96px of padding below the first and 96px above the second — 192px where the
   design has 72px, which is what the About page's hole in the middle was.

   `.sbi-blk.sbi-join` above already does this for the sbi.* section blocks.
   This is the same rule for a band built out of the builder's own containers,
   which carry `.section` as a class and so were never matched by it. */
.sbi-join { padding-top: 0; margin-top: clamp(40px, 6vw, 72px); }
:is(.section, .sbi-blk, .lb-container):has(+ .sbi-join) { padding-bottom: 0; }

/* ------------------------------------------- a band that stops at its content

   The prototype zeroes one side of a band's padding inline, so that two bands
   read as one run of content:

     ref/sbi-frontend-v1.3.0.html:6284
     <section class="section-tight" style="padding-bottom:0">

   These do the same as classes rather than through the builder's own padding
   fields, and that is the point of them: those fields compile to the `padding`
   shorthand, so setting the bottom to zero silently zeroed the other three and
   took the band's top padding with it. A class touches one side and leaves the
   clamp() on the other alone. */
.sbi-flush-b { padding-bottom: 0 !important; }
.sbi-flush-t { padding-top: 0 !important; }

/* ------------------------------------------------ landing on an anchor

   The bar is sticky, so a link to a section on the same page scrolls that
   section to the very top of the viewport and the header then sits on top of
   its heading. `scroll-margin-top` is what the browser leaves above it.

   Keyed on [id] because that is exactly what an anchor target is: the builder
   writes one through the Advanced tab's CSS ID, and a section without one is
   never jumped to. Same offset as .nx-sec above, which solved this once for
   the news filters. */
.sbi-blk[id],
.lb-container[id] { scroll-margin-top: calc(var(--header-h) + 14px); }