/* ============================================================
   GR8MD · The 180 — Mobile-first layer (June 2026)
   Native-app feel for phones: bottom tab bar, bottom sheet,
   thumb-reachable CTAs, swipeable rows, add-to-home hint.
   Loaded AFTER each page's own styles, so it wins on phones.
   Everything layout-changing is gated to <=640px — desktop
   is untouched. Chrome is built by mobile.js; styled here.
   ============================================================ */

/* Base (hidden until phone): keeps desktop pristine */
.m-tabbar,.m-sheet,.m-sheet-back,.m-menu-btn,.m-a2hs,.m-pathseg{display:none;}

@media (max-width:640px){

  /* ---- Give content room for the tab bar ---- */
  body.m-has-tabbar{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important;}
  /* The old single sticky CTA is replaced by the tab bar's centre button */
  body.m-has-tabbar .sticky-cta{display:none !important;}
  body.has-sticky-cta:not(.m-has-tabbar){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));}

  /* ============================================================
     TOP BAR — strip to logo + theme + menu; the rest moves to
     the tab bar and the bottom sheet so the header stays calm.
     ============================================================ */
  .nav-inner{flex-wrap:nowrap !important;justify-content:space-between !important;gap:8px !important;
    padding:10px 14px calc(10px) !important;align-items:center !important;}
  .nav .nav-links{display:none !important;}
  .nav .seg{display:none !important;}              /* desktop path control → replaced by .m-pathseg */
  .nav-inner > .btn{display:none !important;}          /* CTA lives in tab bar */
  .nav-inner > .acct-btn{display:none !important;}     /* account lives in tab bar */
  .nav-inner > .spacer{display:none !important;}
  .nav-inner > #themeToggle{display:none !important;}  /* theme lives in the sheet */
  .nav-inner > .logo{margin-right:0 !important;flex:none;}

  /* The For him / For her switch — the brand's beating heart, kept front and centre */
  .m-pathseg{display:inline-flex !important;position:relative;margin:0 auto;flex:0 1 auto;min-width:0;
    background:var(--cell);border:1px solid var(--line);border-radius:999px;padding:3px;}
  .m-pathseg .m-thumb{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;border-radius:999px;
    background:var(--accent);z-index:0;box-shadow:0 2px 9px color-mix(in srgb,var(--accent) 50%,transparent);
    transition:transform .34s cubic-bezier(.2,.7,.2,1),width .34s cubic-bezier(.2,.7,.2,1),background .3s ease;}
  .m-pathseg button{position:relative;z-index:1;flex:none;font-family:var(--font);font-size:12px;font-weight:650;letter-spacing:.005em;
    border:0;background:none;color:var(--muted);padding:8px 13px;border-radius:999px;cursor:pointer;min-height:36px;
    display:inline-flex;align-items:center;gap:5px;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .26s ease;}
  .m-pathseg button svg{width:13px;height:13px;flex:none;}
  .m-pathseg button[aria-pressed="true"]{color:#fff;}
  :root[data-path="him"] .m-pathseg .m-thumb{background:var(--him);}
  :root[data-path="her"] .m-pathseg .m-thumb{background:var(--her);}
  :root[data-theme="light"][data-path="him"] .m-pathseg .m-thumb{background:var(--him-ink);}
  :root[data-theme="light"][data-path="her"] .m-pathseg .m-thumb{background:var(--her-ink);}

  .m-menu-btn{display:inline-flex !important;align-items:center;justify-content:center;flex:none;
    width:38px;height:38px;border-radius:50%;border:0;background:var(--cell);color:var(--fg);cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .2s ease,transform .15s ease;}
  .m-menu-btn:active{transform:scale(.92);}
  .m-menu-btn svg{width:19px;height:19px;}

  /* ============================================================
     BOTTOM TAB BAR — iOS-grade frosted bar, 5 destinations.
     Centre "Path" is a raised accent button: the always-in-reach
     conversion CTA, doubling as a tab.
     ============================================================ */
  .m-tabbar{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:flex-end;justify-content:space-around;gap:2px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--bg) 80%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
    border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
    box-shadow:0 -8px 30px rgba(0,0,0,.10);}
  :root[data-theme="dark"] .m-tabbar{box-shadow:0 -10px 34px rgba(0,0,0,.5);}

  .m-tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
    flex:1;min-width:0;padding:6px 2px 2px;color:var(--faint);text-decoration:none;position:relative;
    -webkit-tap-highlight-color:transparent;transition:color .2s ease,transform .15s ease;}
  .m-tab:active{transform:scale(.9);}
  .m-tab svg{width:23px;height:23px;flex:none;}
  .m-tab .m-tlab{font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.005em;line-height:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .m-tab[aria-current="page"]{color:var(--accent);}
  .m-tab[aria-current="page"]::before{content:'';position:absolute;top:0;width:5px;height:5px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent);}

  /* Centre — the raised Path button */
  .m-tab.m-center{flex:0 0 auto;justify-content:flex-start;margin:0 4px;}
  .m-tab.m-center .m-fab{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:#fff;margin-top:-26px;
    box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 50%,transparent),0 2px 6px rgba(0,0,0,.25);
    border:3px solid var(--bg);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;
    animation:mFabGlow 2.8s ease-in-out infinite;}
  .m-tab.m-center .m-fab svg{width:25px;height:25px;}
  .m-tab.m-center .m-tlab{margin-top:5px;color:var(--accent);font-weight:700;}
  .m-tab.m-center:active .m-fab{transform:translateY(-2px) scale(1.05);}
  .m-tab.m-center[aria-current="page"]::before{display:none;}
  @keyframes mFabGlow{0%,100%{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 38%,transparent),0 2px 6px rgba(0,0,0,.25);}
    50%{box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 62%,transparent),0 2px 6px rgba(0,0,0,.25);}}

  /* ============================================================
     BOTTOM SHEET — full nav + path/theme controls + legal.
     Opened by the top-bar menu button.
     ============================================================ */
  .m-sheet-back{display:block !important;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.42);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease;}
  .m-sheet-back.m-open{opacity:1;pointer-events:auto;}
  .m-sheet{display:block !important;position:fixed;left:0;right:0;bottom:0;z-index:71;
    background:var(--bg);border-radius:26px 26px 0 0;border-top:1px solid var(--line);
    padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -16px 50px rgba(0,0,0,.3);
    transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
    max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .m-sheet.m-open{transform:translateY(0);}
  .m-grip{width:38px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 16px;}
  .m-sheet h4{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);margin:18px 4px 9px;}
  .m-sheet h4:first-of-type{margin-top:4px;}
  .m-navlist{display:flex;flex-direction:column;gap:2px;}
  .m-navlist a{display:flex;align-items:center;gap:14px;font-family:var(--font);font-size:16.5px;font-weight:550;
    color:var(--fg);text-decoration:none;padding:13px 12px;border-radius:14px;min-height:50px;
    -webkit-tap-highlight-color:transparent;transition:background .15s ease;}
  .m-navlist a:active{background:var(--cell);}
  .m-navlist a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 12%,var(--cell));color:var(--accent);}
  .m-navlist a .m-ni{width:22px;height:22px;flex:none;color:var(--muted);}
  .m-navlist a[aria-current="page"] .m-ni{color:var(--accent);}
  .m-navlist a .m-arrow{margin-left:auto;color:var(--faint);width:16px;height:16px;}

  /* segmented controls inside the sheet (path + theme) */
  .m-segrow{display:flex;gap:10px;margin:2px 4px 4px;}
  .m-seg{flex:1;display:flex;background:var(--cell);border:1px solid var(--line);border-radius:14px;padding:4px;gap:3px;}
  .m-seg button{flex:1;font-family:var(--font);font-size:13px;font-weight:650;letter-spacing:.01em;border:0;background:none;
    color:var(--muted);padding:11px 6px;border-radius:11px;cursor:pointer;min-height:44px;
    -webkit-tap-highlight-color:transparent;transition:color .2s ease,background .2s ease;display:flex;align-items:center;justify-content:center;gap:7px;}
  .m-seg button[aria-pressed="true"]{background:var(--accent);color:#fff;}
  .m-seg button svg{width:16px;height:16px;}
  .m-seg.m-seg-path button[data-path="him"][aria-pressed="true"]{background:var(--him);}
  .m-seg.m-seg-path button[data-path="her"][aria-pressed="true"]{background:var(--her);}
  :root[data-theme="light"] .m-seg.m-seg-path button[data-path="him"][aria-pressed="true"]{background:var(--him-ink);}
  :root[data-theme="light"] .m-seg.m-seg-path button[data-path="her"][aria-pressed="true"]{background:var(--her-ink);}

  .m-sheet-cta{display:block;width:100%;text-align:center;margin:18px 0 4px;font-size:16px;padding:15px;border-radius:14px;
    background:var(--accent);color:#fff;font-weight:600;font-family:var(--font);text-decoration:none;}
  .m-sheet-legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:18px;
    font-size:12.5px;color:var(--faint);}
  .m-sheet-legal a,.m-sheet-legal button{color:var(--faint);background:none;border:0;font-family:var(--font);font-size:12.5px;padding:0;cursor:pointer;}

  /* ============================================================
     ADD TO HOME SCREEN — a one-time hint card, app-store toned.
     ============================================================ */
  .m-a2hs{display:flex !important;position:fixed;left:12px;right:12px;z-index:72;
    bottom:calc(82px + env(safe-area-inset-bottom,0px));
    align-items:center;gap:13px;padding:13px 15px;border-radius:18px;
    background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--line);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 14px 40px rgba(0,0,0,.22);
    transform:translateY(180%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease;}
  .m-a2hs.m-show{transform:translateY(0);opacity:1;}
  .m-a2hs .m-a2-ic{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
    background:#000;color:#7E9BC2;font-weight:700;font-size:16px;letter-spacing:-.02em;
    box-shadow:0 4px 12px rgba(0,0,0,.3);}
  .m-a2hs .m-a2-tx{flex:1;min-width:0;}
  .m-a2hs .m-a2-tx b{font-size:13.5px;font-weight:700;color:var(--fg);display:block;}
  .m-a2hs .m-a2-tx span{font-size:12px;color:var(--muted);line-height:1.35;display:block;margin-top:1px;}
  .m-a2hs .m-a2-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--cell);color:var(--muted);
    font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}

  /* ============================================================
     REFLOW — bigger targets, calmer rhythm, swipeable rows.
     ============================================================ */
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
  .btn-lg{font-size:16px;padding:14px 26px;}
  .tlink{min-height:44px;display:inline-flex;align-items:center;}

  /* Pricing → swipeable cards (no cramped single column) */
  .pricing{display:flex !important;grid-template-columns:none !important;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 16px 12px;margin:0 -16px;
    scrollbar-width:none;}
  .pricing::-webkit-scrollbar{display:none;}
  .pricing > .ptier{flex:0 0 84%;scroll-snap-align:center;}

  /* Footer — roomier tap zones */
  .footer .links{gap:4px 18px;}
  .footer .links a,.footer button.linklike{padding:8px 2px;min-height:40px;display:inline-flex;align-items:center;}

  /* Section breathing room on small screens */
  .sec{padding:38px 0;}

  /* ---- Foundations — centred, calmer, easier to read ---- */
  .sec-head,.hero,.waitlist,.band,.cell-paths{text-align:center;}
  .fgrid{gap:11px;}
  .fcard{padding:22px 14px 18px;text-align:center;}
  .fcard .fchap{display:none !important;}                  /* drop the chapter-number tag clutter */
  .fcard .icn{width:56px;height:56px;border-radius:16px;font-size:27px;margin-bottom:2px;}
  .fcard .fn{font-size:16.5px;margin-top:13px;}
  .fcard .fm{font-size:13px;margin-top:3px;}
  .fcard .fd{font-size:13px;line-height:1.55;margin-top:9px;}
  /* Phones have no hover — keep the "opens its own page" cue visible so
     tapping a foundation / a week's drop clearly leads somewhere. */
  .fcard.fclick .fread{display:block !important;opacity:1 !important;margin-top:11px;}
  .cal-day.active .cal-go{opacity:1 !important;transform:none !important;}

  /* ============================================================
     COPY — centred & easy on the eye across the whole site.
     Marketing cards + cell copy centre up; structured UI
     (timelines, legal prose, forms, FAQ) stays left to read.
     ============================================================ */
  .page-hero,.prose .lead,.sec p,.cap,.cell,.callout,
  .rcard,.ovc,.pcard,.ptier,.wcard,.life-switch{text-align:center;}
  /* page intros / band copy */
  .page-hero h1,.page-hero p,.band h2,.band .sub{text-align:center;}
  /* icons & emoji that were edge-anchored → centre them */
  .rcard .ric,.ovc .ovi,.pcard .pemoji,.cell .icn,.callout .lab{margin-left:auto;margin-right:auto;}
  /* routines — centred card copy */
  .rcard .rt,.rcard .rd,.rcard .rgo{text-align:center;}
  /* overlays — centred card copy, a touch more room */
  .ovc{padding:22px 20px;}
  /* cohort cards — centred column (were a left-aligned stack) */
  .pcard{align-items:center;}
  .pcard .ptext{margin-top:14px;width:100%;text-align:center;}
  .pcard .pgo{justify-content:center;}
  /* pricing — centre the header & price; keep the checklist legible */
  .ptier .pprice{justify-content:center;}
  .ptier .pname,.ptier .pdesc,.pmo{text-align:center;}
  .pbadge{left:50%;transform:translateX(-50%);}
  .pfeat{display:inline-block;text-align:left;align-self:center;width:fit-content;margin:22px auto 24px;}
  /* bento "three phases" rows → centred */
  .phase-row{justify-content:center;}
  /* short notes & statements */
  .fnote,.weeknote,.ovnote,.pathnote,.pricing-note,.statement{text-align:center;}

  /* Keep the film player / modals above the tab bar */
  .player{z-index:90;}
}

/* Respect reduced motion for the new chrome */
@media (prefers-reduced-motion:reduce){
  .m-tab.m-center .m-fab{animation:none;}
}