* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* Disable text selection globally — prototype taps/swipes shouldn't trigger
     selection UI. Re-enabled on form inputs below so search/location fields
     still work. */
  html, body { -webkit-user-select: none; user-select: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }

  body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
  }

  /* iPhone frame for desktop */
  .device-frame {
    width: 393px;
    height: 852px;
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: none;
  }

  /* On mobile, go full screen */
  @media (max-width: 430px) {
    body { background: #fff; align-items: flex-start; }
    .device-frame {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      border-radius: 0;
      box-shadow: none;
    }
  }

  /* Persistent map backdrop */
  #live-map {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    background: #e8e8e8;
    filter: none;
  }

  /* Screen container */
  .screen {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    z-index: 1;
  }
  .screen.active {
    display: flex;
  }
  /* Map screens are transparent — the map shows through from behind */
  .screen.map-screen {
    background: transparent;
    pointer-events: none;
  }
  /* Re-enable pointer events on interactive children within map screens */
  .screen.map-screen > * {
    pointer-events: auto;
  }

  /* Transitions */
  .screen.anim-fade-in {
    animation: fadeIn 0.25s ease-in;
  }
  .screen.anim-fade-out {
    animation: fadeOut 0.35s ease-out forwards;
    z-index: 5;
  }
  .screen.anim-fade-out-behind {
    animation: fadeOut 0.2s ease-in forwards;
  }
  .screen.anim-bg-fade-in {
    background: transparent;
    animation: fadeIn 0.2s ease-in backwards;
  }
  .screen.anim-bg-fade-in::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f1f2f3;
    animation: fadeIn 0.2s ease-in forwards;
    z-index: -1;
  }
  .screen.anim-bg-fade-in > *:not(.search-bar-container):not(.status-bar):not(.keyboard):not(.map-overlay-bar) {
    animation: fadeIn 0.2s ease-in backwards;
  }
  .screen.anim-bg-fade-in > .search-bar-container {
    animation: fadeIn 0.2s ease-in backwards;
  }
  .screen.anim-bg-fade-out {
    background: transparent;
    z-index: 5;
  }
  .screen.anim-bg-fade-out::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f1f2f3;
    animation: fadeOut 0.2s ease-in forwards;
    z-index: -1;
  }
  .screen.anim-bg-fade-out > *:not(.status-bar):not(.keyboard) {
    animation: fadeOut 0.2s ease-in forwards;
  }
  .screen.anim-slide-up {
    animation: slideUp 0.3s ease-out;
    z-index: 5;
  }

  .screen.anim-screen-fade-in {
    animation: fadeIn 0.25s ease-in forwards;
    z-index: 5;
  }

  .screen.anim-slide-down {
    animation: slideDown 0.25s ease-in forwards;
    z-index: 5;
  }
  @keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
  }
  @keyframes fadeOut {
    from { opacity: 1; } to { opacity: 0; }
  }
  @keyframes bgFadeIn {
    from { background-color: transparent; } to { background-color: #f1f2f3; }
  }
  @keyframes bgFadeOut {
    from { background-color: #f1f2f3; } to { background-color: transparent; }
  }
  @keyframes slideUp {
    from { transform: translateY(100%); } to { transform: translateY(0); }
  }
  @keyframes slideDown {
    from { transform: translateY(0); } to { transform: translateY(100%); }
  }
  @keyframes kbSlideUp {
    from { transform: translateY(100%); } to { transform: translateY(0); }
  }
  .keyboard.anim-kb-slide-up {
    animation: kbSlideUp 0.3s ease-out;
  }
  @keyframes kbSlideDown {
    from { transform: translateY(0); } to { transform: translateY(100%); }
  }
  .keyboard.anim-kb-slide-down {
    animation: kbSlideDown 0.3s ease-in forwards;
  }
  @keyframes closeBtnSlideIn {
    from { margin-left: -52px; opacity: 0; transform: translateX(52px); }
    to   { margin-left: 0;    opacity: 1; transform: translateX(0); }
  }
  @keyframes closeBtnSlideOut {
    from { margin-left: 0;    opacity: 1; transform: translateX(0); }
    to   { margin-left: -52px; opacity: 0; transform: translateX(52px); }
  }
  .search-bar-container.anim-search-enter .close-btn {
    animation: none;
  }
  .search-bar-container.anim-search-exit .close-btn {
    animation: none;
  }

  /* Status bar */
  .status-bar {
    flex-shrink: 0;
    z-index: 10;
    width: 100%;
    transition: opacity 0.15s ease-out;
  }
  .status-bar img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* ========== MAP SCREEN (image-based) ========== */
  .map-screen {
    position: relative;
  }
  .map-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  .map-search-hotspot {
    position: absolute;
    top: 26px;
    left: 8px;
    right: 8px;
    height: 62px;
    cursor: pointer;
    z-index: 20;
    border-radius: 12px;
  }
  .map-x-hotspot {
    position: absolute;
    top: 26px;
    right: 8px;
    width: 52px;
    height: 62px;
    cursor: pointer;
    z-index: 21;
  }

  /* Dynamic search bar overlay on map result screens */
  .map-overlay-bar {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
  }
  .map-search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    height: 48px;
    gap: 4px;
    background: #fff;
    border-radius: 9999px;
    padding: 0 16px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .map-search-pill .pill-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #8e8e93;
  }
  .map-search-pill .pill-text {
    flex: 1;
    font-size: 16px;
    color: #000;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pill-clear-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .map-close-pill {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .map-close-pill svg { width: 20px; height: 20px; color: #000; }

  /* ========== SEARCH / INPUT SCREENS ========== */
  .input-screen {
    background: #f1f2f3;
  }

  /* Search bar area — two stacked fields */
  .search-bar-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 24px 16px;
    flex-shrink: 0;
    background: #f1f2f3;
  }
  .search-field {
    display: flex;
    align-items: center;
    height: 48px;
    width: 100%;
    background: #fff;
    border-radius: 40px;
    padding: 0 16px;
    gap: 12px;
    box-sizing: border-box;
  }
  .back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #020203;
    cursor: pointer;
    width: 24px;
    height: 24px;
  }
  .search-field input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    font-family: 'DM Sans', -apple-system, sans-serif;
    background: transparent;
    color: #020203;
  }
  .search-field input::placeholder {
    color: #717171;
  }
  #search-input-field {
    font-size: 16px;
    color: #020203;
  }
  .search-field .clear-btn {
    width: 20px;
    height: 20px;
    background: #c7c7cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .search-field .clear-btn.hidden { display: none; }
  .search-field .clear-btn svg { width: 10px; height: 10px; color: #fff; }


  /* Location field */
  .location-field {
    display: flex;
    align-items: center;
    height: 48px;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 0 16px;
    gap: 10px;
    box-sizing: border-box;
  }
  .location-field .loc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: unset;
    background-color: unset;
    color: rgba(0, 0, 0, 0);
  }
  .location-field .loc-icon svg { width: 24px; height: 24px; }
  .location-field input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
    color: #000;
  }
  .location-field input::placeholder { color: #717171; }
  #location-input-field {
    font-size: 16px;
  }
  .location-field .clear-btn {
    width: 20px;
    height: 20px;
    background: #c7c7cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .location-field .clear-btn.hidden { display: none; }
  .location-field .clear-btn svg { width: 10px; height: 10px; color: #fff; }

  #unified-search-field { gap: 4px; padding-left: 16px; padding-right: 16px; }
  #unified-location-field { gap: 4px; padding-left: 16px; padding-right: 16px; }

  /* Current location link — Figma: neutral hover pill, 8px gap, left-aligned */
  .location-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 24px 24px;
    flex-shrink: 0;
  }
  .location-section-heading {
    font-size: 20px;
    font-weight: 900;
    color: #020203;
    line-height: 28px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .current-location {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 24px;
    cursor: pointer;
  }
  .current-location:active {
    background: #f5f5f5;
  }
  .current-location .loc-arrow-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .current-location .loc-arrow-icon img {
    width: 16px;
    height: 16px;
  }
  .current-location .loc-label {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .current-location .loc-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .current-location .loc-chevron svg {
    width: 8px;
    height: 13px;
    color: #c7c7cc;
  }

  /* Content area */
  .content-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }

  /* Section heading — Figma heading/h3: 20px, black */
  .section-heading {
    font-family: "DM Sans";
    font-size: 20px;
    font-weight: 900;
    padding: 12px 20px 4px;
    color: #020203;
    line-height: 28px;
  }
  .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 4px;
  }
  .section-heading-row h2 {
    font-family: "DM Sans";
    font-size: 20px;
    font-weight: 900;
    color: #020203;
    line-height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .section-heading-row h2 .chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .section-heading-row h2 .chevron svg {
    width: 10px;
    height: 16px;
    color: #c7c7cc;
  }
  .section-heading-row .clear-link {
    font-size: 15px;
    color: #8e8e93;
    cursor: pointer;
  }

  /* Category chips — Figma: white card 24px radius, chip pill 64px radius, 14px semibold */
  .chips-container {
    padding: 4px 20px;
  }
  .chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
  }
  .chip {
    padding: 8px 12px;
    background: #f1f1f4;
    border-radius: 64px;
    font-size: 14px;
    font-weight: 600;
    color: #020203;
    cursor: pointer;
    transition: background 0.15s;
  }
  .chip:active { background: #e3e4e8; }

  /* Recents chips */
  .recents-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin: 4px 20px 0;
  }

  /* Current location CTA */
  .current-location-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 34px;
    cursor: pointer;
  }
  .current-location-cta:active {
    opacity: 0.6;
  }
  .cta-icon-pill {
    width: 32px;
    height: 32px;
    background: #e4e5e7;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cta-label {
    font-size: 16px;
    font-weight: 500;
    color: #020203;
  }

  /* Autocomplete results */
  .autocomplete-list {
    margin: 0 20px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
  }
  .autocomplete-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .autocomplete-item:active { background: #f2f2f7; }
  .autocomplete-item + .autocomplete-item {
    border-top: none;
  }
  .autocomplete-item .ac-icon {
    width: 36px;
    height: 36px;
    background: #f2f2f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .autocomplete-item .ac-icon svg { width: 16px; height: 16px; color: #8e8e93; }
  .autocomplete-item .ac-text {
    font-size: 17px;
    color: #000;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .autocomplete-item .ac-text strong { font-weight: 500; }

  /* Location autocomplete */
  .loc-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .loc-autocomplete-item:active { background: #f2f2f7; }
  .loc-autocomplete-item + .loc-autocomplete-item {
    border-top: none;
  }
  .loc-autocomplete-item .loc-ac-icon {
    width: 36px;
    height: 36px;
    background: #e4e5e7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .loc-autocomplete-item .loc-ac-icon svg { width: 24px; height: 24px; color: #6e6e73; }
  .loc-autocomplete-item .loc-ac-info { display: flex; flex-direction: column; gap: 2px; }
  .loc-autocomplete-item .loc-ac-name { font-size: 17px; color: #000; }
  .loc-autocomplete-item .loc-ac-name strong { font-weight: 500; }
  .loc-autocomplete-item .loc-ac-sub { font-size: 13px; color: #8e8e93; }

  /* Keyboard */
  .keyboard {
    background: #e1e4e7;
    padding: 12px 0 10px;
    border-radius: 28px 28px 0 0;
    flex-shrink: 0;
  }
  .keyboard-keys {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 12px 8.5px 0;
  }
  .keyboard-row {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .keyboard-row.row-2 { padding: 0 20px; }
  .keyboard-row.row-3 { gap: 14.25px; }
  .row-3-letters { display: flex; flex: 1; gap: 6px; height: 45px; }
  .key {
    flex: 1;
    height: 45px;
    background: #fff;
    border-radius: 8.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, 'SF Pro', 'SF Compact', 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #595959;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
  }
  .key:active { background: #cdd0d6; }
  .key.shift {
    flex: 0 0 44.667px;
  }
  .key.shift, .key.backspace { display: flex; align-items: center; justify-content: center; }
  .key.shift img, .key.backspace img, .key.shift svg, .key.backspace svg { width: 23px; height: 20px; }
  .key.backspace {
    flex: 0 0 45px;
  }
  .key.space { flex: 1; }
  .key.search-key {
    flex: 0 0 92px;
    background: #131414;
    border-radius: 8.5px;
    color: #fff;
  }
  .key.search-key { display: flex; align-items: center; justify-content: center; }
  .key.search-key img { width: 100%; height: 100%; object-fit: contain; border-radius: 8.5px; }
  .key.num { flex: 0 0 45px; font-size: 18px; font-family: -apple-system, 'SF Compact Rounded', 'SF Pro Rounded', sans-serif; }
  .key.emoji { flex: 0 0 45px; font-size: 24px; }
  .keyboard-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 27px 39px 15px 36px;
  }
  .keyboard-bottom img.kb-globe { width: 26px; height: 26px; }
  .keyboard-bottom img.kb-mic { width: 19px; height: 28px; }

  /* Explore cards (for screen 09 variant) */
  .explore-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px;
  }
  .explore-card {
    background: #f2f2f7;
    border-radius: 12px;
    padding: 14px;
    height: 80px;
    display: flex;
    align-items: flex-end;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .explore-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 50px;
    height: 50px;
    background: #d8d8dc;
    border-radius: 8px;
    transform: rotate(12deg);
  }

  /* old tab bar styles removed — see new .tab-bar below */
  .tab-item.active svg { color: #000; }
  .tab-item.active span { color: #000; }
  .tab-item:not(.active) svg { color: #000; }
  .tab-item:not(.active) span { color: #000; }

  /* Helper */
  .hidden { display: none !important; }

  /* Prototype hint overlay */
  .hint-overlay {
    position: absolute;
    bottom: 114px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    z-index: 100;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s;
    white-space: nowrap;
  }
  .hint-overlay.fade-out { opacity: 0; }

  /* ========== INTERACTIVE MAP ========== */
  .mapboxgl-canvas {
    filter: none;
  }
  .mapboxgl-ctrl-attrib,
  .mapboxgl-ctrl-logo,
  .mapboxgl-ctrl { display: none !important; }
  .playlist-pin {
    background: none !important;
    border: none !important;
  }
  .pin-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #bdbdbd, #5b5b5b);
    border: 3px solid white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.25);
  }
  .pin-dot-numbered {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #bdbdbd, #5b5b5b);
    border: 3px solid white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .user-location-wrapper {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .user-location-dot {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user-location-dot::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0569FF;
    animation: location-pulse 2.5s ease-in-out infinite;
  }
  @keyframes location-pulse {
    0%, 100% { transform: scale(0.9); }
    50%      { transform: scale(1.05); }
  }

  /* Visible search pill on default map screen */
  .map-search-pill-default {
    position: absolute;
    top: 62px;
    left: 24px;
    right: 24px;
    height: 48px;
    background: rgba(255,255,255,0.89);
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 20;
    cursor: pointer;
    color: #4F5159;
    font-size: 16px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .map-search-pill-default .pill-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }

  /* Search this area button */
  .search-this-area-btn {
    position: absolute;
    top: 122px; /* 62px pill top + 48px pill height + 12px gap */
    left: 50%;
    transform: translateX(-50%);
    background: #020203;
    color: #fff;
    border: none;
    border-radius: 64px;
    padding: 12px 16px;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .search-this-area-btn.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Current location / navigate button on map */
  .map-nav-btn {
    position: absolute;
    right: 16px;
    z-index: 9;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(45,45,45,0.2);
    border: 1px solid rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 12px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .map-nav-btn.collapsed {
    transform: translateY(291px);
  }
  .map-nav-btn img, .map-nav-btn svg {
    width: 24px;
    height: 24px;
  }
  .map-nav-btn.active svg path {
    fill: #0569FF;
  }

  /* Tab bar */
  .tab-bar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 349px;
    height: 62px;
    background: white;
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    padding: 4px;
    z-index: 25;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 54px;
    border-radius: 100px;
    padding: 4px;
    cursor: pointer;
    position: relative;
  }
  .tab-item.active {
    position: relative;
  }
  .tab-item.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(219,219,219,0.5);
    border-radius: 100px;
    pointer-events: none;
    z-index: 0;
  }
  .tab-item.active svg, .tab-item.active span {
    position: relative;
    z-index: 1;
  }
  .tab-item img, .tab-item svg {
    width: 24px;
    height: 24px;
  }
  .tab-item span {
    font-size: 11px;
    font-weight: 500;
    color: black;
    font-family: 'DM Sans', -apple-system, sans-serif;
    text-align: center;
    line-height: 14px;
  }

  /* ========== BOTTOM SHEET ========== */
  .results-sheet {
    position: absolute;
    bottom: -266px; /* overflow so translateY(-266) still reaches screen bottom */
    left: 0;
    right: 0;
    height: 726px; /* 460px visible + 266px overflow to cover full screen when dragged up */
    background: #f1f2f3;
    border-radius: 32px 32px 0 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
  }
  .results-sheet.collapsed {
    transform: translateY(291px); /* sheet top lands at ~683px from screen top */
  }
  .results-sheet.expanded {
    transform: translateY(-266px); /* sheet top lands at ~126px = 16px below search bar */
  }
  .sheet-handle {
    width: 49px;
    height: 6px;
    background: rgba(17,17,17,0.3);
    border-radius: 20px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  /* Filter bar */
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 10px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar::-webkit-scrollbar { display: none; }

  .filter-toggle {
    display: flex;
    background: #e3e4e8;
    border-radius: 25px;
    padding: 4px;
    flex-shrink: 0;
  }
  .filter-toggle .toggle-opt {
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .filter-toggle .toggle-opt.active {
    background: white;
  }
  .filter-toggle .toggle-opt svg, .filter-toggle .toggle-opt img { width: 20px; height: 20px; }

  .filter-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border-radius: 64px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #282828;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .filter-chip svg { width: 10px; height: 10px; flex-shrink: 0; }

  /* Venue list */
  .venue-list {
    flex: 1;
    overflow-y: hidden;
    padding: 4px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .results-sheet.expanded .venue-list {
    overflow-y: auto;
  }
  .venue-list::-webkit-scrollbar { display: none; }

  .venue-card {
    background: white;
    border-radius: 24px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .venue-intro-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .venue-intro-badge svg { display: block; flex-shrink: 0; }
  .venue-intro-badge-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #296b49;
  }
  .venue-header {
    display: flex;
    gap: 12px;
  }
  .venue-image {
    width: 108px;
    height: 108px;
    background: #e4e5e7;
    border-radius: 16px;
    flex-shrink: 0;
  }
  .venue-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }
  .venue-info-text {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .venue-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-tags {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #90939d;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 16px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-rating .star-icon { width: 12px; height: 12px; flex-shrink: 0; }
  .venue-rating-score { font-weight: 700; color: #020203; }
  .venue-rating-reviews { font-weight: 500; color: #90939d; }
  .venue-rating-distance { font-weight: 500; color: #90939d; }
  .venue-desc {
    font-size: 14px;
    font-weight: 500;
    color: #90939d;
    line-height: 20px;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-action-btn {
    align-self: flex-start;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f2f3;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    font-family: 'DM Sans', -apple-system, sans-serif;
  }
  .venue-action-btn svg, .venue-action-btn img { width: 20px; height: 20px; flex-shrink: 0; }

  /* ========== SEARCH TAB TOGGLE ========== */
  .search-toggle-wrapper {
    padding: 8px 24px 12px;
    flex-shrink: 0;
  }
  .search-toggle {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    padding: 4px;
    gap: 12px;
  }
  .search-toggle::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 10px);
    background: #f1f2f3;
    border-radius: 64px;
    transition: left 0.2s ease;
    pointer-events: none;
  }
  .search-toggle.tab-location::before {
    left: calc(50% + 6px);
  }
  .search-toggle-opt {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 64px;
    font-size: 16px;
    font-weight: 500;
    color: #020203;
    font-family: 'DM Sans', -apple-system, sans-serif;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
  }

  /* ========== VENUE DETAIL MODAL ========== */
  #venue-detail {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 22;
    pointer-events: none;
    transition: background 0.35s ease;
  }
  /* No default overlay dim — the venue sheet itself provides the visual.
     The JS applies an inline rgba background only when a class detail is stacked on top. */
  #venue-detail.venue-detail-visible .venue-detail-sheet {
    pointer-events: auto;
  }

  .venue-detail-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(100% - 54px);
    background: #f1f2f3;
    border-radius: 32px 32px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transform-origin: top center;
    will-change: transform, border-radius, filter;
    visibility: hidden;
  }
  #venue-detail.venue-detail-visible .venue-detail-sheet {
    visibility: visible;
  }
  /* iOS-style stacked-sheet effect — applied while class detail is on top.
     translateY(0) keeps the venue's top edge at the status bar bottom (54px),
     and the class detail sits 70px from top → 16px visible peek. */
  .venue-detail-sheet.stacked {
    transform: scale(0.95) translateY(0px);
    border-radius: 20px 20px 0 0;
    filter: brightness(0.92);
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94),
                border-radius 0.35s ease,
                filter 0.35s ease;
  }
  .venue-detail-sheet.unstacking {
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94),
                border-radius 0.35s ease,
                filter 0.35s ease;
  }
  /* Hide venue's drag handle while stacked — class detail's handle takes over.
     Fade back in immediately when unstacking so there's no perceived lag
     between the sheet scaling back and the handle reappearing. */
  .venue-detail-sheet.stacked .venue-detail-handle {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .venue-detail-sheet .venue-detail-handle {
    transition: opacity 0.2s ease;
  }

  /* Blurred wash behind the persistent tab bar. Fades from opaque at the
     bottom to transparent at the top so scrolling content dissolves into it. */
  .tab-bar-blur {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 25;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to top, #000 50%, transparent);
    mask-image: linear-gradient(to top, #000 50%, transparent);
    transition: opacity 0.3s ease;
  }
  .tab-bar-blur.hidden-down { opacity: 0; }

  /* Persistent tab bar that floats above venue detail */
  .tab-bar-persistent {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 349px;
    height: 62px;
    background: white;
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    padding: 4px;
    z-index: 30;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), opacity 0.3s ease;
  }
  /* Hidden state: tab bar slides down off-screen when class detail content is scrolled */
  .tab-bar-persistent.hidden-down {
    transform: translateX(-50%) translateY(120px);
    opacity: 0;
    pointer-events: none;
  }

  .venue-detail-handle {
    width: 100%;
    padding: 10px 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
  }
  .venue-detail-handle::before {
    content: '';
    width: 56px;
    height: 5px;
    background: #111;
    opacity: 0.3;
    border-radius: 20px;
  }

  /* Top bar: close left, title center, save/share right */
  .vd-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    gap: 12px;
    position: relative;
  }
  .venue-detail-close {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .vd-actions-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .vd-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .vd-action-icon svg { width: 24px; height: 24px; }

  /* Sticky nav with venue name */
  .vd-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 8px;
    background: #f1f2f3;
  }
  .vd-sticky-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #020203;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    max-width: calc(100% - 280px);
    text-align: center;
    pointer-events: none;
  }
  .vd-sticky-nav.scrolled .vd-sticky-title {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .venue-detail-scroll {
    position: relative;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .venue-detail-scroll::-webkit-scrollbar { display: none; }

  .venue-detail-content {
    padding: 20px 20px 110px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 0;
    box-sizing: border-box;
  }
  .vd-header-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Header — no fixed height; column stacks h1 → meta → tags */
  .vd-header#vd-section-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: fit-content;
    min-height: 0;
    flex-shrink: 0;
  }
  /* Header */
  .vd-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 32px;
    color: #020203;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .vd-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  #vd-section-header > .vd-meta {
    margin-top: 8px;
  }
  .vd-tags {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4F5159;
  }
  .vd-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
  }
  .vd-star { display: flex; align-items: center; flex-shrink: 0; }
  .vd-rating-num {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    flex-shrink: 0;
  }
  .vd-rating-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #4f5159;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }


  /* Shared: full-bleed horizontal scroll (breaks out of content padding) */
  .vd-hscroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x proximity;
  }
  .vd-hscroll::-webkit-scrollbar { display: none; }

  /* Images */
  .vd-image-placeholder {
    width: 166px;
    height: 166px;
    background: #d9d9d9;
    border-radius: 16px;
    flex-shrink: 0;
  }

  /* Tabs sit in the scroll flow right below the image carousel and stick
     to the top of the scroll container (just below the sticky nav) once
     scrolled past. Always visible. */
  .vd-tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e4e5e7;
    position: sticky;
    top: 64px;
    z-index: 3;
    background: #f1f2f3;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .vd-tab {
    padding: 12px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
  }
  /* Bold label is always in the flow (sets the width), but invisible by default */
  .vd-tab-label-bold {
    font-weight: 700;
    visibility: hidden;
  }
  /* Regular label overlays on top */
  .vd-tab-label {
    font-weight: 500;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
  /* When active, hide regular and show bold */
  .vd-tab.active .vd-tab-label {
    visibility: hidden;
  }
  .vd-tab.active .vd-tab-label-bold {
    visibility: visible;
  }
  .vd-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: #020203;
    border-radius: 2px 2px 0 0;
    /* Motion.js handles animation */
    pointer-events: none;
  }

  /* Tab panels */
  .vd-panel {
    display: none;
    flex-direction: column;
    gap: 40px;
  }
  .vd-panel-schedule {
    gap: 0;
  }
  .vd-panel-classes {
    gap: 12px;
  }
  .vd-panel.active {
    display: flex;
    animation: vd-panel-fade 200ms cubic-bezier(.25,.46,.45,.94);
  }
  @keyframes vd-panel-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ===== SCHEDULE PANEL ===== */
  .vd-date-picker {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    position: sticky;
    top: 109px;
    z-index: 2;
    background: #f1f2f3;
    margin-top: -24px;
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .vd-date-picker::-webkit-scrollbar { display: none; }
  .vd-week {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .vd-date-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding-top: 4px;
  }
  .vd-date-letter {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    color: #020203;
  }
  .vd-date-day {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .vd-date-cell.past .vd-date-day { color: #b3b5bc; }
  /* Today is highlighted with a white circle even when not the selected date */
  .vd-date-cell.today .vd-date-day {
    background: #fff;
    color: #020203;
  }
  /* Selected date overrides today with the dark pill */
  .vd-date-cell.selected .vd-date-day {
    background: #020203;
    color: white;
  }

  .vd-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vd-schedule-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
  }
  .vd-schedule-card.disabled { cursor: default; }
  .vd-schedule-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .vd-schedule-time { color: #020203; }
  .vd-schedule-spots { color: #4F5159; }
  .vd-schedule-card.disabled .vd-schedule-time { color: #b3b5bc; }
  .vd-schedule-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-schedule-card.disabled .vd-schedule-title { color: #b3b5bc; }
  .vd-schedule-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #4F5159;
  }
  .vd-schedule-card.disabled .vd-schedule-instructor { color: #b3b5bc; }
  .vd-schedule-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
  }
  .vd-schedule-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
  }
  .vd-schedule-card.disabled .vd-schedule-rating { color: #b3b5bc; }
  .vd-schedule-card.disabled .vd-schedule-rating svg path { fill: #b3b5bc; }
  .vd-schedule-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
  }
  .vd-schedule-price-label { color: #020203; }
  .vd-schedule-card.disabled .vd-schedule-price-label { color: #b3b5bc; }
  .vd-price-strike {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4F5159;
    text-decoration: line-through;
  }
  .vd-schedule-card.disabled .vd-price-strike { color: #b3b5bc; }
  .vd-price-final {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #379062;
  }
  .vd-price-plain {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-schedule-card.disabled .vd-price-final,
  .vd-schedule-card.disabled .vd-price-plain { color: #b3b5bc; }

  /* ===== CLASSES PANEL ===== */
  .vd-class-summary-card {
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .vd-class-summary-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .vd-class-summary-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-class-summary-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vd-class-summary-seemore {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
  }
  .vd-class-summary-btn {
    background: transparent;
    border: 1px solid #e4e5e7;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
  }
  .vd-class-summary-btn:active {
    background: #f1f2f3;
  }

  /* ===== REVIEWS PANEL ===== */
  .vd-panel-reviews { gap: 16px; }
  /* Pushes the "Class reviews" title 16px further from the summary so the
     gap between them is 32px while other .vd-panel-reviews gaps stay 16px. */
  .vd-panel-reviews .vd-rev-summary + .vd-section-title { margin-top: 16px; }

  /* Rating summary — sits directly on the panel's gray background;
     only the bar histogram below gets its own white card. */
  .vd-rev-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vd-rev-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vd-rev-score {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #020203;
  }
  .vd-rev-stars-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-rev-stars { display: flex; gap: 0; }
  .vd-rev-stars svg { width: 24px; height: 24px; }
  .vd-rev-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4F5159;
  }
  .vd-rev-source {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
    /* Pulls the source line 8px closer to the rating so the gap above
       it is 8px while the other .vd-rev-summary gaps stay at 16px. */
    margin-top: -8px;
  }

  /* White card that contains only the rating-distribution bars. */
  .vd-rev-bars-card {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
  }

  /* Rating bars */
  .vd-rev-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .vd-rev-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-rev-bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #020203;
    width: 12px;
    flex-shrink: 0;
  }
  .vd-rev-bar-track {
    flex: 1;
    height: 8px;
    background: #f1f2f3;
    border-radius: 5px;
    overflow: hidden;
  }
  .vd-rev-bar-fill {
    height: 100%;
    background: #ffb54d;
    border-radius: 5px;
  }

  /* AI summary */
  .vd-rev-ai-summary {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #020203;
  }

  /* Individual review cards */
  .vd-rev-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vd-rev-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vd-rev-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
  .vd-rev-avatar {
    width: 32px;
    height: 32px;
    border-radius: 28px;
    background: #d9dadd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: white;
    flex-shrink: 0;
  }
  .vd-rev-card-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .vd-rev-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .vd-rev-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-rev-card-stars { display: flex; gap: 0; }
  .vd-rev-card-stars svg { display: block; flex-shrink: 0; }
  .vd-rev-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #90939d;
  }
  .vd-rev-class-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-rev-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    /* Pulls the body 8px closer to the class title so the gap between them
       is 4px while the other .vd-rev-card gaps stay at 12px. */
    margin-top: -8px;
  }

  /* Promo card */
  .vd-promo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    background: white;
    border-radius: 24px;
  }
  .vd-promo-icon { flex-shrink: 0; margin-top: 2px; }
  .vd-promo-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-promo-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }

  /* Section titles */
  .vd-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #vd-section-reviews {
    gap: 24px;
  }
  /* Available today preview — sits between the carousel and the tabs. */
  .vd-available-today {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vd-see-schedule-btn {
    width: 100%;
    background: #fff;
    color: #020203;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
  }
  .vd-see-schedule-btn:active {
    background: #d6d8dc;
  }
  .vd-section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
    margin: 0;
  }
  .vd-section-header {
    display: flex;
    align-items: center;
    gap: 0px;
  }

  /* Classes scroll */
  .vd-class-card {
    flex-shrink: 0;
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
  }
  .vd-class-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-class-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4F5159;
  }
  .vd-class-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4f5159;
    margin-top: 4px;
  }
  .vd-class-slots {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .vd-slot-btn {
    padding: 8px 12px;
    border: 1px solid #e4e5e7;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    white-space: nowrap;
    cursor: pointer;
  }
  .vd-see-all-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: auto;
    padding: 12px 16px;
    background: white;
    border-radius: 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Map card: map image stacked on an address footer */
  .vd-map-card {
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .vd-map-thumb {
    height: 168px;
    background: #e8e8e8;
    position: relative;
  }
  .vd-map-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .vd-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .vd-map-address {
    padding: 16px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
    background: #fff;
  }

  /* Description */
  .vd-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
  }

  /* Rating summary */
  .vd-rating-summary {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vd-rating-big {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #020203;
  }
  .vd-rating-stars-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vd-stars-row {
    display: flex;
    gap: 0;
  }
  .vd-reviews-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }

  /* Review cards scroll */
  .vd-review-card {
    flex-shrink: 0;
    width: 311px;
    background: white;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vd-review-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
  .vd-review-avatar {
    width: 32px;
    height: 32px;
    background: #d9dadd;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: white;
    flex-shrink: 0;
  }
  .vd-review-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .vd-review-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .vd-reviewer {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .vd-review-stars { display: flex; gap: 0; }
  .vd-review-stars svg { display: block; flex-shrink: 0; }
  .vd-review-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #90939d;
  }
  .vd-review-body-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .vd-review-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .vd-review-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* "See all" card at the end of the reviews carousel */
  .vd-review-see-all {
    flex-shrink: 0;
    align-self: stretch;
    background: white;
    border-radius: 24px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    white-space: nowrap;
  }

  /* About block wraps the clamped text + "see more" in a tight column (4px gap). */
  .vd-about-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Pulls the about copy 8px closer to the image carousel so the gap
       between carousel and copy is 24px while all other
       .venue-detail-content gaps stay at 32px. */
    margin-top: -8px;
  }

  /* About — clamped to 3 lines by default. JS unhides the adjacent
     "see more" span only when the text actually overflows; tapping it
     toggles .expanded to reveal the full copy. */
  .vd-about-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vd-about-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .vd-see-more {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    cursor: pointer;
    display: block;
  }

  /* Quick actions: horizontal pill row above the image carousel */
  .vd-quick-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .vd-quick-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .vd-quick-btn span {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
    white-space: nowrap;
  }

  /* ========== CLASS DETAIL MODAL ========== */
  #class-detail {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 25;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  #class-detail.class-detail-visible {
    background: rgba(0,0,0,0.15);
  }
  #class-detail.class-detail-visible .class-detail-sheet {
    pointer-events: auto;
    visibility: visible;
  }

  .class-detail-sheet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: calc(100% - 70px);
    background: #f1f2f3;
    border-radius: 32px 32px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transform-origin: top center;
    will-change: transform;
    visibility: hidden;
  }

  /* Handle floats absolutely at the top of the sheet so the scroll content
     (including the hero image) can scroll behind it. */
  .class-detail-handle {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 6;
    padding: 10px 0 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }
  .class-detail-handle::before {
    content: '';
    width: 56px;
    height: 5px;
    background: #111;
    opacity: 0.3;
    border-radius: 20px;
  }

  /* Scroll container fills the entire sheet so the hero scrolls edge-to-edge */
  .class-detail-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .class-detail-scroll::-webkit-scrollbar { display: none; }

  /* Sticky nav: X left, fade-in title center, save+share right */
  .cd-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 20px 8px;
    background: transparent;
    gap: 12px;
    transition: background 0.25s ease;
  }
  .cd-sticky-nav.scrolled {
    background: #f1f2f3;
  }
  .cd-sticky-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #020203;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 260px);
    pointer-events: none;
  }
  .cd-sticky-nav.scrolled .cd-sticky-title {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .cd-icon-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  .cd-actions-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    flex-shrink: 0;
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  .cd-sticky-nav.scrolled .cd-icon-btn,
  .cd-sticky-nav.scrolled .cd-actions-pill {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .cd-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .cd-action-icon svg { width: 24px; height: 24px; }

  /* Bookmark toggle states (shared selectors for venue + class detail) */
  .vd-bookmark-btn.bookmarked svg path,
  .cd-bookmark-btn.bookmarked svg path {
    fill: #020203;
    stroke: #020203;
  }

  /* Full-bleed hero cover image — sits behind the sticky nav.
     Negative margin pulls it up behind the sticky header so the image
     starts at the very top of the sheet and scrolls under the buttons. */
  .cd-hero-image {
    position: relative;
    width: 100%;
    height: 276px;
    margin-top: -80px;
    background: linear-gradient(180deg, #eceef1 0%, #cdced0 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }

  /* Content area — overlaps the hero image with rounded top corners */
  .cd-content {
    position: relative;
    z-index: 1;
    margin-top: -24px;
    padding: 24px 20px 0;
    background: #f1f2f3;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Venue header — full-width info stack (hero image is full-bleed above) */
  .cd-venue-header {
    display: flex;
  }
  .cd-venue-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cd-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
  }
  .cd-venue-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4F5159;
    cursor: pointer;
    min-width: 0;
  }
  .cd-venue-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  #cd-venue-text {
    font-size: 14px;
    line-height: 20px;
  }
  .cd-venue-link > svg {
    flex-shrink: 0;
  }
  .cd-header-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
  }
  .cd-header-rating svg { display: block; flex-shrink: 0; }
  .cd-header-rating-num {
    font-weight: 700;
    color: #020203;
  }
  .cd-header-rating-count {
    font-weight: 500;
    color: #4f5159;
  }
  /* Intro offer line — plain green text (no pill), rendered last in the info stack */
  .cd-intro-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .cd-intro-chip-icon { display: none; }
  .cd-intro-chip-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(2, 2, 3, 1);
  }
  .cd-intro-chip-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(55, 144, 98, 1);
  }
  .cd-intro-chip-strike {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(144, 147, 157, 1);
    text-decoration: line-through;
  }
  .cd-intro-chip-plain {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
  }

  /* Wraps date picker + time slots so spacing between them is one knob (gap). */
  .cd-schedule-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Date picker — horizontally paginated by week (carousel)
     Native scroll-snap is disabled because we drive the snap with a JS ease-out
     animation in prototype.js for a slower, more deliberate carousel feel. */
  .cd-date-picker {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-left: -20px;
    margin-right: -20px;
  }
  .cd-date-picker::-webkit-scrollbar { display: none; }
  /* Tighten space from header into the schedule block (cd-content flex gap is 24px). */
  .cd-header-section + .cd-schedule-stack {
    margin-top: -16px;
  }
  .cd-week {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    gap: 12px;
    padding: 8px 20px;
    box-sizing: border-box;
    scroll-snap-align: start;
  }
  .cd-date-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 4px;
    cursor: pointer;
  }
  .cd-date-letter {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    color: #020203;
  }
  .cd-date-day {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .cd-date-cell.past .cd-date-day { color: #b3b5bc; }
  /* Today is highlighted with a white circle even when not the selected date */
  .cd-date-cell.today .cd-date-day {
    background: #fff;
    color: #020203;
  }
  /* Selected date overrides today with the dark pill */
  .cd-date-cell.selected .cd-date-day {
    background: #020203;
    color: #fff;
  }

  /* Time slot chips — single horizontal row, scrollable */
  .cd-time-slots {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px;
    margin-right: -20px;
    /* Bottom 4px + cd-tab's padding-top 12px = 16px gap to the tabs */
    padding: 16px 20px 4px;
    scroll-padding-left: 20px;
    scroll-snap-type: x proximity;
  }
  .cd-time-slots::-webkit-scrollbar { display: none; }
  .cd-time-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cd-time-slot-chip {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    white-space: nowrap;
    transition: border-color 0.15s ease;
  }
  .cd-time-slot.selected .cd-time-slot-chip {
    border-color: #161618;
  }
  .cd-time-slot-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-time-slot-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4F5159;
  }
  .cd-time-slot-spots {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
    text-align: center;
  }

  /* Tabs (sticky below nav, animated indicator) */
  .cd-tabs {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #e4e5e7;
    position: sticky;
    top: 80px;
    z-index: 3;
    background: #f1f2f3;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .cd-tab {
    padding: 12px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
  }
  .cd-tab-label-bold {
    font-weight: 700;
    visibility: hidden;
  }
  .cd-tab-label {
    font-weight: 500;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }
  .cd-tab.active .cd-tab-label { visibility: hidden; }
  .cd-tab.active .cd-tab-label-bold { visibility: visible; }
  .cd-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: #020203;
    border-radius: 2px 2px 0 0;
    pointer-events: none;
  }

  /* Panels */
  .cd-panel { display: none; }
  .cd-panel.active {
    display: flex;
    flex-direction: column;
    gap: 40px;
    animation: cd-panel-fade 200ms cubic-bezier(.25,.46,.45,.94);
  }
  @keyframes cd-panel-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Description */
  .cd-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  /* Collapsible text sections (description, prep, cancellation) */
  .cd-collapsible p {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .cd-collapsible.collapsed p {
    max-height: 72px; /* ~3 lines at 16px/24px */
  }
  .cd-collapsible.expanded p {
    max-height: 600px;
  }
  .cd-see-more {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    cursor: pointer;
    margin-top: 4px;
  }

  /* Sections */
  .cd-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-section.cd-header-section {
    gap: 20px;
  }
  .cd-section-header {
    display: flex;
    align-items: center;
    gap: 0px;
  }
  .cd-section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
  }
  .cd-section-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  .cd-section-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #4f5159;
    margin: -4px 0 0;
  }
  #cd-reviews-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  /* Ratings & Reviews — inline summary (Overview tab) */
  .cd-rating-summary {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* Ratings & Reviews — full summary (Reviews tab). Mirrors the venue-detail
     pattern: the outer container is transparent and sits on the sheet's gray
     background; only the bar histogram gets its own white card. */
  .cd-rating-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #cd-rating-card-reviews {
    gap: 24px;
  }
  /* Scoped to .cd-rating-card so the Overview tab's inline .cd-rating-summary
     (which reuses .cd-rating-big / .cd-rating-summary-count) stays unchanged. */
  .cd-rating-card .cd-rating-big {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
  }
  .cd-rating-card .cd-stars svg { width: 24px; height: 24px; }
  .cd-rating-card .cd-rating-summary-count {
    font-size: 14px;
    line-height: 20px;
  }
  .cd-rating-card .cd-rating-source {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    /* Pulls the subtitle 8px closer to the rating so the gap above it is 8px
       while the other .cd-rating-card gaps stay at 16px. Mirrors .vd-rev-source. */
    margin-top: -8px;
  }
  .cd-rating-card .cd-rating-ai-summary {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }
  .cd-rating-card .cd-rating-bars { gap: 8px; }
  .cd-rating-card .cd-rating-bar-track {
    background: #f1f2f3;
    border-radius: 5px;
  }
  .cd-rating-card .cd-rating-bar-fill { border-radius: 5px; }
  .cd-rating-bars-card {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
  }
  .cd-rating-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cd-rating-big {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 40px;
    color: #020203;
  }
  .cd-rating-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cd-stars { display: flex; gap: 0; }
  .cd-stars svg { display: block; }
  .cd-rating-summary-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4F5159;
  }
  .cd-rating-source {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4F5159;
  }
  .cd-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cd-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cd-rating-bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #020203;
    width: 12px;
    text-align: right;
  }
  .cd-rating-bar-track {
    flex: 1;
    height: 8px;
    background: #e4e5e7;
    border-radius: 4px;
    overflow: hidden;
  }
  .cd-rating-bar-fill {
    height: 100%;
    background: #FFB54D;
    border-radius: 4px;
  }
  .cd-rating-ai-summary {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #020203;
    margin: 0;
  }
  .cd-review-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px;
    scroll-padding-left: 20px;
    scroll-snap-type: x proximity;
  }
  .cd-review-cards::-webkit-scrollbar { display: none; }
  .cd-review-card {
    flex-shrink: 0;
    width: 311px;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-review-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
  .cd-review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 28px;
    background: #d9dadd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: white;
    flex-shrink: 0;
  }
  .cd-review-card-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .cd-review-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .cd-review-card-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-review-card-stars { display: flex; gap: 0; }
  .cd-review-card-stars svg { display: block; flex-shrink: 0; }
  .cd-review-card-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #90939d;
  }
  .cd-review-card-body-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cd-review-card-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  .cd-review-card-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #020203;
    margin: 0;
  }
  /* Carousel-only: clamp the body to 4 lines. JS unhides the adjacent
     "see more" span when the text actually overflows; tapping it toggles
     .expanded to reveal the full copy. Reviews-tab list cards are
     unclamped (their block is full-width and gets its own styles below). */
  .cd-review-cards .cd-review-card-body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-review-cards .cd-review-card-body.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .cd-review-card-seemore {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #020203;
    cursor: pointer;
  }
  /* Without this, the span's default `display` would override the UA
     [hidden] rule, making the link visible even when JS left hidden=true. */
  .cd-review-card-seemore[hidden] { display: none; }
  /* Reviews-tab list variant: pulls the body 8px closer to the class title
     so they sit 4px apart while the other .cd-review-card gaps stay at 12px. */
  .cd-review-card-list .cd-review-card-body {
    margin-top: -8px;
  }
  .cd-review-see-all {
    flex-shrink: 0;
    align-self: stretch;
    background: #fff;
    border-radius: 24px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
    white-space: nowrap;
  }

  /* Reviews panel list */
  .cd-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cd-reviews-list .cd-review-card { width: 100%; }

  /* Fixed booking footer: pinned to the device frame so it can sit above the
     persistent tab bar. Hidden offscreen by default; `.cd-booking-visible`
     adds the reveal transform so JS can animate it in when class detail opens. */
  /* Slide + visibility flip are driven by Motion in JS. CSS only defines the
     hidden resting state so first paint (before JS hydrates) doesn't flash
     the bar onscreen. The `.cd-booking-visible` class is a state marker only
     — no CSS rules tied to it beyond pointer-events. */
  .cd-booking-bar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 35;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));
    will-change: transform;
  }
  .cd-booking-bar.cd-booking-visible {
    pointer-events: auto;
  }
  .cd-booking-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
  }
  .cd-booking-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .cd-booking-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #020203;
  }
  .cd-booking-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(2, 2, 3, 1);
  }
  .cd-booking-intro-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(2, 2, 3, 1);
  }
  .cd-booking-intro-label[hidden] { display: none; }
  .cd-booking-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .cd-booking-price-strike {
    color: #b3b5bc;
    text-decoration: line-through;
    font-weight: 500;
  }
  .cd-booking-price-final {
    color: rgba(55, 144, 98, 1);
  }
  .cd-booking-price-plain {
    color: #020203;
    font-weight: 600;
  }
  .cd-booking-cta {
    width: 100%;
    background: #e10e0e;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
  }
  .cd-booking-cta:active {
    background: #c00b0b;
  }

  /* Checkout: morph-in-place from the booking bar. Shares the same
     bottom/left/right/border-radius geometry as .cd-booking-bar so the
     seam is invisible when the sheet first appears; then grows upward
     while its background transitions from glass → solid white. */
  .cd-checkout-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    z-index: 35;
    transition: opacity 0.25s ease;
  }
  .cd-checkout-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .cd-checkout-sheet {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    /* Height is controlled by JS; CSS default keeps it invisible offscreen. */
    height: 130px;
    border-radius: 24px;
    /* Closed: 8px edge gap + 16px padding = 24px to button.
       Open: 0px edge gap + 24px padding = 24px to button.
       Padding animates 16 → 24 to keep the Book button pinned in place while
       the sheet grows out to flush edges. Bottom padding reserves CTA space
       (52px button + 16px offset + 16px breathing room above the button) so
       absolutely-positioned CTA doesn't overlap the flex content above it. */
    padding: 16px 16px 84px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    visibility: hidden;
    z-index: 36;
    /* Closed (glass) state — matches .cd-booking-bar exactly. */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    transition:
      background 0.44s cubic-bezier(.32,.72,0,1),
      box-shadow 0.44s cubic-bezier(.32,.72,0,1),
      backdrop-filter 0.44s cubic-bezier(.32,.72,0,1),
      -webkit-backdrop-filter 0.44s cubic-bezier(.32,.72,0,1),
      border-color 0.44s cubic-bezier(.32,.72,0,1),
      left 0.44s cubic-bezier(.32,.72,0,1),
      right 0.44s cubic-bezier(.32,.72,0,1),
      bottom 0.44s cubic-bezier(.32,.72,0,1),
      border-radius 0.44s cubic-bezier(.32,.72,0,1),
      padding 0.44s cubic-bezier(.32,.72,0,1),
      height 0.44s cubic-bezier(.32,.72,0,1);
  }
  .cd-checkout-sheet.is-open {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 24px 92px 24px;
    border-radius: 24px 24px 0 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
  }
  .cd-checkout-sheet .cd-checkout-header,
  .cd-checkout-sheet .cd-checkout-body {
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .cd-checkout-sheet.is-open .cd-checkout-header,
  .cd-checkout-sheet.is-open .cd-checkout-body {
    opacity: 1;
    transition: opacity 0.22s ease 0.18s;
  }
  .cd-checkout-header {
    position: relative;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
  }
  .cd-checkout-title {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: #020203;
    white-space: nowrap;
  }
  .cd-checkout-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
  }
  .cd-checkout-close:active {
    background: #f4f4f6;
  }
  .cd-checkout-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
  }
  .cd-checkout-info {
    display: flex;
    flex-direction: column;
  }
  .cd-checkout-class-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #020203;
  }
  .cd-checkout-time {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #020203;
  }
  .cd-checkout-instructor {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4f5159;
  }
  .cd-checkout-venue {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-cancellation {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
  }
  .cd-checkout-cancellation-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-cancellation-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #4f5159;
  }
  .cd-checkout-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cd-checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4f5159;
  }
  .cd-checkout-line--total {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cd-checkout-payment-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #020203;
  }
  .cd-checkout-payment-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #020203;
  }
  .cd-checkout-applepay-mark {
    display: inline-flex;
    width: 32px;
    height: 20px;
  }
  .cd-checkout-applepay-mark svg {
    width: 100%;
    height: 100%;
  }
  .cd-checkout-cta {
    /* Absolute-positioned so the button's device-relative position stays
       fixed during the morph regardless of the flex flow above it. Without
       this, when the sheet is at closed (130px) height its flex body can't
       shrink enough and the CTA overflows ~30px past the sheet bottom,
       causing the visible "bounce down" on open/close. */
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: #e10e0e;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    cursor: pointer;
    transition:
      left 0.44s cubic-bezier(.32,.72,0,1),
      right 0.44s cubic-bezier(.32,.72,0,1),
      bottom 0.44s cubic-bezier(.32,.72,0,1);
  }
  .cd-checkout-sheet.is-open .cd-checkout-cta {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  .cd-checkout-cta:active {
    background: #c00b0b;
  }
  /* Hide original booking card while the sheet replaces it visually. */
  .cd-booking-bar.is-under-checkout {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }