/* GUT FEELING — FINAL MOBILE/TABLET SYSTEM
   All responsive overrides live here (after other stylesheets).
   Desktop hero and all course/access logic remain unchanged.
   Phones: legible text first; living microbiome below the call to action.
*/
html, body { max-width:100%; }
/* Native controls retain a readable sans-serif fallback if web fonts fail. */
button, input, select, textarea {font-family:'DM Sans',Arial,sans-serif !important;}
@media (max-width:1150px) {
  .sidebar {
    width:min(292px,87vw);
    height:100dvh;
    min-height:0;
    transform:translateX(-106%);
    transition:transform .25s ease;
    z-index:15;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:12px 0 34px rgba(4,44,35,.14);
  }
  .sidebar.open {transform:translateX(0);}
  .mobile-menu {
    display:inline-flex !important;
    flex:0 0 auto;align-items:center;justify-content:center;
    width:48px;height:48px;min-width:48px;border:0;
    border-radius:15px;background:rgba(227,241,229,.90) !important;
    color:#064c37 !important;font-size:26px;cursor:pointer;
    box-shadow:0 3px 12px rgba(11,47,33,.08);
  }
  .main {margin-left:0;min-width:0;max-width:100%;}
  .topbar {gap:12px;}
  .mobile-nav-backdrop:not([hidden]){
    display:block;position:fixed;inset:0;background:rgba(6,29,22,.57);
    width:100%;height:100dvh;z-index:14;padding:0;border:0;
  }
  body.gf-nav-open{overflow:hidden;}
  .admin-tabs{display:flex;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;}
  .admin-tab{flex-shrink:0;white-space:nowrap;}
}
@media (max-width:800px) {
  .main {padding:0 18px;}
  .topbar{margin:0 -18px;padding:0 18px;height:78px;min-height:78px;}
  .top-actions{margin-left:auto;gap:12px;max-width:calc(100% - 62px);}
  .main:has(#page-home.active) .top-actions .text-button#auth-open{
    display:inline-flex !important;align-items:center;justify-content:center;
    min-height:44px;padding:8px 5px;font-size:14px;
    color:#104636 !important;font-weight:750;
  }
  .main:has(#page-home.active) .top-actions .small-primary{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;padding:10px 17px !important;min-height:46px;
    background:#0b513d;color:#f9fff9;border:1px solid #388565;
    border-radius:999px;
  }
  .top-actions .gf-account-top{min-height:44px;max-width:min(52vw,270px);}
  .top-actions .gf-account-top #gf-top-name{display:inline-block;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .top-actions .gf-logout-top{display:none;}
  .main:has(#page-home.active) > .hero-atmosphere{
    height:var(--gf-scene-height,820px) !important;
    min-height:0 !important;
    background:linear-gradient(158deg,#f1f5ed 0%,#e7f1e5 25%,#c5dfcb 49%,#80b093 72%,#205b46 100%) !important;
    overflow:hidden;
  }
  .main:has(#page-home.active) > .hero-atmosphere::before{
    background:radial-gradient(ellipse 75% 45% at 4% 6%,rgba(255,255,247,.9),transparent 95%),
      radial-gradient(ellipse 80% 63% at 100% 91%,rgba(3,48,35,.40),transparent 91%);
    opacity:1;
  }
  .main:has(#page-home.active) .hero-atmosphere .atmosphere-haze{
    width:770px;height:610px;right:-310px;top:26%;opacity:.13;
    filter:blur(31px) saturate(.86);
  }
  .main:has(#page-home.active) .atmosphere-drifters{opacity:.22;}
  .main:has(#page-home.active) .gf-final-ambient{opacity:.53;}
  .main:has(#page-home.active) .gf-photo-drift{filter:blur(calc(var(--blur,8px) + 6px)) saturate(.85);}
  .main:has(#page-home.active) .hero{
    display:block!important;position:relative;isolation:isolate;
    width:auto!important;max-width:none!important;margin:0 -18px !important;
    min-height:0 !important;
    padding:38px 25px 270px !important;
    overflow:hidden!important;background:transparent!important;
  }
  .main:has(#page-home.active) .hero-copy{
    display:block;position:relative;z-index:5;flex:none;
    width:100%;max-width:670px;min-width:0;
  }
  .main:has(#page-home.active) .hero .eyebrow{
    font-size:12px;letter-spacing:.13em;line-height:1.5;
    color:#2b694e;display:flex;align-items:center;gap:8px;
    max-width:100%;white-space:normal;
  }
  .main:has(#page-home.active) .hero h1{
    max-width:100%;margin:21px 0 20px;
    font-size:clamp(40px,6.1vw,51px);line-height:1.14;
    letter-spacing:-.045em;overflow-wrap:normal;word-break:normal;
    text-wrap:balance;color:#092f26;
  }
  .main:has(#page-home.active) .hero h1 em{
    display:inline-block;color:#14553d;-webkit-text-fill-color:#14553d;
  }
  .main:has(#page-home.active) .hero-copy>p{
    font-size:18px;line-height:1.65;margin:0 0 26px;
    max-width:590px;color:#244b3a;
  }
  .main:has(#page-home.active) .hero .primary-button{
    display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
    max-width:100%;min-height:58px;min-width:0;
    padding:15px 23px;font-size:16px;font-weight:750;
    line-height:1.35;border-radius:999px;
    background:#06513b;color:#fff;border:1px solid #408b64;
  }
  .main:has(#page-home.active) .hero-art{
    position:absolute!important;top:auto!important;bottom:-12px!important;
    right:-32px!important;left:auto!important;
    width:min(98vw,500px)!important;height:300px!important;
    max-width:none;min-width:0;margin:0!important;
    opacity:.85!important;z-index:2;filter:none;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 76%,rgba(0,0,0,.56) 93%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 76%,rgba(0,0,0,.56) 93%,transparent 100%);
  }
  .main:has(#page-home.active) .hero-art .microbiome-illustration{
    width:100%;height:100%;inset:0;opacity:1;
    filter:saturate(1.07) contrast(1.025);
  }
  .main:has(#page-home.active) .hero-art .art-caption{
    display:block;bottom:9%;left:auto;right:18%;font-size:10px;letter-spacing:.12em;
  }
  .main:has(#page-home.active) .hero-art .orbit{opacity:.17;}
  .main:has(#page-home.active) .learning-surface{
    width:auto!important;max-width:none!important;
    margin:-15px -18px 0!important;
    padding:32px 24px 54px!important;
    border-radius:30px 30px 0 0!important;
    border:0!important;box-shadow:none!important;
    position:relative;z-index:7;background:#fbfdf9;
  }
  .learning-surface .welcome-row{margin-bottom:25px;}
  .learning-surface .welcome-row h2{font-size:clamp(23px,3.8vw,29px);line-height:1.33;}
  .learning-surface .section-kicker{font-size:12px;line-height:1.45;letter-spacing:.15em;}
  .learning-surface .progress-summary strong{font-size:13px;}
  .learning-surface .progress-summary small{font-size:12px;}
  .content-grid{grid-template-columns:minmax(0,1fr)!important;gap:24px;}
  .right-column{display:flex;flex-direction:column;}
  .right-column .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .right-column .topic-card strong{font-size:13px;}
  .right-column .topic-card small{font-size:11px;}
  .path-info p,.daily-card p,.disclaimer-card p{font-size:13px;line-height:1.6;}
  .path-info h3{font-size:19px;}
  .section-heading h3{font-size:19px;}
  .main footer{flex-wrap:wrap;gap:10px;font-size:12px;}
  .gf-contact-grid,.gf-account-grid{grid-template-columns:minmax(0,1fr);}
  .gf-profile-card,.gf-contact-main{min-width:0;overflow-wrap:anywhere;}
  .auth-modal{max-height:calc(100dvh - 24px);overflow-y:auto;padding:24px 20px;overscroll-behavior:contain;}
  .lesson-article,.quiz-panel,.gf-course-locked-body,.gf-assessment-panel{min-width:0;max-width:100%;overflow-wrap:anywhere;}
  .gf-material-viewer iframe{width:100%;max-width:100%;}
  .gf-access-admin,.gf-material-editor,.gf-material-panel{min-width:0;max-width:100%;}
}
@media (max-width:520px) {
  .main {padding:0 16px;}
  .topbar{height:76px;min-height:76px;margin:0 -16px;padding:0 17px!important;gap:7px;}
  .mobile-menu{width:46px;height:46px;min-width:46px;}
  .top-actions{gap:11px;max-width:calc(100% - 54px);}
  .main:has(#page-home.active) .top-actions .text-button#auth-open{
    font-size:14px !important;min-height:44px;
  }
  .main:has(#page-home.active) .top-actions .small-primary{
    font-size:13px !important;min-height:46px;
    padding:10px 15px!important;max-width:170px;
  }
  .top-actions .gf-account-top{max-width:calc(100vw - 105px);padding:6px 10px;}
  .top-actions .gf-account-top #gf-top-name{display:inline-block;max-width:125px;}
  .main:has(#page-home.active) .hero{
    margin:0 -16px!important;padding:37px 23px 264px!important;
  }
  .main:has(#page-home.active) .hero .eyebrow{
    font-size:11.5px!important;letter-spacing:.12em;
  }
  .main:has(#page-home.active) .hero h1{
    font-size:clamp(37px,9.5vw,43px)!important;
    line-height:1.12!important;letter-spacing:-.048em!important;
    margin:20px 0 19px!important;
    text-wrap:balance;
  }
  .main:has(#page-home.active) .hero-copy>p{
    font-size:17px!important;line-height:1.62!important;
    max-width:100%;margin-bottom:25px;
  }
  .main:has(#page-home.active) .hero .primary-button{
    min-height:59px;max-width:100%;font-size:15.5px!important;
    padding:15px 23px!important;
  }
  .main:has(#page-home.active) .hero-art{
    width:min(108vw,460px)!important;height:292px!important;
    right:-45px!important;bottom:-18px!important;
  }
  .main:has(#page-home.active) .atmosphere-drifters{opacity:.17;}
  .main:has(#page-home.active) .gf-final-ambient{opacity:.42;}
  .main:has(#page-home.active) .learning-surface{
    margin:-15px -16px 0!important;padding:28px 21px 46px!important;
    border-radius:28px 28px 0 0!important;
  }
  .welcome-row h2{max-width:none!important;}
  .right-column .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px;}
  .right-column .topic-card{min-height:155px!important;padding:15px 13px!important;}
  .right-column .topic-card strong{font-size:13px!important;}
  .right-column .topic-card small{font-size:11px!important;}
  .path-card{grid-template-columns:1fr!important;}
  .path-visual{min-height:165px;}
  .path-info{padding:21px 18px;}
  .path-info h3{font-size:19px;}
  .section-heading .muted{font-size:12px;}
  .progress-summary{margin-top:17px;}
  .gf-profile-card,.gf-contact-main{padding:20px;}
  .gf-account-heading{gap:12px;}
  .gf-account-heading h2{font-size:21px;}
  .gf-profile-avatar{width:58px;height:58px;}
  .page-intro h1{font-size:28px;}
  .lesson-row{gap:9px;padding:12px;}
  .lesson-row button{min-height:42px;}
}
@media (max-width:360px) {
  .main:has(#page-home.active) .hero{padding:33px 19px 238px!important;}
  .main:has(#page-home.active) .hero h1{font-size:35px!important;}
  .main:has(#page-home.active) .hero-copy>p{font-size:16.5px!important;}
  .main:has(#page-home.active) .hero-art{height:264px!important;right:-50px!important;}
  .main:has(#page-home.active) .top-actions .small-primary{padding:9px 11px!important;font-size:12px!important;}
  .main:has(#page-home.active) .top-actions .text-button#auth-open{font-size:13px!important;}
  .main:has(#page-home.active) .learning-surface{padding-left:17px!important;padding-right:17px!important;}
}