/* ==========================================================================
   us tennis live — mobile viewport stylesheet
   File  : css/mobile-62fbd1-viewport.css
   Prefix: framebd186-
   Canvas: 320–430px phone-first, centered on wide screens
   Voice : charcoal tool-kit, humanist headings, near-square corners,
           outlined tile cards, lead-in section rhythm, CTA-only feedback
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (all variables share the framebd186- prefix)
   -------------------------------------------------------------------------- */
:root {
  --framebd186-ink:        #262626;   /* base canvas (palette dark)  */
  --framebd186-ink-deep:   #1e1e1e;   /* fixed bars, route panel     */
  --framebd186-ink-raise:  #2d2d2d;   /* raised blocks, tiles        */
  --framebd186-ink-panel:  #232323;   /* extended footer band        */
  --framebd186-steel:      #696969;   /* palette light: rules, marks */
  --framebd186-steel-soft: #9b9b9b;   /* secondary labels            */
  --framebd186-mist:       #cfcfcf;   /* body text                   */
  --framebd186-paper:      #f1f1f1;   /* headings, active states     */
  --framebd186-line:       #4a4a4a;   /* primary hairline            */
  --framebd186-line-soft:  #3a3a3a;   /* divider hairline            */
  --framebd186-glow:       rgba(235, 235, 235, 0.42);
  --framebd186-font-head:  Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --framebd186-font-body:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base + reset
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #161616;
  color: var(--framebd186-mist);
  font-family: var(--framebd186-font-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: #d8d8d8; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--framebd186-paper);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--framebd186-font-head);
  font-weight: 600;
  color: var(--framebd186-paper);
  margin: 0;
  line-height: 1.28;
  overflow-wrap: break-word;
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   3. Phone canvas shell
   -------------------------------------------------------------------------- */
.framebd186-canvas {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--framebd186-ink);
  overflow-x: hidden;
}

/* Wide screens keep the same phone canvas, just separated from the void */
@media (min-width: 430px) {
  .framebd186-canvas {
    box-shadow: 0 0 0 1px var(--framebd186-line-soft), 0 0 36px rgba(0, 0, 0, 0.55);
  }
}

.framebd186-main {
  padding-top: 64px;      /* clears the fixed functional header */
  padding-bottom: 96px;   /* clears the layered dock             */
}

.framebd186-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Functional header (edge-aligned: brand hard left, actions hard right)
   -------------------------------------------------------------------------- */
.framebd186-topbar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 80;
  background: rgba(30, 30, 30, 0.98);
  border-bottom: 1px solid var(--framebd186-line-soft);
}

.framebd186-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 8px 12px;
}

/* Brand zone: real logo image + name, nothing else */
.framebd186-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-decoration: none;
}

.framebd186-brand-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--framebd186-line);
  border-radius: 2px;
  object-fit: cover;
}

.framebd186-brand-name {
  font-family: var(--framebd186-font-head);
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--framebd186-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action zone */
.framebd186-topacts {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.framebd186-register {
  min-height: 44px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #1c1c1c;
  background: var(--framebd186-paper);
  border: 1px solid var(--framebd186-paper);
  border-radius: 2px;
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}

.framebd186-login {
  min-height: 44px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--framebd186-paper);
  background: transparent;
  border: 1px solid var(--framebd186-steel);
  border-radius: 2px;
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}

.framebd186-register:active,
.framebd186-login:active {
  box-shadow: 0 0 12px var(--framebd186-glow);
}

.framebd186-menubtn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--framebd186-mist);
  background: transparent;
  border: 1px solid var(--framebd186-steel);
  border-radius: 2px;
  cursor: pointer;
}

.framebd186-menubtn-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}

.framebd186-menubtn-bars i {
  display: block;
  width: 14px; height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   5. Compact route panel (drops down from the header)
   -------------------------------------------------------------------------- */
.framebd186-routes {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--framebd186-ink-deep);
  border-bottom: 1px solid var(--framebd186-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.24s ease, opacity 0.24s ease;
}

.framebd186-routes.framebd186-open {
  max-height: 520px;
  opacity: 1;
  visibility: visible;
}

.framebd186-route {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--framebd186-mist);
  text-decoration: none;
  border-top: 1px solid var(--framebd186-line-soft);
  border-left: 1px solid var(--framebd186-line-soft);
}

