@media (max-width: 480px) {
  /* extra-small phone polishing */
}

/* Search engines. Google mobile-first guidance says the mobile version should contain equivalent primary content to desktop, and that mobile content is what is used for indexing. They also state design can be different on mobile, including using accordions or tabs, as long as content equivalent. Moving sections lower keeps the content present. */

/* multi @media... GRID OF FEATURED BEGIN */
@media (max-width: 900px) { .tcs-feature-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tcs-feature-links { grid-template-columns: 1fr; } }
/* GRID OF FEATURED END */

/* phone + small tablet styles */
@media (max-width: 768px) {
* { box-sizing: border-box; }
body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }  
.desktop-float-menu { display: none !important; }

/* MOBILE FLOAT MENU / BACK TO TOP BEGIN */
  .mobile-float-menu {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 20000;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #353839;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  }

  .mobile-float-menu.show {
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* MOBILE FLOAT MENU / BACK TO TOP END */


.low-mobile { order: 20; }
/* Simple version; one rule to put textuals low; include class into <section>. <section class="low-mobile content-section"> gets pushed lower on mobile.
   2nd the actual order should remain same on page if moving 2-4 areas lower.
   3rd only works when parent is display:flex or display:grid. So make .page-shell a vertical flex container on mobile.
*/
  .page-shell {
    display: flex;
    flex-direction: column;
  }

.header .container {
    min-height: 64px;
    padding: 0 14px;
    position: relative; }
.logo-image { max-height: 42px; }
.hamburger-menu {
    display: inline-flex;
    background-color: #20202b !important;
    border: 1px solid #3d3d50 !important;
    color: #f5f5ff; }
.hamburger-menu .hamburger-icon span {
    background-color: #ffffff !important; }
.nav-links {
    display: none;
    position: absolute;
    top: 100%; /* calc(100% + 8px) */
    right: 0px;
    left: 0px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: #12121a;
    border: 1px solid #343445;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }
.nav-links.is-open { display: flex; }
.nav-links .nav-button {
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0;
    background-color: #20202b;
    color: #f5f5ff;
    border-color: #3d3d50; }
    
.hero-section h1 {
    margin: 0 0 10px;
    padding: 0 0 4px 0;
    font-size: clamp(30px, 9vw, 44px);
    /* clamp: never smaller than 30px; try to scale with 9% of screen width; never bigger than 44px.
    For mobile, clamp() is very useful because text can grow or shrink naturally without needing tons of separate breakpoints. */ }
    
p { font-size: 18px; }

/* GRID OF TOP BOXES BEGIN */
.quick-box-grid { grid-template-columns: 1fr; }
/* GRID OF TOP BOXES END */

.symbol-category {
  padding: 14px;
}

.category-title {
  font-size: clamp(26px, 8vw, 34px);
}

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

.symbol-grid .copy-symbol {
  min-height: 58px;
  font-size: 30px;
}

}

/* END... @media (max-width: 768px) */

/* MOBILE FLOAT MENU / BACK TO TOP BEGIN */

/* Show/style only on mobile */
@media (max-width: 768px) {
  .mobile-float-menu {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 20000;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #353839;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  }

  .mobile-float-menu.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Optional: hide desktop arrow on mobile */
  .desktop-float-menu {
    display: none !important;
  }
}

/* MOBILE FLOAT MENU / BACK TO TOP END */

/* BONUS IF WANTED OR LATER NEED?

  .page-shell {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .hero-section p,
  .content-section p {
    font-size: 18px;
    line-height: 1.55;
  }

  .content-section h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.1;
  }

  .quick-box-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 12px 0;
  }

  .quick-box-grid a {
    min-height: 54px;
    font-size: 18px;
    border-radius: 16px;
  }
}

*/