/* Locked Muck GTO pages (includes/gto_access.php gto_gate_page): Study and Practice for visitors without an account,
   My Hands without Muck Tracker. One hero with the wizard, one big yellow button, then the tools as tiles. */
.gg{box-sizing:border-box;max-width:1600px;margin:0 auto;padding:0 26px 64px;font-family:var(--muck-font);color:var(--muck-text)}
.gg *{box-sizing:border-box}

/* hero: fused to the menu and sized like the Muck GTO home hero (.f-intro, assets/gto-home-focused.css): 461px tall
   from 1101px with the wizard cropped through the middle (Shaun, 2026-10-03: "use THIS crop for all those sections"),
   550px below that, at least 464px on phones; no top border, rounded at the bottom only. */
.gg-hero{position:relative;display:flex;align-items:flex-start;height:461px;padding:64px 42px 38px;border:1px solid #505342;border-top:0;border-radius:0 0 15px 15px;overflow:hidden;isolation:isolate;
  background:linear-gradient(90deg,#0b1b16 0%,#0b1b16f2 30%,#0b1b1680 52%,transparent 72%),var(--gto-hero-art,url('lobby-art/unified-v1/gto.webp')) right center/cover no-repeat,#0b1b16}
.gg-copy{width:560px;max-width:100%}
.gg-eyebrow{margin:0 0 14px;line-height:19px;color:var(--muck-gold-muted);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.gg-hero h1 em{font-style:normal;color:#ffdc75}
.gg-hero h1{margin:0 0 16px;color:#f7f6f1;font-size:clamp(40px,4.4vw,63.36px);font-weight:750;line-height:.99;letter-spacing:-2px;-webkit-font-smoothing:antialiased}
.gg-price{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14px}
.gg-sub+.gg-price{margin:-12px 0 24px}
.gg-price:last-child{margin-bottom:0}
.gg-price s{color:var(--muck-text-3)}
.gg-price b{padding:3px 10px;border-radius:999px;background:var(--muck-gold);color:var(--muck-gold-ink);font-size:12px;font-weight:800}
.gg-sub{margin:0 0 28px;max-width:48ch;color:#c9cfcb;font-size:16px;line-height:1.6}
.gg-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.gg-x{display:block;flex-basis:100%;order:3;margin-top:-8px;font-size:14px;color:#c9cfcb;text-decoration:none}   /* or Sign in with X, under the gold button (gto_access.php) */
@media(max-width:760px){.gg-row .gg-x{order:0;margin-top:-10px;text-align:center}}
.gg-x b{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.gg-x:hover b{color:var(--muck-gold)}
.gg-x:focus-visible{outline:3px solid var(--muck-gold);outline-offset:3px}
.gg-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:300px;height:58px;padding:0 26px;border-radius:12px;background:var(--muck-gold-cta);color:var(--muck-gold-ink)!important;font-size:17px;font-weight:800;text-decoration:none;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--muck-gold) 70%,transparent);transition:transform .15s ease,filter .15s ease}
.gg-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.gg-btn:focus-visible,.gg-back:focus-visible,.gg-tile:focus-visible{outline:3px solid var(--muck-gold);outline-offset:3px}
.gg-g{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff}
.gg-back{color:#c9cfcb!important;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.gg-back:hover{color:#fff!important}

/* Every Muck GTO hero is one template (Shaun, 2026-10-03: "the text and placement of the stuff kind of jumps around"):
   copy top-aligned in a fixed 560px column, so the eyebrow, headline and sub sit at the same spot on every page. */
/* includes/gto-header.php gto_hero: the hero on its own, the page's content below it */
.gg-top{padding-bottom:0!important;padding-top:0!important}.gg-top .gg-sub:last-child{margin-bottom:0}
.gg-below{padding-top:0}
/* the page under the hero lines up with it: same width and sides, no stray top border (study-lab.css draws one on main) */
.gg-top+main{box-sizing:border-box;max-width:1600px!important;margin-left:auto!important;margin-right:auto!important;padding-left:26px!important;padding-right:26px!important;border-top:0!important}
@media(max-width:760px){.gg-top+main{padding-left:14px!important;padding-right:14px!important}}

/* what's inside */
.gg-more{margin:34px 0 14px;color:var(--muck-text);font-size:18px;font-weight:750;letter-spacing:-.2px}
.gg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gg-tile{display:flex;flex-direction:column;border:1px solid var(--muck-line);border-radius:12px;background:var(--muck-surface-1);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.gg-tile:hover{border-color:var(--muck-line-strong);transform:translateY(-2px)}
.gg-tile-art{display:block;aspect-ratio:2/1;background:#111;overflow:hidden;border-bottom:1px solid var(--muck-line)}
.gg-tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.gg-tile-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;color:var(--muck-text-2);font-size:14px;line-height:1.5}
.gg-tile-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gg-tile-head b{color:var(--muck-text);font-size:16px}
.gg-tile-head i{padding:2px 9px;border:1px solid var(--muck-line-strong);border-radius:999px;color:var(--muck-text-3);font-size:11px;font-style:normal;font-weight:700}
.gg-tile-head i.free{border-color:color-mix(in srgb,var(--muck-gold) 45%,transparent);color:var(--muck-gold)}

@media(max-width:1100px) and (min-width:761px){.gg-hero{height:550px;background:linear-gradient(90deg,#0b1b16 0%,#0b1b16f5 48%,#0b1b1699 68%,transparent 88%),var(--gto-hero-art,url('lobby-art/unified-v1/gto.webp')) right center/cover no-repeat,#0b1b16}}
@media(max-width:1050px){.gg-hero{padding:56px 34px 34px}}
@media(max-width:900px){.gg-tiles{grid-template-columns:1fr 1fr}.gg-tiles .gg-tile:last-child{grid-column:span 2}}
/* phones: as the Muck GTO home hero, the copy first and the wizard at the bottom */
@media(max-width:760px){
  .gg{padding:0 14px 48px}
  .gg-hero{display:block;height:auto;min-height:464px;padding:26px 22px 230px;
    background:linear-gradient(180deg,#0b1b16 calc(100% - 250px),#0b1b1600 calc(100% - 150px)),var(--gto-hero-art,url('lobby-art/unified-v1/gto.webp')) 62% bottom/auto 250px no-repeat,#0b1b16}
  .gg-hero h1{font-size:38px;letter-spacing:-1.2px}
  .gg-sub{font-size:14.5px}
  .gg-row{flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .gg-btn{min-width:0;width:100%}
  .gg-tiles{grid-template-columns:1fr}.gg-tiles .gg-tile:last-child{grid-column:auto}
}
.gg-top+main.focus-home{padding-top:19px}

/* A close-up from the same study for each tool; the home page retains its wizard. */
.gg-art-learn{--gto-hero-art:url('lobby-art/gto-hero-learn-v2-o.webp')}
.gg-art-practice{--gto-hero-art:url('lobby-art/gto-hero-practice-v1-o.webp')}
.gg-art-study{--gto-hero-art:url('lobby-art/gto-hero-study-v2-o.webp')}
.gg-art-hands{--gto-hero-art:url('lobby-art/gto-hero-hands-v2-o.webp')}
.gg-art-method{--gto-hero-art:url('lobby-art/gto-hero-method-v1-o.webp')}
/* gto_hero's desktop-only line break (2026-10-20: "on desktop can we put explore on its own line") */
@media(max-width:760px){.gg-sub .gg-br{display:none}}