/* GC home compaction (2026-10-31): shorter, more guided home page.
   Path tiles, Academy up front, swipeable rows, About tabs, collapsed Partner. */

/* ---------- "where to start" tiles ---------- */
.paths{padding:22px 0 8px;background:var(--paper)}
.paths .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.path{position:relative;display:grid;gap:2px;padding:18px 18px 16px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;
  border:2px solid #EADCF8;box-shadow:0 10px 22px rgba(107,63,160,.08)}
.path .pi{font-size:26px;line-height:1;margin-bottom:6px}
.path b{font:900 italic 28px/1 'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.path span:last-child{font-size:13px;color:#5b5162;line-height:1.3}
.path::after{content:"\2192";position:absolute;right:16px;top:16px;font-weight:800;color:var(--pink-d)}
.path.p-learn{background:linear-gradient(160deg,#FFE3F1,#EFE3FF);border-color:var(--pink)}
.path.p-watch{border-color:var(--lav)}.path.p-play{border-color:#9be8df}.path.p-shop{border-color:var(--baby)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .path{transition:transform .18s ease,box-shadow .18s ease}
  .path:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 16px 28px rgba(107,63,160,.16)}
}
.path:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
@media (max-width:820px){
  .paths .wrap{grid-template-columns:1fr 1fr;gap:10px}
  .path{padding:14px 14px 12px}.path b{font-size:24px}
}

/* Academy now sits right under the tiles */
.paths + .mem-promo{padding-top:30px}

/* ---------- swipeable video row on small screens ---------- */
@media (max-width:820px){
  .vgrid.v3{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 10px;margin-right:-18px}
  .vgrid.v3::-webkit-scrollbar{display:none}
  .vgrid.v3>*{flex:0 0 78%;scroll-snap-align:start}
  .vgrid.v3::after{content:"";flex:0 0 4px}
}

/* ---------- smaller store art on phones ---------- */
@media (max-width:820px){
  .collection .col-art{min-height:0;padding:28px}
  .collection .col-art img{max-height:190px;width:auto}
}

/* ---------- About tabs ---------- */
.tablist{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.tablist button{font:700 14px 'Inter',sans-serif;padding:9px 16px;border-radius:999px;border:2px solid #EADCF8;background:#fff;color:var(--purple);cursor:pointer}
.tablist button[aria-selected="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.tablist button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.tabs.on .tabpanel[hidden]{display:none}
.tabs:not(.on) .tablist{display:none}

/* ---------- Partner: collapsed tracks + message button ---------- */
.partner details.track{border:2px solid #EADCF8;border-radius:16px;background:#fff;padding:0 18px}
.partner details.track[open]{padding-bottom:16px}
.partner details.track summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.partner details.track summary::-webkit-details-marker{display:none}
.partner details.track summary h3{margin:0}
.partner details.track summary::after{content:"+";font:800 22px/1 'Inter',sans-serif;color:var(--pink-d)}
.partner details.track[open] summary::after{content:"\2212"}
.partner details.track summary:focus-visible,.partner details.inq summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.partner .tracks{gap:12px}
.partner details.inq>summary{list-style:none;cursor:pointer;text-align:center;display:block}
.partner details.inq>summary::-webkit-details-marker{display:none}
.partner details.inq[open]>summary{margin-bottom:14px}
@media (min-width:1041px){.partner details.inq{position:sticky;top:96px}.partner form.card{position:static}}

/* ---------- tighter phone layout ---------- */
@media (max-width:820px){
  .vgrid.v3>*{flex-basis:56%}
  .about .gallery-track li{flex:0 0 62%}
  .mem-fine{font-size:12px;line-height:1.45}
  .mem-promo .cp-card.bs-promo{padding:22px 20px}
  .mem-promo .bs-promo-icon{width:64px;height:64px;font-size:32px;border-radius:18px}
  .mem-promo .cp-card.bs-promo p{font-size:15px}
}

/* ---------- GC Academy as a top-bar tab; clear Log in / Join ---------- */
.nav-academy{display:none;align-items:center;gap:4px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--pink);color:var(--ink);
  font:800 14px/1 'Inter',system-ui,sans-serif;text-decoration:none;white-space:nowrap;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.nav-academy:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
@media (max-width:1040px){.nav-academy{display:inline-flex;order:0}}
@media (max-width:560px){.nav-academy{padding:0 11px;font-size:13px}.nav-academy span{display:none}}
@media (max-width:380px){.nav-academy{font-size:12px;padding:0 9px}}
/* desktop: the existing GC Academy link becomes a pill */
@media (min-width:1041px){
  .nav ul a[href="/academy/"]{background:var(--pink);border:2px solid var(--ink);border-radius:999px;padding:8px 16px;box-shadow:0 3px 0 var(--ink);font-weight:800}
  .nav ul a[href="/academy/"]:hover{color:var(--ink)}
}

/* the spinning sticker must never widen the page */
.hero{overflow-x:clip}

/* ---------- one solid GC Academy button (the top tab); no duplicates ---------- */
.paths .wrap{grid-template-columns:repeat(3,1fr)}
@media (max-width:1040px){.nav ul li:has(>a[href="/academy/"]){display:none}}
@media (max-width:820px){
  .paths .wrap{gap:8px}
  .path{padding:12px 10px 10px}.path .pi{font-size:22px}.path b{font-size:22px}.path span:last-child{font-size:12px}
  .path::after{right:10px;top:10px}
}

/* ---------- compact, scrollable tab row (Watch / Play / Faith / Workbooks / Shop) ---------- */
.paths{padding:16px 0 6px}
.paths .wrap{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-top:4px;padding-bottom:8px;justify-content:center}
.paths .wrap::-webkit-scrollbar{display:none}
.path{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;scroll-snap-align:start}
.path::after{display:none}
.path .pi{font-size:20px;margin:0}
.path b{font-size:22px}
.path.p-faith{border-color:#f3c77a}.path.p-books{border-color:var(--purple)}
@media (max-width:820px){
  .paths .wrap{justify-content:flex-start;gap:8px}
  .path{padding:9px 14px}.path b{font-size:20px}.path .pi{font-size:18px}
}

/* ---------- Hero: influencers + Academy in one story ---------- */
.btn-lg{padding:16px 28px;font-size:17px}
.hero .hero-ctas .btn-pink{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.hero-fine{margin:14px 0 0;font-size:14px;color:#5b5162}
.hero-fine a{color:var(--purple);font-weight:700;text-underline-offset:3px}
.trust-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.trust-chips li{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--purple);background:#fff;border:1.5px solid #EADCF8;border-radius:999px;padding:8px 12px}
.trust-chips li::before{content:"\2713";color:var(--pink-d);margin-right:6px}

/* camera-viewfinder frame on the hero photo (influencer feel) */
.hero-photo{position:relative}
.vf{position:absolute;inset:14px;z-index:2;pointer-events:none}
.vf-c{position:absolute;width:26px;height:26px;border:3px solid rgba(255,255,255,.95);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.vf-c.tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.vf-c.tr{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.vf-c.bl{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.vf-c.br{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.vf-rec{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;font-style:normal;background:rgba(29,29,29,.55);padding:7px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.vf-rec b{width:8px;height:8px;border-radius:50%;background:#ff3b5c;display:inline-block}
@media (prefers-reduced-motion:no-preference){.vf-rec b{animation:gcRec 1.4s steps(2,end) infinite}}
@keyframes gcRec{50%{opacity:.2}}

/* ticker */
.ticker{overflow:hidden;background:var(--ink);color:#fff;border-block:2px solid var(--ink)}
.ticker-track{display:flex;width:max-content}
.ticker-track span{font:900 italic 22px/1 'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:12px 22px;white-space:nowrap}
.ticker-track span::after{content:"\2726";margin-left:44px;color:var(--pink)}
.ticker-track span:nth-child(3n+2)::after{color:var(--lav)}.ticker-track span:nth-child(3n)::after{color:#5EE0D2}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:gcTick 40s linear infinite}}
@keyframes gcTick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker{overflow-x:auto}}

/* closing band */
.closer{background:linear-gradient(160deg,#FFE3F1,#EFE3FF);padding:64px 0;text-align:center}
.closer h2{font:900 italic clamp(34px,5vw,56px)/.98 'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin:0 auto 12px;max-width:760px}
.closer p{color:#3c3540;font-size:18px;margin:0 auto 22px;max-width:560px}
.closer-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.closer .btn-pink{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
@media (max-width:820px){.closer{padding:44px 0}.trust-chips li{font-size:11px;padding:7px 10px}}

/* ---------- Style Studio spotlight ---------- */
.style-spot{padding:56px 0;background:linear-gradient(160deg,#FFE3F1 0%,#EFE3FF 60%,#DDF8F4 100%);position:relative;overflow-x:clip}
.style-spot .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.ss-copy h2{font:900 italic clamp(36px,5vw,60px)/.95 'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin:6px 0 14px}
.ss-copy p{color:#3c3540;font-size:17px;line-height:1.6;max-width:480px}
.ss-app{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 14px;font:800 13px/1 'Inter',sans-serif!important;color:var(--ink)!important;margin:6px 0 18px!important}
.ss-btns{display:flex;gap:12px;flex-wrap:wrap}
.style-spot .btn-pink{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.ss-shelf{list-style:none;margin:0;padding:10px 4px 18px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;min-width:0}
.ss-card{flex:0 0 170px;scroll-snap-align:start}
.ss-card a{position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:20px;padding:10px 10px 14px;box-shadow:0 5px 0 var(--ink)}
.ss-img{display:grid;place-items:center;background:#F7F1FB;border-radius:12px;aspect-ratio:1/1;overflow:hidden}
.ss-img img{width:100%;height:100%;object-fit:contain}
.ss-card b{font:900 italic 20px/1 'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;min-height:40px}
.ss-new{position:absolute;top:-10px;right:-8px;background:var(--pink);border:2px solid var(--ink);border-radius:999px;padding:5px 9px;font:800 11px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.05em;transform:rotate(6deg)}
.ss-card a:focus-visible,.ss-shelf:focus-visible{outline:4px solid var(--purple);outline-offset:3px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ss-card a{transition:transform .18s ease}.ss-card:nth-child(odd) a{transform:rotate(-1.2deg)}.ss-card:nth-child(even) a{transform:rotate(1.2deg)}
  .ss-card a:hover{transform:translateY(-5px) rotate(0)}
}
.path.p-style{border-color:var(--pink);background:linear-gradient(160deg,#FFE3F1,#EFE3FF)}
.path-new{font:800 10px/1 'Inter',sans-serif;font-style:normal;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:4px 7px;letter-spacing:.05em}
@media (max-width:900px){.style-spot .wrap{grid-template-columns:1fr;gap:18px}.style-spot{padding:40px 0}.ss-card{flex-basis:140px}.ss-card b{font-size:18px}}