.framebd186-route:nth-child(-n+2) { border-top: 0; }
.framebd186-route:nth-child(odd)  { border-left: 0; }

.framebd186-route span {
  font-size: 10px;
  color: var(--framebd186-steel-soft);
  margin-left: auto;
  padding-left: 6px;
  white-space: nowrap;
}

.framebd186-route.framebd186-here {
  color: var(--framebd186-paper);
  background: var(--framebd186-ink-raise);
  box-shadow: inset 2px 0 0 var(--framebd186-paper);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.framebd186-hero {
  padding: 22px 14px 18px;
}

.framebd186-hero-eyebrow {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--framebd186-steel-soft);
  margin-bottom: 8px;
}

.framebd186-hero h1 {
  font-size: clamp(24px, 7.2vw, 30px);
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.framebd186-hero-lead {
  font-size: 14px;
  color: #b3b3b3;
  margin-bottom: 16px;
}

.framebd186-ctarow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Compact icon-text CTA buttons */
.framebd186-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.18s ease;
}

.framebd186-cta svg { flex: 0 0 auto; }

.framebd186-cta-solid {
  color: #1c1c1c;
  background: var(--framebd186-paper);
  border: 1px solid var(--framebd186-paper);
}

.framebd186-cta-ghost {
  color: var(--framebd186-paper);
  background: transparent;
  border: 1px solid var(--framebd186-steel);
  font-weight: 600;
}

.framebd186-cta:active { box-shadow: 0 0 14px var(--framebd186-glow); }

/* --------------------------------------------------------------------------
   7. Promo stage (3-slide carousel)
   -------------------------------------------------------------------------- */
.framebd186-stage {
  margin: 4px 14px 0;
  position: relative;
  border: 1px solid var(--framebd186-line);
  border-radius: 3px;
  background: var(--framebd186-ink-deep);
  overflow: hidden;
}

.framebd186-track {
  display: flex;
  transition: transform 0.38s ease;
}

.framebd186-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  text-align: left;
  cursor: pointer;
}

.framebd186-slide img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.framebd186-slide-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 12px 9px;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.94) 78%);
  color: var(--framebd186-paper);
  font-size: 13px;
  line-height: 1.35;
}

.framebd186-slide-cap b { display: block; font-size: 13.5px; }
.framebd186-slide-cap small { color: #c2c2c2; font-size: 11px; }

.framebd186-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
}

.framebd186-dot {
  min-width: 44px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.framebd186-dot i {
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--framebd186-steel);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.framebd186-dot.framebd186-on i {
  background: var(--framebd186-paper);
  box-shadow: 0 0 7px var(--framebd186-glow);
}

/* --------------------------------------------------------------------------
   8. Section shell (lead-in rhythm: heading, lead paragraph, then detail)
   -------------------------------------------------------------------------- */
.framebd186-sec {
  padding: 24px 14px;
  border-top: 1px solid var(--framebd186-line-soft);
  scroll-margin-top: 70px;
}

.framebd186-sec h2 {
  font-size: clamp(18px, 5.6vw, 22px);
  margin-bottom: 9px;
}

.framebd186-lead {
  font-size: 14px;
  color: #ababab;
  margin: 0 0 15px;
}

.framebd186-sec p { font-size: 14px; }

.framebd186-note {
  font-size: 11px;
  color: var(--framebd186-steel-soft);
}

/* --------------------------------------------------------------------------
   9. Lobby: category blocks + outlined tile grid
   -------------------------------------------------------------------------- */
.framebd186-cat { margin-bottom: 22px; }
.framebd186-cat:last-child { margin-bottom: 0; }

.framebd186-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.framebd186-cat-head h3 { font-size: 15.5px; }

.framebd186-count {
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--framebd186-steel-soft);
  border: 1px solid var(--framebd186-line);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
  margin-left: auto;
}

.framebd186-cat-line {
  font-size: 11.5px;
  color: var(--framebd186-steel-soft);
  margin: 0 0 10px;
}

.framebd186-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Slightly wider phones get a fifth column */
@media (min-width: 400px) {
  .framebd186-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Outlined tile card */
.framebd186-tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 5px 7px;
  background: var(--framebd186-ink-raise);
  border: 1px solid var(--framebd186-line-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.framebd186-tile:active {
  border-color: var(--framebd186-paper);
  box-shadow: 0 0 10px var(--framebd186-glow);
}

.framebd186-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  background: #202020;
}

.framebd186-tile-name {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--framebd186-mist);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  min-height: 27px;
}

