/* Padel Time · Гомель — the landing (padeltime.by). One dark theme, the club palette (neo tokens of the app).
   The one bold move of the site: a split-flap scoreboard of TIME (hero board + the slot board), everything else is calm.
   No framework, no build step. Lime is given only to actions, the selected time and one marker phrase.
   Type scale: every font-size is one of the twelve --fs-* tokens below (check-site.mjs enforces it). */

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-700.woff2?v=e8a61136e6') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2?v=4c21c7cbb3') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* metric-matched fallbacks: the text keeps its lines while the fonts arrive (CLS) */
@font-face {
  font-family: 'Unbounded Fallback';
  src: local('Arial Black'), local('Arial Bold'), local('Arial');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Segoe UI'), local('Roboto'), local('Arial');
  size-adjust: 104%;
  ascent-override: 102%;
  descent-override: 28%;
}

:root {
  color-scheme: dark;
  --bg: #090d09;
  --bg-2: #10160f;
  --surface: #121812;
  --surface-2: #182017;
  --surface-3: #1d261c;
  --line: #242d22;
  --line-2: #33402f;
  --text: #f2f5ec;
  --text-2: #adb5a6;
  --text-3: #8b9385;
  --accent: #c8f135;
  --accent-hover: #d6f75f;
  --accent-soft: rgba(200, 241, 53, 0.1);
  --accent-line: rgba(200, 241, 53, 0.55);
  --on-accent: #0d1407;
  --on-accent-2: #2e3b12;
  --warn: #ffbe3c;
  --danger: #ff6363;
  --paper: #f2f5ec;
  --ink: #0d1407;

  --font-display: 'Unbounded', 'Unbounded Fallback', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* the type scale: 12 sizes, nothing below 11 px (caps labels only), data from 13 px */
  --fs-2xs: 11px;
  --fs-xs: 13px;
  --fs-s: 15px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-m: 20px;
  --fs-l: 24px;
  --fs-xl: 40px;
  --fs-h2: clamp(26px, 6.6vw, 40px);
  /* phones: «Падел в Гомеле:» stays one line from 320 px (the H1 is three lines, not four) */
  --fs-h1: clamp(26px, 8.6vw, 64px);
  --fs-board: clamp(52px, 17vw, 104px);
  --fs-giant: clamp(110px, 34vw, 190px);

  --gutter: 16px;
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --maxw: 1200px;
  --r-card: 22px;
  --r-cell: 12px;
  --dock-h: 0px;
}
/* the smallest phones: the big numbers (the lock «100 ÷ 4 = 25», the steps) keep one line */
@media (max-width: 379px) {
  :root {
    --fs-xl: 34px;
  }
}
@media (min-width: 600px) {
  :root {
    --gutter: 28px;
  }
}
@media (min-width: 900px) {
  :root {
    --fs-body: 17px;
    --fs-lead: 18px;
    --fs-l: 28px;
    --fs-xl: 48px;
    /* laptops 900-1440: the H1 is at most three lines (the text column is 7/12 of the hero) */
    --fs-h1: clamp(40px, 4.6vw, 64px);
    --fs-h2: clamp(30px, 3.2vw, 40px);
    --fs-giant: clamp(120px, 13vw, 190px);
  }
}
@media (min-width: 1100px) {
  :root {
    --gutter: 40px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scroll-padding-top: 12px;
  /* a focused control never hides under the sticky dock of the phones (WCAG 2.4.11) */
  scroll-padding-bottom: calc(var(--dock-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock-h);
}
@media (min-width: 900px) {
  html {
    scroll-padding-top: 76px;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
p {
  margin: 0 0 12px;
  /* no lonely last word on a line (Chromium, Safari 18); other browsers wrap as usual */
  text-wrap: pretty;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
}
button {
  font: inherit;
  color: inherit;
}
small {
  font-size: var(--fs-xs);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.i {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i--sm {
  width: 18px;
  height: 18px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--pad-r) 0 var(--pad-l);
}
.nowrap {
  white-space: nowrap;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  top: 8px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 700 var(--fs-body)/1.15 var(--font-body);
  letter-spacing: 0.005em;
  text-decoration: none;
  text-align: center;
  /* a label that has to wrap on a small phone wraps in two even halves */
  text-wrap: balance;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}
.btn:active {
  transform: translateY(1px);
}
.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--accent:focus-visible {
  outline-color: var(--text);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn--strong {
  border-color: var(--text-3);
}
.btn--quiet {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--surface-2);
}
@media (hover: hover) {
  .btn--accent:hover {
    background: var(--accent-hover);
  }
  .btn--ghost:hover {
    border-color: var(--text-2);
  }
  .btn--quiet:hover {
    border-color: var(--line-2);
  }
}
.btn--lg {
  min-height: 56px;
  padding: 0 26px;
  font-size: var(--fs-lead);
}
/* the smallest phones: the long labels of the big buttons («Выбрать время на 90 минут») keep one line */
@media (max-width: 379px) {
  .btn--lg {
    padding: 0 18px;
    font-size: var(--fs-body);
  }
}
.btn--sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--fs-s);
  white-space: nowrap;
}
.btn--block {
  display: flex;
  width: 100%;
}
/* the booking button: what + the chosen time and price on the left, the arrow on the right (opens the web version) */
.btn--book {
  justify-content: space-between;
  gap: 14px;
  padding: 0 20px 0 22px;
  text-align: left;
}
/* the second, smaller way to book: the same start in the club app inside Telegram (a link, never a filled button) */
.tg-alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-2);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
}
.tg-alt .i {
  color: var(--text);
}
@media (hover: hover) {
  .tg-alt:hover {
    color: var(--text);
    text-decoration-color: var(--text-2);
  }
}
.btn__two {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
.btn__two small {
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
}
.btn--call__long {
  display: none;
}
@media (min-width: 900px) {
  .btn--call__short {
    display: none;
  }
  .btn--call__long {
    display: inline;
    font-variant-numeric: tabular-nums;
  }
}
.link-btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
  cursor: pointer;
}

/* ---------- header ---------- */
.hdr {
  position: relative;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .hdr {
    position: sticky;
    top: 0;
  }
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 55px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  margin-right: auto;
  color: var(--text);
  text-decoration: none;
}
.brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.brand__name {
  font: 700 var(--fs-s)/1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 379px) {
  .brand__name {
    display: none;
  }
}
/* the button of the header is outlined while the main button of the hero is on the screen: one filled lime button per screen */
.hdr__cta {
  transition: background-color 0.24s, border-color 0.24s, color 0.24s;
}
.hdr--calm .hdr__cta {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text);
}
@media (hover: hover) {
  .hdr--calm .hdr__cta:hover {
    background: transparent;
    border-color: var(--text-2);
  }
}
.hdr--calm .hdr__cta:focus-visible {
  outline-color: var(--accent);
}
.nav {
  display: none;
}
@media (min-width: 900px) {
  .nav {
    display: flex;
    gap: 4px;
    margin-right: 12px;
  }
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--text-2);
    font-weight: 600;
    font-size: var(--fs-s);
    text-decoration: none;
  }
  .nav a:hover,
  .nav a[aria-current='page'] {
    color: var(--text);
  }
  .nav a[aria-current='page'] {
    box-shadow: inset 0 -2px 0 var(--text);
    border-radius: 0;
  }
}
.hdr__tel {
  display: none;
}
@media (min-width: 1100px) {
  .hdr__tel:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-right: 10px;
    color: var(--text);
    font-weight: 700;
    font-size: var(--fs-s);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
  }
}
.menu {
  position: static;
}
.menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
  color: var(--text);
}
.menu > summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .menu > summary:hover {
    background: var(--surface-2);
  }
}
.menu .i--close {
  display: none;
}
.menu[open] .i--menu {
  display: none;
}
.menu[open] .i--close {
  display: block;
}
.menu:not([open]) .menu__panel {
  display: none;
}
.menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  z-index: 31;
  padding: 8px var(--pad-r) 18px var(--pad-l);
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.55);
}
.menu__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font: 700 var(--fs-lead)/1 var(--font-body);
  text-decoration: none;
}
.menu__panel a .i {
  color: var(--text-3);
}
@media (min-width: 900px) {
  .menu {
    display: none;
  }
}

