/* Gut Feeling responsive launch refinements — only small screens */
[hidden] { display:none !important; }
.mobile-nav-backdrop { display:none; }
@media (max-width: 800px) {
  /* Align the sidebar and mobile-menu breakpoints: tablet widths included. */
  .sidebar { width:min(280px,88vw); transform:translateX(-106%); transition:transform .25s ease; height:100dvh; overflow-y:auto; overscroll-behavior:contain; box-shadow:10px 0 35px #102c2515; z-index:11; }
  .sidebar.open { transform:translateX(0); }
  .mobile-menu { display:flex !important; flex-shrink:0; align-items:center; justify-content:center; width:42px; height:42px; font-size:22px; border:0; border-radius:12px; background:#d9e9dcbb; color:#0b4c3a !important; cursor:pointer; position:relative; z-index:2; }
  .main { margin-left:0; min-width:0; max-width:100%; }
  .topbar { gap:8px; }
  .mobile-nav-backdrop:not([hidden]) {display:block; position:fixed; inset:0; border:0; background:rgba(7,34,25,.55); width:100%; height:100dvh; padding:0; z-index:10; cursor:pointer;}
  body.gf-nav-open {overflow:hidden;}
  .top-actions { margin-left:auto; flex-shrink:0; }
  .hero-atmosphere, .hero, .hero-art, .learning-surface { max-width:100%; }
  .gf-material-viewer iframe {max-width:100%;}
  .gf-course-locked-body, .gf-assessment-panel, .gf-contact-main, .gf-profile-card {min-width:0;overflow-wrap:anywhere;}
  .admin-tabs { overflow-x:auto; overscroll-behavior-inline:contain; max-width:100%; scrollbar-width:thin; }
  .admin-tab { flex-shrink:0; white-space:nowrap; }
  .gf-access-admin, .gf-material-editor, .gf-material-panel {min-width:0;max-width:100%;}
}
@media (max-width: 520px) {
  /* Keep a visible sign-in action; older CSS hid it on phones. */
  .top-actions .text-button#auth-open { display:inline-flex !important; align-items:center; justify-content:center; padding:8px 3px; min-height:42px; color:#f5fff8 !important; font-weight:700; }
  .top-actions .small-primary { min-height:42px; max-width:135px; white-space:nowrap; }
  .breadcrumb { display:none; }
  .topbar { min-height:66px; padding-left:12px !important; padding-right:13px !important; }
  .main:has(#page-home.active) .hero h1 {font-size:clamp(31px,9vw,40px); line-height:1.15; overflow-wrap:break-word;}
  .main:has(#page-home.active) .hero-art {opacity:.22;}
  .hero-copy {max-width:100%;}
  .content-grid,.right-column,.right-column .topic-grid,.gf-account-grid,.gf-contact-grid {min-width:0;}
  .right-column .topic-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
  .topic-card {min-width:0;overflow-wrap:anywhere;}
  .top-actions .gf-account-top { max-width:142px; padding:5px 9px; }
  .gf-account-top #gf-top-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .main footer, footer {gap:12px;flex-wrap:wrap;}
  .modal-backdrop {padding:10px;}
  .auth-modal {max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain;padding:22px 18px;}
  input, select, textarea {max-width:100%;}
  .gf-material-buttons > button {min-height:44px;}
}
@media (max-width: 360px) {
  .top-actions {gap:7px;}
  .top-actions .small-primary {padding:8px 9px !important;font-size:10px;}
  .top-actions .text-button#auth-open {font-size:11px;}
  .main:has(#page-home.active) .hero h1 {font-size:31px;}
  .page-intro h1 {font-size:27px;}
}
/* Respect the user's always-on animation style without adding a motion toggle. */