/* --------------------------------------------------------------------------
   10. Category profiles (left-ruled rows, no card chrome)
   -------------------------------------------------------------------------- */
.framebd186-profile {
  border-left: 2px solid var(--framebd186-steel);
  padding: 1px 0 1px 11px;
  margin-bottom: 15px;
}

.framebd186-profile:last-child { margin-bottom: 0; }

.framebd186-profile h3 {
  font-size: 14.5px;
  margin-bottom: 4px;
}

.framebd186-profile p {
  font-size: 13px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Steps (numbered square chips)
   -------------------------------------------------------------------------- */
.framebd186-steps {
  list-style: none;
  counter-reset: framebd186-step;
}

.framebd186-steps li {
  counter-increment: framebd186-step;
  position: relative;
  padding: 0 0 13px 36px;
  font-size: 13.5px;
}

.framebd186-steps li:last-child { padding-bottom: 0; }

.framebd186-steps li::before {
  content: counter(framebd186-step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--framebd186-font-head);
  font-size: 11px;
  color: var(--framebd186-paper);
  border: 1px solid var(--framebd186-line);
  border-radius: 2px;
  background: var(--framebd186-ink-deep);
}

.framebd186-steps b { color: var(--framebd186-paper); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Fact strip
   -------------------------------------------------------------------------- */
.framebd186-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 14px;
}

.framebd186-fact {
  border: 1px solid var(--framebd186-line-soft);
  border-radius: 2px;
  padding: 9px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #b8b8b8;
  background: var(--framebd186-ink-raise);
}

.framebd186-fact b {
  display: block;
  font-family: var(--framebd186-font-head);
  font-size: 13px;
  color: var(--framebd186-paper);
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   13. Scenario Q&A block
   -------------------------------------------------------------------------- */
.framebd186-qa {
  border: 1px solid var(--framebd186-line);
  border-radius: 3px;
  background: var(--framebd186-ink-raise);
  padding: 14px 13px;
}

.framebd186-qa h3 {
  font-size: 15px;
  margin-bottom: 9px;
}

.framebd186-qa p { font-size: 13.5px; }

.framebd186-followups {
  margin: 12px 0 0;
  border-top: 1px dashed var(--framebd186-line);
  padding-top: 12px;
}

.framebd186-followups dt {
  font-size: 12.5px;
  color: var(--framebd186-paper);
  font-weight: 600;
  margin-bottom: 2px;
}

.framebd186-followups dd {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #b5b5b5;
}

.framebd186-followups dd:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Decision checklist (empty square markers)
   -------------------------------------------------------------------------- */
.framebd186-check {
  list-style: none;
}

.framebd186-check li {
  position: relative;
  padding: 0 0 11px 28px;
  font-size: 13.5px;
}

.framebd186-check li:last-child { padding-bottom: 0; }

.framebd186-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 13px; height: 13px;
  border: 1.5px solid var(--framebd186-steel);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   15. Extended footer band: promotions > brand > directory > disclaimer
   -------------------------------------------------------------------------- */
.framebd186-xfoot {
  background: var(--framebd186-ink-panel);
  border-top: 1px solid var(--framebd186-line);
  padding: 24px 14px 20px;
}

.framebd186-xfoot h2 {
  font-size: clamp(17px, 5.2vw, 20px);
  margin-bottom: 8px;
}

.framebd186-xlead { margin-bottom: 18px; }

.framebd186-xlabel {
  font-family: var(--framebd186-font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--framebd186-steel-soft);
  margin: 0 0 9px;
}

/* Sectioned list: one slim action row per promo */
.framebd186-promos {
  display: grid;
  gap: 7px;
  margin-bottom: 20px;
}

.framebd186-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--framebd186-paper);
  background: var(--framebd186-ink-raise);
  border: 1px solid var(--framebd186-line-soft);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.framebd186-promo:active {
  border-color: var(--framebd186-paper);
  box-shadow: 0 0 12px var(--framebd186-glow);
}

.framebd186-promo b { font-weight: 600; }

.framebd186-promo span {
  margin-left: auto;
  font-size: 11px;
  color: var(--framebd186-steel-soft);
  white-space: nowrap;
}

.framebd186-promo::after {
  content: "›";
  font-size: 16px;
  line-height: 1;
  color: var(--framebd186-steel);
}

.framebd186-xbrand {
  font-size: 12.5px;
  color: #adadad;
  border-left: 2px solid var(--framebd186-steel);
  padding-left: 11px;
  margin-bottom: 20px;
}

/* Page directory */
.framebd186-dir {
  display: grid;
  gap: 2px;
  margin-bottom: 18px;
}

.framebd186-dir a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46px;
  padding: 7px 2px;
  text-decoration: none;
  border-bottom: 1px dashed var(--framebd186-line);
}