/* ---------- kicker + section scaffolding ---------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.kicker__n {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--text);
}
.sec {
  padding: 56px 0 60px;
  border-bottom: 1px solid var(--line);
}
/* the sections below the first screen are laid out when they come near it: the first paint of a slow phone is ~0.5 s sooner
   (LCP 1.9-2.0 s instead of 2.4-2.5 s on the profile of research/site/measure.mjs); the size each one had is remembered */
.sec,
.final,
.ftr {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
@media (min-width: 900px) {
  .sec {
    padding: 96px 0 100px;
  }
}
/* the tonal bands: every other section sits on a slightly lighter strip (rhythm without new colours) */
.sec--band {
  background: var(--bg-2);
  /* the cards of a band step one tone up, so they stay cards on the lighter strip */
  --surface: #182017;
  --surface-2: #1d261c;
}
.sec--band .kicker::after {
  background: var(--line-2);
}
.sec__title {
  font: 700 var(--fs-h2)/1.12 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.sec__lead {
  max-width: 34em;
  color: var(--text-2);
  font-size: var(--fs-lead);
}
.sec__lead a {
  color: var(--text);
}
@media (min-width: 900px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
  .split__head {
    position: sticky;
    top: 96px;
  }
}
.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
@media (hover: hover) {
  .more:hover {
    text-decoration-color: var(--text);
  }
}
.micro {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  text-wrap: balance;
}
.micro .i {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 4px;
}
/* the second of two small lines in a row (the panel: the first time, then the hold of the court) */
.micro + .micro--tight {
  margin-top: 4px;
}

/* ---------- split-flap tiles (the bold move) ---------- */
.flaps {
  display: flex;
  align-items: center;
  gap: 0.07em;
  font: 700 var(--fs-board)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.flap {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.86em;
  height: 1.16em;
  border-radius: 0.13em;
  background: linear-gradient(180deg, #252f23 0%, #1c2519 49.4%, #111811 50.6%, #172016 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0.04em 0 rgba(0, 0, 0, 0.7);
  color: var(--text);
  perspective: 300px;
}
.flap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(2px, 0.025em);
  transform: translateY(-50%);
  background: rgba(3, 5, 3, 0.9);
}
.flap::after {
  content: '';
  position: absolute;
  top: calc(50% - 0.06em);
  left: -0.02em;
  right: -0.02em;
  height: 0.12em;
  border-left: 0.04em solid #050805;
  border-right: 0.04em solid #050805;
  border-radius: 0.02em;
}
.flap__c {
  position: relative;
  z-index: 0;
  line-height: 1;
  transform-origin: 50% 50%;
}
.flap--colon {
  width: 0.34em;
  background: none;
  box-shadow: none;
  color: var(--text-3);
}
.flap--colon::before,
.flap--colon::after {
  display: none;
}
.flaps--dim .flap__c {
  color: var(--text-3);
}
@media (prefers-reduced-motion: no-preference) {
  .flap.is-flip .flap__c {
    animation: flip 0.42s cubic-bezier(0.3, 0.7, 0.2, 1) both;
  }
  .flap.is-flip:nth-child(2) .flap__c {
    animation-delay: 0.05s;
  }
  .flap.is-flip:nth-child(4) .flap__c {
    animation-delay: 0.1s;
  }
  .flap.is-flip:nth-child(5) .flap__c {
    animation-delay: 0.15s;
  }
}
@keyframes flip {
  0% {
    transform: rotateX(-90deg);
    opacity: 0.2;
  }
  60% {
    transform: rotateX(12deg);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 22px 0 30px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 46% at 100% 0%, rgba(200, 241, 53, 0.11), rgba(200, 241, 53, 0) 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(60, 120, 40, 0.1), rgba(60, 120, 40, 0) 70%),
    var(--bg);
}
.hero__grid {
  position: relative;
  display: grid;
  /* minmax(0, ...): a long word never widens the column past the screen */
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 900px) {
  .hero {
    padding: 64px 0 72px;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
  }
}
.hero__title {
  margin: 0 0 14px;
  font: 700 var(--fs-h1)/1.06 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__mark {
  display: block;
  color: var(--accent);
}
.hero__lead {
  margin: 0 0 18px;
  max-width: 30em;
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
@media (min-width: 900px) {
  .hero__lead {
    margin-bottom: 28px;
  }
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0 0 14px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-decoration: none;
}
.rating .i {
  color: var(--warn);
}
.rating b {
  color: var(--text);
  font-size: var(--fs-s);
}
.hero__addr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: -6px 0 18px;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.hero__addr .i {
  color: var(--text);
}
.hero__route {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
}
.facts {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr);
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgba(18, 24, 18, 0.82);
}
@media (min-width: 900px) {
  .facts {
    max-width: 580px;
  }
}
.fact {
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--line-2);
}
.fact:first-child {
  border-left: 0;
}
.fact__n {
  display: block;
  font: 700 var(--fs-l)/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fact__n small {
  font: 700 var(--fs-xs)/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.fact__t {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--text-2);
}
.fact__t--pp {
  margin-top: 2px;
  color: var(--text);
}
@media (max-width: 359px) {
  .facts {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .fact {
    padding: 11px 9px;
  }
  .fact__n {
    font-size: var(--fs-m);
  }
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero__cta .btn--accent {
  flex: 1 1 220px;
}
.hero__cta .btn--ghost {
  flex: 1 1 140px;
}
/* «Открыть в Telegram» of the hero: under the main button on phones, next to it from 600 px */
.hero__cta .tg-alt {
  flex: 1 1 100%;
  justify-content: center;
}
@media (min-width: 600px) {
  .hero__cta .btn--accent,
  .hero__cta .btn--ghost {
    flex: 0 0 auto;
  }
  .hero__cta .tg-alt {
    flex: 0 0 auto;
    padding: 0 8px;
  }
}

/* the live board in the hero: the nearest free start on a split-flap display, standing over a glass court */
.hero__art {
  position: relative;
}
.court {
  width: 100%;
  height: auto;
}
.ct-floor {
  fill: rgba(200, 241, 53, 0.045);
}
.ct-edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.ct-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0.75;
}
.ct-glass {
  fill: rgba(210, 255, 190, 0.065);
  stroke: rgba(220, 255, 200, 0.34);
  stroke-width: 1;
}
.ct-glass--near {
  fill: rgba(210, 255, 190, 0.025);
  stroke: rgba(220, 255, 200, 0.16);
}
.ct-mesh {
  fill: none;
  stroke: rgba(220, 255, 200, 0.22);
  stroke-width: 1;
  stroke-dasharray: 1.5 2.5;
}
.ct-seam {
  fill: none;
  stroke: rgba(220, 255, 200, 0.22);
  stroke-width: 1;
}
.ct-net {
  fill: rgba(242, 245, 236, 0.07);
  stroke: rgba(242, 245, 236, 0.45);
  stroke-width: 0.8;
}
.ct-net-top {
  stroke: var(--text);
  stroke-width: 2;
}
.ct-trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  opacity: 0.8;
}
.ct-bounce {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.7;
}
.ct-shadow {
  fill: rgba(0, 0, 0, 0.55);
}
.ct-ball circle {
  fill: var(--accent);
}
.ct-ball path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
}
/* the ball flies along its trail ONCE after the load (no endless animation on the main thread) */
@media (prefers-reduced-motion: no-preference) {
  .ct-trail {
    animation: trail 2.4s ease-out 0.3s 1 both;
  }
}
@keyframes trail {
  from {
    stroke-dashoffset: 160;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.hero__court {
  pointer-events: none;
}
/* phones: the whole court is drawn above the board, the card overlaps its foot by 24 px */
@media (max-width: 599px) {
  .hero__court {
    position: relative;
    z-index: 0;
    width: min(66%, 250px);
    margin: -4px auto -24px;
  }
}
/* tablets: the board on the left, the court beside it */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__art {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .hero__art .nearest {
    grid-column: 1;
    grid-row: 1;
  }
  .hero__court {
    grid-column: 2;
    grid-row: 1;
    width: 120%;
    max-width: none;
    margin-left: -6%;
  }
}
@media (min-width: 900px) {
  .hero__art {
    min-height: 470px;
  }
  .hero__court {
    position: absolute;
    z-index: 0;
    top: -40px;
    right: -14%;
    width: 112%;
    max-width: none;
  }
}
.hero__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 899px) {
  .hero__photo {
    aspect-ratio: 3 / 2;
    margin-bottom: 14px;
  }
}
@media (min-width: 900px) {
  .hero__photo {
    position: absolute;
    z-index: 0;
    top: -12px;
    right: -6%;
    width: 92%;
    aspect-ratio: 3 / 2;
    opacity: 0.55;
  }
}
.nearest {
  position: relative;
  z-index: 1;
  display: block;
  /* the scoreboard is sized by the card itself (container units): it never sticks out of it (900-1100 px included) */
  container-type: inline-size;
  --fs-board: clamp(46px, 22.5cqw, 92px);
  padding: 16px 16px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(22, 30, 21, 0.94), rgba(12, 17, 11, 0.94));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s, transform 0.16s;
}
@media (hover: hover) {
  .nearest:hover {
    border-color: var(--text-3);
  }
  .nearest:hover .nearest__go {
    border-color: var(--text);
  }
}
@media (min-width: 900px) {
  .nearest {
    position: absolute;
    left: -2%;
    width: 88%;
    bottom: -8px;
    padding: 22px 24px 20px;
  }
}
@media (min-width: 1200px) {
  .nearest {
    width: 82%;
  }
}
.nearest .flaps {
  gap: 0.05em;
}
.nearest__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.nearest__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
}
.live {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.nearest[data-state='loading'] .live,
.nearest[data-state='error'] .live,
.nearest[data-state='none'] .live {
  background: var(--text-3);
}
@media (prefers-reduced-motion: no-preference) {
  .live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
    will-change: transform, opacity;
    animation: ping 2.4s ease-out 4;
  }
  .nearest[data-state='loading'] .live::after,
  .nearest[data-state='error'] .live::after,
  .nearest[data-state='none'] .live::after {
    display: none;
  }
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
.nearest__day {
  font: 700 var(--fs-2xs)/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 9px 5px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--text);
  white-space: nowrap;
}
.nearest__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.nearest__cap {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--text-2);
}
.nearest__cap b {
  color: var(--text);
  font-weight: 800;
}
.nearest__nojs {
  display: none;
}
.nearest__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  color: var(--text);
}

