html, body { overflow-x: auto; }
.ft-modal-overlay { opacity: 0; transition: opacity 220ms ease; }
.ft-modal-overlay.ft-open { opacity: 1; }
.ft-modal-panel { transform: translateY(8px) scale(0.98); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; will-change: transform, opacity; }
.ft-modal-overlay.ft-open .ft-modal-panel { transform: translateY(0) scale(1); opacity: 1; }
img { max-width: 100%; height: auto; display: block; }
.slide-menu { transform: translateX(-100%); transition: transform 0.35s ease; }
.slide-menu.open { transform: translateX(0); }
/* Active nav link (.nav-active) now defined once in base.html */
/* #mainPage: uses the sticky header from base.html. It was position:fixed here,
   which laid the header over the top of the page and needed per-device margins
   (mt-16, mt-14 on mobile user agents) to push the content clear of it. */
[x-cloak] { display: none !important; }
/* Thin theme scrollbar for the panels that scroll inside the page (About,
   Training Forte, reviews). The reviews list already carried this class, with
   nothing defining it. Browsers that support scrollbar-color use the first
   rule and ignore the ::-webkit-scrollbar ones. */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: #9fd4ef transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #9fd4ef; border-radius: 999px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--tr-blue, #126792); }