.framebd186-dir a:last-child { border-bottom: 0; }

.framebd186-dir b {
  font-size: 13px;
  font-weight: 600;
  color: var(--framebd186-paper);
}

.framebd186-dir span {
  font-size: 11px;
  color: var(--framebd186-steel-soft);
}

.framebd186-disclaim {
  font-size: 11px;
  line-height: 1.55;
  color: #8d8d8d;
  border-top: 1px solid var(--framebd186-line-soft);
  padding-top: 12px;
}

/* --------------------------------------------------------------------------
   16. Common footer (copyright only) + layered dock
   -------------------------------------------------------------------------- */
.framebd186-foot {
  padding: 16px 14px 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #8f8f8f;
  border-top: 1px solid var(--framebd186-line-soft);
}

.framebd186-foot b { color: #b5b5b5; font-weight: 600; }

/* Layered bottom bar: hairline top, translucent body, icon+label rows */
.framebd186-dock {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 90;
  background: rgba(30, 30, 30, 0.97);
  border-top: 1px solid var(--framebd186-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.framebd186-dock::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    var(--framebd186-line-soft) 0%,
    #616161 50%,
    var(--framebd186-line-soft) 100%);
}

.framebd186-dock-row {
  display: flex;
  align-items: stretch;
}

.framebd186-dock-item {
  flex: 1 1 20%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 7px;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--framebd186-steel-soft);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.framebd186-dock-item svg { display: block; }

/* Active role: color switch + restrained glow under the mark */
.framebd186-dock-item.framebd186-on { color: var(--framebd186-paper); }

.framebd186-dock-item.framebd186-on::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 16px; height: 2px;
  border-radius: 1px;
  background: var(--framebd186-paper);
  box-shadow: 0 0 8px var(--framebd186-glow);
}

.framebd186-dock-item:active { color: var(--framebd186-paper); }

/* --------------------------------------------------------------------------
   17. Help-page comparison rails + compact reading controls
   -------------------------------------------------------------------------- */
.framebd186-compare {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.framebd186-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--framebd186-line-soft);
}

.framebd186-compare-row:last-child { border-bottom: 0; }

.framebd186-compare-row b {
  color: var(--framebd186-paper);
  font-family: var(--framebd186-font-head);
  font-size: 13px;
  line-height: 1.35;
}

.framebd186-compare-row span {
  color: #b8b8b8;
  font-size: 12.5px;
  line-height: 1.5;
}

.framebd186-actionrail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.framebd186-actionrail .framebd186-cta {
  flex: 1 1 140px;
}

.framebd186-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 7px;
  border-left: 2px solid var(--framebd186-paper);
  color: var(--framebd186-steel-soft);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   18. Motion budget: only key CTAs react; respect reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 350px) {
  .framebd186-toprow { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .framebd186-brand { gap: 6px; }
  .framebd186-brand-logo { width: 32px; height: 32px; }
  .framebd186-brand-name { font-size: 13px; }
  .framebd186-topacts { gap: 3px; }
  .framebd186-register,
  .framebd186-login { padding-left: 7px; padding-right: 7px; font-size: 10px; }
  .framebd186-menubtn { min-width: 40px; padding-left: 4px; padding-right: 4px; font-size: 9px; }
  .framebd186-topbar + .framebd186-main { padding-top: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .framebd186-track,
  .framebd186-routes,
  .framebd186-register,
  .framebd186-login,
  .framebd186-cta,
  .framebd186-tile,
  .framebd186-promo,
  .framebd186-dot i {
    transition: none;
  }
}