/* ---------- three doors under the hero ---------- */
.doors {
  padding: 20px 0 4px;
}
.doors__grid {
  display: grid;
  gap: 10px;
}
@media (min-width: 900px) {
  .doors {
    padding: 28px 0 0;
  }
  .doors__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.door {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s;
}
@media (hover: hover) {
  .door:hover {
    border-color: var(--text-3);
  }
  .door:hover .door__go {
    color: var(--text);
  }
}
.door:active {
  border-color: var(--text-3);
}
.door__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-3);
}
.door__txt {
  min-width: 0;
}
.door__t {
  display: block;
  font: 800 var(--fs-lead)/1.25 var(--font-body);
  letter-spacing: -0.005em;
}
.door__d {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-2);
}
.door__go {
  color: var(--text-3);
}

/* ---------- slot board ---------- */
.slots-sec .sec__title {
  max-width: 18em;
}
@media (max-width: 400px) {
  .slots-sec .sec__lead {
    display: none;
  }
}
.slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.slots__main {
  min-width: 0;
}
.slots__side {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
@media (min-width: 900px) {
  .slots {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
  }
  .slots__side {
    position: sticky;
    top: 76px;
  }
}
@media (min-width: 1100px) {
  .slots {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.slots__bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.slots__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}
.days {
  display: flex;
  gap: 8px;
  min-height: 76px;
  margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l));
  padding: 4px var(--pad-r) 6px var(--pad-l);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--pad-l);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* the strip scrolls: the last visible chip fades out on the right */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.days::-webkit-scrollbar {
  display: none;
}
@media (min-width: 900px) {
  .days {
    margin: 0;
    padding: 4px 0 6px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .days .day {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 10px 8px;
  }
}
.day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 86px;
  min-height: 64px;
  padding: 9px 12px 8px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
@media (hover: hover) {
  .day:hover {
    border-color: var(--text-3);
  }
}
.day__d {
  font: 700 var(--fs-m)/1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.day__d span {
  color: var(--text-2);
}
.day__n {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-2);
  white-space: nowrap;
}
.day[aria-pressed='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--ink);
}
.day[aria-pressed='true'] .day__n,
.day[aria-pressed='true'] .day__d span {
  color: #3b4636;
}
.day--none .day__d {
  color: var(--text-3);
}
.day--none[aria-pressed='true'] .day__d {
  color: #59654f;
}
.seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  flex: none;
}
.seg__b {
  min-width: 82px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-weight: 700;
  font-size: var(--fs-s);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .seg__b:hover {
    color: var(--text);
  }
}
.seg__b[aria-pressed='true'] {
  background: var(--text);
  color: var(--ink);
}
.seg__b small {
  font-weight: 600;
  opacity: 0.85;
}
.seg-note {
  margin: -4px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.board-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.legend__sw {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.legend__sw--busy {
  background: transparent;
  border-style: dashed;
}
.legend__dots {
  display: inline-grid;
  grid-template-columns: repeat(6, 5px);
  gap: 2px;
}
.legend__dots i,
.cell__bar i {
  height: 3px;
  border-radius: 2px;
  background: var(--line-2);
}
.legend__dots i:nth-child(-n + 3) {
  background: var(--text-2);
}
.board {
  min-height: 560px;
}
@media (min-width: 600px) {
  .board {
    min-height: 420px;
  }
}
.board[data-state='ready'] {
  min-height: 0;
}
.board__part + .board__part {
  margin-top: 22px;
}
.board__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.board__label span {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}
.board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .board__grid {
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    gap: 10px;
  }
}
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 62px;
  padding: 9px 10px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-cell);
  background: linear-gradient(180deg, #19221a 0%, #161e15 50%, #121912 50%, #141b13 100%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s, transform 0.12s;
}
@media (min-width: 900px) {
  .cell {
    min-height: 68px;
    padding: 10px 12px 12px;
  }
}
@media (hover: hover) {
  .cell:hover {
    border-color: var(--text-3);
  }
}
.cell:active {
  transform: scale(0.98);
}
.cell__time {
  font: 700 var(--fs-body)/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cell__price {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-2);
  white-space: nowrap;
}
/* free courts of that start: 6 segments at the foot of the cell, the free ones lit */
.cell__bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}
.cell__bar i.on {
  background: var(--text-3);
}
.cell--near {
  border-color: var(--accent-line);
}
.cell__tag {
  position: absolute;
  top: -9px;
  left: 4px;
  /* never wider than its cell (76 px cells of a 360 px phone): «Ближайшее» stays inside */
  max-width: calc(100% - 8px);
  overflow: hidden;
  padding: 2px 3px 1px;
  letter-spacing: -0.01em;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 var(--fs-2xs)/1.25 var(--font-body);
  white-space: nowrap;
}
.cell[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.cell[aria-pressed='true'] .cell__price {
  color: var(--on-accent-2);
}
.cell[aria-pressed='true'] .cell__bar i {
  background: rgba(13, 20, 7, 0.18);
}
.cell[aria-pressed='true'] .cell__bar i.on {
  background: var(--on-accent-2);
}
.cell[aria-pressed='true'] .cell__tag {
  background: var(--ink);
  color: var(--accent);
}
.cell[aria-pressed='true']:focus-visible {
  outline-color: var(--text);
}
.cell--busy,
.cell--busy:hover {
  background: transparent;
  border-style: dashed;
  border-color: #2b3528;
  color: var(--text-3);
  cursor: default;
}
.cell--busy:active {
  transform: none;
}
.cell--busy .cell__time {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(173, 181, 166, 0.7);
}
.cell--busy .cell__price {
  color: var(--text-3);
  font-weight: 600;
}
.board-note {
  margin: 16px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.board-note + .board-note {
  margin-top: 6px;
}
.board-note a {
  color: var(--text);
  font-weight: 700;
}
.board-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 190, 60, 0.4);
  border-radius: 14px;
  font-size: var(--fs-s);
}
/* skeleton of the board and of the dates: reserves the height while the data comes (CLS) */
.skel {
  border-radius: var(--r-cell);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%) 0 0 / 200% 100%;
  border: 1px solid var(--line);
}
@media (prefers-reduced-motion: no-preference) {
  .skel {
    animation: shimmer 1.4s linear 10;
  }
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.skel--cell {
  min-height: 62px;
}
@media (min-width: 900px) {
  .skel--cell {
    min-height: 68px;
  }
}
.skel--day {
  flex: 0 0 86px;
  height: 64px;
  border-radius: 16px;
}
.skel--label {
  display: block;
  width: 120px;
  height: 14px;
  margin-bottom: 12px;
  border-radius: 6px;
}

/* messages inside the board (no slots / closed / API down) */
.state {
  padding: 22px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--surface);
}
.state + .board__part {
  margin-top: 22px;
}
.state__title {
  margin: 0 0 6px;
  font: 700 var(--fs-m)/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.state__text {
  margin: 0 0 16px;
  color: var(--text-2);
}
.state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.state--error {
  border-color: rgba(255, 190, 60, 0.4);
}
.state--error .state__title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--warn);
  vertical-align: 2px;
}

/* the panel next to / under the board: what is chosen, the booking button (web version) and the Telegram link under it */
.panel {
  padding: 18px;
  min-height: 150px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--surface);
}
.panel--on {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, #172015, var(--surface));
}
.panel__day {
  margin: 0 0 6px;
  font: 700 var(--fs-xs)/1.3 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.panel__when {
  margin: 0 0 6px;
  font: 700 var(--fs-l)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#panel-empty .panel__when {
  font-size: var(--fs-lead);
}
.panel__actions {
  display: grid;
  gap: 10px;
}
/* the main button and, right under it, the smaller Telegram link of the same start */
.panel__book {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.panel__book .tg-alt {
  justify-self: center;
}
.panel__meta {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.panel__meta b {
  color: var(--text);
}
.panel__note,
.panel__warn {
  margin: -4px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.panel__note {
  background: var(--surface-3);
  color: var(--text);
}
.panel__warn {
  border: 1px solid rgba(255, 190, 60, 0.45);
  color: var(--text);
}
.panel__hint {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.panel__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.panel__alt .btn {
  flex: 1 1 120px;
}
@media (max-width: 359px) {
  .panel {
    padding: 16px 14px;
  }
  .panel .btn--book {
    padding: 0 16px;
    font-size: var(--fs-body);
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .panel__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    /* «Позвать друзей» keeps its own height next to the booking button + the Telegram link under it */
    align-items: start;
  }
  .panel__alt {
    grid-column: 1 / -1;
  }
}

/* QR (wide screens only) */
.qr {
  display: none;
}
@media (min-width: 900px) {
  .qr {
    display: block;
    padding: 22px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-card);
    background: var(--surface);
  }
}
/* no padding: the quiet zone (4 modules) is inside the picture, light on --paper (P3-5) */
.qr__code {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
}
.qr__code svg {
  width: 100%;
  height: auto;
}
.qr__code .skel {
  width: 100%;
  height: 100%;
  border: 0;
  background: #e1e6da;
  animation: none;
}
.qr__title {
  margin: 0 0 6px;
  font: 700 var(--fs-body)/1.3 var(--font-display);
}
.qr__text {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.qr__text b {
  color: var(--text);
}
.slots__side .qr {
  padding: 18px;
}
.slots__side .qr__code {
  width: 74%;
  margin: 0 auto 14px;
}

/* ---------- how it works ---------- */
.steps {
  display: grid;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  align-content: start;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px dashed var(--line-2);
}
.step:last-child {
  border-bottom: 1px dashed var(--line-2);
}
.step .flaps {
  font-size: var(--fs-xl);
}
.step__t {
  margin: 4px 0 6px;
  font: 700 var(--fs-m)/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.step__d {
  margin: 0;
  color: var(--text-2);
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
  }
  .step {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 4px 32px 8px;
    border-top: 0;
    border-left: 1px dashed var(--line-2);
  }
  .step:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .step:last-child {
    border-bottom: 0;
  }
}

/* ---------- prices ---------- */
.ptable-wrap {
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
}
.ptable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ptable th,
.ptable td {
  padding: 15px 10px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.ptable thead th {
  border-top: 0;
  padding-top: 14px;
  padding-bottom: 12px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ptable th:first-child,
.ptable td:first-child {
  padding-left: 16px;
  width: 31%;
}
.ptable tbody th {
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.3;
}
.ptable td b {
  display: block;
  font: 700 var(--fs-l)/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ptable td span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--text-2);
  white-space: nowrap;
}
.ptable td span i {
  font-style: normal;
}
@media (max-width: 599px) {
  .ptable td span i {
    display: none;
  }
}
/* 320-379: the three prices of a row keep air between them */
@media (max-width: 379px) {
  .ptable th,
  .ptable td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .ptable th:first-child,
  .ptable td:first-child {
    padding-left: 12px;
    width: 33%;
  }
  .ptable td b {
    font-size: var(--fs-m);
  }
  .ptable tbody th {
    font-size: var(--fs-xs);
  }
}
.ptable-note {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.ptable-foot {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.ptable-foot a {
  color: var(--text);
}
@media (min-width: 600px) {
  .ptable-note {
    display: none;
  }
  .ptable th,
  .ptable td {
    padding: 18px 16px;
  }
  .ptable th:first-child,
  .ptable td:first-child {
    padding-left: 22px;
  }
}
.price-notes {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.price-notes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-2);
}
.price-notes .i {
  margin-top: 1px;
  color: var(--text);
}
.price-notes b {
  color: var(--text);
}
.price-notes a {
  color: var(--text);
}
.price-notes--big {
  gap: 0;
  margin: 0;
}
.price-notes--big li {
  padding: 18px 0;
  border-top: 1px solid var(--line-2);
}
.price-notes--big li:last-child {
  border-bottom: 1px solid var(--line-2);
}
/* the lock «100 ÷ 4 = 25»: the price of a court and the share of one player as one graphic */
.lock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 22px 0 6px;
}
.lock__n {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font: 700 var(--fs-xl)/1 var(--font-display);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.lock__n small {
  font: 700 var(--fs-xs)/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.lock__op {
  font: 700 var(--fs-l)/1 var(--font-display);
  color: var(--text-3);
}
.lock__n--res,
.lock__n--res small {
  color: var(--accent);
}
.lock--big {
  margin: 0;
  gap: 4px 10px;
  padding: 20px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--surface);
}
.lock__cap {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
@media (min-width: 900px) {
  .lock--big {
    gap: 4px 14px;
    padding: 24px 26px;
  }
  /* one line of the equation in the 5/12 column (900-1920) */
  .lock--big .lock__n {
    font-size: var(--fs-xl);
  }
  .lock--big .lock__n small {
    font-size: var(--fs-m);
  }
}
.split-four {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px dashed var(--line-2);
}
.split-four__n {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font: 700 var(--fs-xl)/1 var(--font-display);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.split-four__n small {
  font: 700 var(--fs-xs)/1 var(--font-body);
  color: var(--text-2);
}
.split-four p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.split-four p b {
  color: var(--text);
}
/* phones: the number over its sentence (side by side the sentence was a 100 px column) */
@media (max-width: 479px) {
  .split-four {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
.cases {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* 900-1199: the cases sit in the 7/12 column, three in a row would not hold «100–120 BYN» */
@media (min-width: 900px) and (max-width: 1199px) {
  .cases {
    grid-template-columns: minmax(0, 1fr);
  }
}
.case {
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface);
}
.case__k {
  margin: 0 0 10px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.case__n {
  margin: 0 0 10px;
  font: 700 var(--fs-l)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.case__n small {
  display: block;
  margin-top: 6px;
  font: 700 var(--fs-xs)/1 var(--font-body);
  color: var(--text-2);
  letter-spacing: 0;
}
.case__d {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.case__d b {
  color: var(--text);
}
.groups,
.offer,
.ask,
.extras {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface);
}
.groups__t,
.ask__t {
  margin: 0 0 8px;
  font: 800 var(--fs-lead)/1.3 var(--font-body);
}
.groups p {
  color: var(--text-2);
}
.groups b {
  color: var(--text);
}
.groups__actions,
.ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.extras .facts-dl {
  margin: 0;
}
.offer {
  margin-bottom: 18px;
}
.offer__k {
  margin: 0 0 6px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.offer__t {
  margin: 0 0 8px;
  font: 700 var(--fs-l)/1.1 var(--font-display);
}
.offer__d {
  color: var(--text-2);
}

/* ---------- beginners ---------- */
.trio {
  display: grid;
  gap: 0;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.trio__i {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line-2);
}
.trio__i:last-child {
  border-bottom: 1px solid var(--line-2);
}
.trio__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
}
.trio__ic .i {
  width: 26px;
  height: 26px;
}
.trio__t {
  margin: 2px 0 6px;
  font: 700 var(--fs-m)/1.3 var(--font-display);
  letter-spacing: -0.01em;
}
.trio__d {
  margin: 0;
  color: var(--text-2);
}
.quote {
  margin: 0 0 28px;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--accent);
  font: 700 var(--fs-m)/1.4 var(--font-body);
  letter-spacing: -0.005em;
  color: var(--text);
}

/* ---------- club ---------- */
.club {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
@media (min-width: 900px) {
  .club {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
}
.club__six {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.club__six .flaps {
  font-size: var(--fs-giant);
}
.club__six-t {
  padding-bottom: 0.4em;
  font: 700 var(--fs-l)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
/* the map of the courts (P3-10): six courts from above; live = the free ones lit, the busy ones dashed */
.cmap {
  margin: 26px 0 0;
  max-width: 420px;
}
.cmap[data-state='live'],
.cmap[data-state='full'] {
  padding: 16px 16px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--surface);
}
.cmap__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.cmap[data-state='static'] .cmap__top,
.cmap[data-state='static'] .cmap__note {
  display: none;
}
.cmap__when {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cmap[data-state='full'] .live {
  background: var(--text-3);
}
.cmap__sum {
  margin: 0;
  font: 700 var(--fs-m)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.courts6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 300px;
}
.cmap[data-state='live'] .courts6,
.cmap[data-state='full'] .courts6 {
  max-width: none;
}
.courts6 svg {
  width: 100%;
  height: auto;
}
.mini-court .mc-floor {
  fill: rgba(200, 241, 53, 0.04);
  stroke: var(--accent-line);
  stroke-width: 1.2;
}
.mini-court .mc-line {
  fill: none;
  stroke: rgba(200, 241, 53, 0.4);
  stroke-width: 1;
}
.mini-court .mc-net {
  stroke: rgba(242, 245, 236, 0.75);
  stroke-width: 1.4;
}
.mini-court.is-free .mc-floor {
  fill: rgba(200, 241, 53, 0.16);
  stroke: var(--accent);
  stroke-width: 2;
}
.mini-court.is-free .mc-line {
  stroke: rgba(200, 241, 53, 0.75);
}
.mini-court.is-busy .mc-floor {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.mini-court.is-busy .mc-line,
.mini-court.is-busy .mc-net {
  stroke: var(--line-2);
}
@media (prefers-reduced-motion: no-preference) {
  .mini-court .mc-floor,
  .mini-court .mc-line,
  .mini-court .mc-net {
    transition: fill 0.24s, stroke 0.24s;
  }
}
.cmap__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}
.cmap__b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.16s, transform 0.12s;
}
.cmap__b:disabled {
  color: var(--text-3);
  border-color: var(--line);
  cursor: default;
}
@media (hover: hover) {
  .cmap__b:not(:disabled):hover {
    border-color: var(--text-2);
  }
}
.cmap__b:not(:disabled):active {
  transform: scale(0.94);
}
.cmap__time {
  min-width: 3.4em;
  font: 700 var(--fs-body)/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cmap__pick {
  margin-left: auto;
}
@media (max-width: 379px) {
  .cmap[data-state='live'],
  .cmap[data-state='full'] {
    padding: 14px 12px 12px;
  }
  .cmap__nav {
    flex-wrap: wrap;
  }
  .cmap__pick {
    flex: 1 0 100%;
    margin-left: 0;
  }
}
.cmap__pick:disabled {
  color: var(--text-3);
  border-color: var(--line);
  cursor: default;
}
.cmap__note {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.facts-dl {
  margin: 0 0 22px;
  border-top: 1px solid var(--line-2);
}
.facts-dl > div {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-2);
}
.facts-dl dt {
  font: 700 var(--fs-2xs)/1.9 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.facts-dl dd {
  margin: 0;
  font-weight: 600;
}
.facts-dl dd a {
  color: var(--text);
}
.facts-dl--tight > div {
  padding: 12px 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips li,
.chips span {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
}
.chips--inline {
  display: inline-flex;
  vertical-align: middle;
}
.howto {
  margin: 30px 0 0;
}
.howto__maps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 480px) {
  .contacts .btn {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
  /* the app of the club: the two lines on the left, the arrow at the right edge (as the booking button of the panel) */
  .contacts .btn--book {
    justify-content: space-between;
  }
}
.contacts__note {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.contacts__note .link-btn {
  font-size: var(--fs-xs);
}
.contacts__viber {
  display: none;
}
@media (min-width: 900px) and (hover: hover) {
  .contacts__viber {
    display: inline;
  }
}
@media (max-width: 899px) {
  .contacts__note:not(:has(.copy-ok:not([hidden]))) {
    display: none;
  }
}
.copy-ok {
  color: var(--accent);
  font-weight: 700;
}
.sec__sub {
  margin-top: 36px;
}
.photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 28px;
}
.photo-slot {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photos--app .photo-slot {
  aspect-ratio: 9 / 16;
}
/* the screenshots of the app stay phone-sized next to the text (not a 590 px wide screen) */
@media (min-width: 600px) {
  .photos--app {
    grid-template-columns: repeat(2, minmax(0, 220px));
  }
}

/* ---------- games ---------- */
/* the games block: on a laptop the ladder of levels runs the whole width under the head and the formats */
.games-grid__ladder .ladder {
  margin: 0;
}
.games-grid.games-grid--solo > .games-grid__ladder {
  margin-top: 28px;
}
.games-grid__btn {
  margin-top: 22px;
}
@media (max-width: 599px) {
  .games-grid__side > .btn,
  .games-grid__btn {
    display: flex;
    width: 100%;
    padding: 0 16px;
  }
}
.games-grid > .games-grid__ladder {
  margin: 0 0 22px;
}
/* laptops: the question on top (two lines), the ladder across the whole width, then the two formats and the button */
@media (min-width: 900px) {
  .games-grid:not(.games-grid--solo) {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .games-grid > .split__head {
    position: static;
  }
  .games-grid > .split__head .sec__title {
    max-width: 22em;
  }
  .games-grid > .games-grid__ladder {
    margin: 0;
  }
  .games-grid__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
  }
  .games-grid__side .formats {
    display: contents;
  }
  .games-grid__side .format {
    align-self: stretch;
  }
  .games-grid__side .photos {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
/* the scale of levels (P3-10): the 12 steps of packages/shared/src/levels.ts as one rising ladder, four groups in words;
   every step one tone brighter, A+ in lime (the top) */
.ladder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .ladder {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ladder__g {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface);
}
.ladder__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 74px;
  margin: 0 0 12px;
}
.ladder__s {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 1.5px solid var(--sc);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(242, 245, 236, 0.07), rgba(242, 245, 236, 0.015));
  color: var(--text);
  font: 700 var(--fs-xs)/1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ladder__s.s1 { height: 30px; --sc: #3a4636; }
.ladder__s.s2 { height: 34px; --sc: #424f3e; }
.ladder__s.s3 { height: 38px; --sc: #4b5946; }
.ladder__s.s4 { height: 42px; --sc: #55634f; }
.ladder__s.s5 { height: 46px; --sc: #5f6e58; }
.ladder__s.s6 { height: 50px; --sc: #6a7962; }
.ladder__s.s7 { height: 54px; --sc: #76856c; }
.ladder__s.s8 { height: 58px; --sc: #839177; }
.ladder__s.s9 { height: 62px; --sc: #909e83; }
.ladder__s.s10 { height: 66px; --sc: #9eab90; }
.ladder__s.s11 { height: 70px; --sc: #adb89e; }
.ladder__s.s12 {
  height: 74px;
  --sc: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.ladder__t {
  font-weight: 800;
  font-size: var(--fs-s);
  line-height: 1.3;
}
.ladder__n {
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ladder__d {
  margin-top: 6px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.formats {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}
@media (min-width: 600px) {
  .formats {
    grid-template-columns: 1fr 1fr;
  }
}
.format {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed var(--line-2);
}
.format .i {
  width: 28px;
  height: 28px;
  margin: 2px 0 0 6px;
}
.format h3 {
  font: 800 var(--fs-body)/1.3 var(--font-body);
  margin: 0 0 4px;
}
.format p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-s);
}

/* ---------- reviews (hidden until there are real ones) ---------- */
.reviews {
  display: grid;
  gap: 12px;
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--line-2);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.35;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .i {
  color: var(--text-2);
  transition: transform 0.2s;
}
.faq details[open] summary .i {
  transform: rotate(45deg);
  color: var(--text);
}
.faq__a {
  padding: 0 40px 20px 0;
  color: var(--text-2);
}
.faq__a p:last-child {
  margin-bottom: 0;
}
.faq__a a {
  color: var(--text);
}

/* ---------- final block ---------- */
.final {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 50% at 100% 0%, rgba(200, 241, 53, 0.07), rgba(200, 241, 53, 0) 70%), var(--bg);
}
/* the brand pattern (P3-9): the perforation of the racket of the emblem as a field of dots, 7 % white, fading from the corner */
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(242, 245, 236, 0.07) 1.3px, transparent 1.7px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 80% at 100% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.final__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
@media (min-width: 900px) {
  .final {
    padding: 110px 0;
  }
  .final__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: center;
  }
}
.final__title {
  margin: 0 0 16px;
  max-width: 14em;
  font: 700 var(--fs-h1)/1.04 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.final__title span {
  color: var(--accent);
}
.final__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.final .qr {
  position: static;
}
/* phones: the main button across, the ways to call / write two by two under it */
@media (max-width: 599px) {
  .final__cta .btn--accent {
    flex: 1 1 100%;
  }
  .final__cta .btn--ghost {
    flex: 1 1 40%;
    padding: 0 14px;
  }
}

/* ---------- footer ---------- */
.ftr {
  padding: 40px 0 36px;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.ftr__grid {
  display: grid;
  gap: 26px;
}
@media (min-width: 900px) {
  .ftr__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}
.ftr__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--text);
  font: 700 var(--fs-body)/1 var(--font-display);
}
.ftr__brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.ftr h2 {
  margin: 0 0 10px;
  font: 700 var(--fs-2xs)/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ftr ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ftr li a,
.ftr__line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
@media (hover: hover) {
  .ftr li a:hover {
    text-decoration: underline;
  }
}
.ftr__line {
  margin: 0 0 6px;
}
.ftr__legal {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.ftr__legal p {
  margin: 0 0 6px;
}
.ftr__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
}

/* ---------- sticky bottom dock (phones) ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--pad-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--pad-l);
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.dock--on {
  transform: none;
  visibility: visible;
  transition: transform 0.22s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .dock,
  .dock--on {
    transition: none;
  }
}
@media (min-width: 900px) {
  .dock {
    display: none;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .dock {
    justify-content: center;
  }
  .dock .btn {
    max-width: 420px;
  }
}
.dock__price {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dock__price b {
  font: 700 var(--fs-lead)/1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* only the caption under the price is small and grey, not the number inside the <b> */
.dock__price > span {
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
}
.dock .btn {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 0 16px;
  white-space: nowrap;
}
@media (max-width: 359px) {
  .dock__pp {
    display: none;
  }
}
.dock--sel .dock__price {
  display: none;
}
.dock__call,
.dock__x {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.dock__x {
  color: var(--text-2);
}
.dock:not(.dock--sel) .dock__x {
  display: none;
}
.dock--sel .dock__call {
  display: none;
}
@media (max-width: 359px) {
  .dock .btn--book {
    padding: 0 14px 0 16px;
  }
}
/* phones held sideways: one compact line, the first screen keeps the title and the button */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --fs-h1: min(8vw, 9vh);
  }
  .dock {
    padding-top: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .dock .btn {
    min-height: 44px;
  }
  .dock .btn__two small {
    display: none;
  }
  .hero {
    padding-top: 14px;
  }
}

/* ---------- inner pages ---------- */
.hero__art--page {
  display: block;
}
@media (max-width: 899px) {
  .hero__art--page .hero__court {
    position: relative;
    width: min(70%, 260px);
    margin: 4px auto -10px;
  }
}
@media (min-width: 900px) {
  .hero__art--page {
    min-height: 0;
  }
  .hero__art--page .hero__court {
    position: relative;
    top: auto;
    right: auto;
    width: 112%;
    margin: -30px -8% -40px 0;
  }
}
.hero__art--lock {
  min-height: 0;
}
.crumbs {
  margin: 0 0 18px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: var(--text-3);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  color: var(--text);
}
.page-hero {
  /* the court of the inner pages is drawn a little past its column: clipped here, never a sideways scroll */
  overflow: hidden;
  padding: 30px 0 40px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 60% at 100% 0%, rgba(200, 241, 53, 0.09), rgba(200, 241, 53, 0) 70%), var(--bg);
}
@media (min-width: 900px) {
  .page-hero {
    padding: 56px 0 72px;
  }
}
.page-hero__title {
  margin: 0 0 16px;
  max-width: 15em;
  font: 700 var(--fs-h1)/1.07 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.page-hero__lead {
  max-width: 34em;
  margin: 0 0 22px;
  color: var(--text-2);
  font-size: var(--fs-lead);
}
.page-hero--prices .ptable-wrap {
  margin-top: 4px;
}
.prose h2 {
  margin: 0 0 12px;
  font: 700 var(--fs-h2)/1.2 var(--font-display);
  letter-spacing: -0.015em;
}
.prose h3 {
  margin: 22px 0 8px;
  font: 800 var(--fs-lead)/1.35 var(--font-body);
}
.prose p,
.prose li {
  color: var(--text-2);
}
.prose strong {
  color: var(--text);
}
.rules {
  display: grid;
  gap: 0;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}
.rules li {
  position: relative;
  padding: 16px 0 16px 48px;
  border-top: 1px solid var(--line-2);
  counter-increment: rule;
}
.rules li:last-child {
  border-bottom: 1px solid var(--line-2);
}
.rules li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a3527 0 50%, #1a2318 50% 100%);
  color: var(--text);
  font: 700 var(--fs-s)/1 var(--font-display);
}
.rules__src {
  display: block;
  margin-top: 6px;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.draft {
  max-width: 44em;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 190, 60, 0.45);
  border-radius: 14px;
  color: var(--text-2);
  font-size: var(--fs-s);
}
.draft b {
  color: var(--warn);
}
.doclist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}
.doclist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.doclist .i {
  color: var(--text-3);
}
.callout {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px dashed var(--line-2);
  color: var(--text-2);
}
.callout b {
  color: var(--text);
}

/* ---------- /go/ ---------- */
.page-hero--go {
  padding-top: 22px;
}
.go-title {
  font-size: var(--fs-h2);
}
.go-what {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.go-card {
  max-width: 560px;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--surface);
}
.go-card + .go-card,
.go-lead + .go-card {
  margin-top: 14px;
}
.go-card--main {
  padding: 16px;
}
.go-card h2 {
  margin: 0 0 8px;
  font: 700 var(--fs-m)/1.3 var(--font-display);
}
.go-card p {
  color: var(--text-2);
}
.go-actions {
  display: grid;
  gap: 10px;
}
.go-hint {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.go-lead {
  margin: 18px 0 0;
  font-size: var(--fs-s);
}
.go-link {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: 600 var(--fs-xs)/1 var(--font-body);
}
.go-grid {
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  .page-hero--go {
    padding-top: 56px;
  }
  .go-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }
}

/* ---------- 404 ---------- */
.nf {
  padding: 56px 0 80px;
}
.nf .flaps {
  margin: 0 0 28px;
}
.nf__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
/* phones: the main button across, the two others side by side under it */
@media (max-width: 599px) {
  .nf__links .btn--accent {
    flex: 1 1 100%;
  }
  .nf__links .btn--ghost {
    flex: 1 1 0;
    padding: 0 12px;
  }
}
.noscript {
  margin: 0 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 190, 60, 0.4);
  color: var(--text);
}
.noscript a {
  color: var(--text);
  font-weight: 700;
}

/* ---------- micro-interactions (wave B): states change smoothly, a press answers at once; nothing loops, nothing without
   prefers-reduced-motion: no-preference (site.js only adds the one-shot classes is-pop / is-fresh / is-swap) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .door:active,
  .day:active,
  .seg__b:active {
    transform: scale(0.97);
  }
  .day,
  .seg__b {
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.12s;
  }
  .door__go,
  .nearest__go .i,
  .more .i {
    transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .cell.is-pop {
    animation: pop 0.32s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .panel.is-fresh {
    animation: glow 0.6s ease-out;
  }
  .panel.is-fresh #panel-sel,
  .btn.is-fresh .btn__two {
    animation: rise 0.26s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .board.is-swap .board__part,
  .board.is-swap .state {
    animation: rise 0.24s cubic-bezier(0.3, 0.7, 0.2, 1) both;
  }
  .board.is-swap .board__part:nth-child(2) {
    animation-delay: 0.03s;
  }
  .board.is-swap .board__part:nth-child(3) {
    animation-delay: 0.06s;
  }
  .faq details[open] .faq__a {
    animation: rise 0.22s ease-out;
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .door:hover .door__go,
  .nearest:hover .nearest__go .i {
    transform: translateY(2px);
  }
  .door[href$='/']:hover .door__go,
  .more:hover .i {
    transform: translateX(3px);
  }
  .cell:hover {
    transform: translateY(-1px);
  }
  .cell--busy:hover {
    transform: none;
  }
}
@keyframes pop {
  0% {
    transform: scale(0.94);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: none;
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.35);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(200, 241, 53, 0);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Windows high contrast: the chosen day / length / time are told apart by an outline, not only a fill ---------- */
@media (forced-colors: active) {
  .day[aria-pressed='true'],
  .seg__b[aria-pressed='true'],
  .cell[aria-pressed='true'] {
    outline: 3px solid Highlight;
    outline-offset: -3px;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .cell--busy .cell__time {
    text-decoration-color: GrayText;
  }
  .btn,
  .door,
  .nearest {
    border: 1.5px solid ButtonText;
  }
}