/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   foyl Learn - guest experience: welcome overlay + branded content locks.
   Loaded on the hub and catalog pages; only activates when logged out
   (see guest-experience.js). Dark-committed, brand gradient throughout.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --gx-grad:linear-gradient(115deg,#00D4FF 0%,#00AEEF 38%,#00897B 72%,#005F87 100%);
}

/* ── Welcome overlay ─────────────────────────────────────────── */
#gx-overlay{
  position:fixed; inset:0; z-index:2147483040;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(2,4,3,.74); backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  opacity:0; animation:gx-fade .45s ease forwards;
}
@keyframes gx-fade{to{opacity:1}}

#gx-overlay .gx-modal{
  position:relative; width:min(660px,100%); max-height:calc(100vh - 48px); overflow-y:auto;
  background:linear-gradient(180deg,rgba(16,21,20,.97),rgba(6,10,9,.98));
  border:1px solid rgba(120,180,255,.16); border-radius:24px;
  padding:46px clamp(24px,5vw,46px) 38px;
  box-shadow:0 44px 130px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.4);
  transform:translateY(18px) scale(.985); opacity:0;
  animation:gx-rise .55s cubic-bezier(.2,.7,.2,1) .08s forwards;
}
@keyframes gx-rise{to{transform:none;opacity:1}}
#gx-overlay .gx-modal::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:24px 24px 0 0;
  background:var(--gx-grad); opacity:.9;
}
#gx-overlay .gx-modal::after{
  content:""; position:absolute; left:50%; top:-8%; width:70%; height:120px; transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,174,239,.22),transparent 70%); filter:blur(8px);
  pointer-events:none;
}

.gx-x{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(120,180,255,.14); color:var(--tx3,#7c837f);
  font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s}
.gx-x:hover{color:var(--tx,#EDE9E3); border-color:rgba(120,180,255,.4); background:rgba(120,180,255,.06)}

.gx-logo{display:flex; align-items:center; gap:0; margin-bottom:22px}
.gx-logo img{height:30px; width:auto; filter:drop-shadow(0 4px 22px rgba(0,174,239,.28))}

.gx-eyebrow{font-family:var(--mono,'DM Mono',monospace); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--tx3,#7c837f); margin-bottom:14px; display:flex; align-items:center; gap:9px}
.gx-eyebrow .gx-dot{width:6px; height:6px; border-radius:50%; background:#00897B;
  box-shadow:0 0 10px 1px rgba(0,137,123,.85); animation:gx-pulse 2.6s ease-in-out infinite}
@keyframes gx-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.gx-title{font-family:var(--jakarta,'Plus Jakarta Sans',sans-serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(26px,4.4vw,40px); line-height:1.08; margin:0 0 16px; text-wrap:balance; color:var(--tx,#F3EFE9)}
.gx-title .gx-g{background:var(--gx-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}
.gx-sub{font-size:16px; color:var(--tx2,#B7B1A8); font-weight:300; line-height:1.6; margin:0 0 22px; max-width:52ch}

.gx-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.gx-chip{font-family:var(--mono,monospace); font-size:11px; letter-spacing:.05em; color:var(--tx2,#B7B1A8);
  padding:6px 12px; border:1px solid rgba(120,180,255,.14); border-radius:999px; background:rgba(120,180,255,.03);
  display:inline-flex; align-items:center; gap:7px}
.gx-chip .gx-tick{color:#00c9a7}

.gx-ctas{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.gx-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--font,'Outfit',sans-serif); font-size:15.5px; font-weight:500; padding:14px 24px;
  border-radius:12px; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s, border-color .2s}
.gx-btn svg{width:18px; height:18px; flex:none}
.gx-guest{background:var(--gx-grad); color:#021016; font-weight:600; box-shadow:0 8px 28px -8px rgba(0,174,239,.55)}
.gx-guest:hover{transform:translateY(-2px); box-shadow:0 14px 40px -8px rgba(0,174,239,.72)}
.gx-signin{background:rgba(255,255,255,.02); color:var(--tx,#EDE9E3); border-color:rgba(120,180,255,.2)}
.gx-signin:hover{transform:translateY(-2px); border-color:rgba(120,180,255,.44); background:rgba(120,180,255,.06)}

.gx-foot{margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.gx-free{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono,monospace); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx2,#B7B1A8);
  padding:6px 13px; border:1px solid rgba(120,180,255,.16); border-radius:999px}
.gx-free b{color:#00c9a7; font-weight:500}
.gx-email{font-size:13.5px; color:var(--tx3,#7c837f); text-decoration:none}
.gx-email:hover{color:var(--tx2,#B7B1A8); text-decoration:underline}
.gx-poke{margin:18px 0 0; font-size:13px; font-style:italic; color:var(--tx3,#9a948d); line-height:1.55; max-width:56ch}
.gx-poke a{color:var(--tx2,#B7B1A8); text-decoration:underline}
.gx-legal{margin:13px 0 0; font-size:12.5px; color:var(--tx3,#7c837f); line-height:1.6; max-width:56ch}
.gx-legal b{color:var(--tx2,#B7B1A8); font-weight:600}
.gx-legal a{color:var(--tx3,#9a948d); text-decoration:underline}

/* ── Cookie consent, folded into the overlay ─────────────────── */
.gx-cookie{margin:16px 0 0; padding:13px 15px; border:1px solid rgba(120,180,255,.14);
  border-radius:12px; background:rgba(120,180,255,.03); display:flex; flex-wrap:wrap;
  align-items:center; gap:10px 14px}
.gx-cookie-txt{flex:1 1 240px; font-size:12.5px; color:var(--tx3,#9a948d); line-height:1.55}
.gx-cookie-txt a{color:var(--tx2,#B7B1A8); text-decoration:underline}
.gx-cookie-btns{display:flex; gap:8px; flex:none}
.gx-cookie-b{font-family:var(--font,'Outfit',sans-serif); font-size:12.5px; font-weight:500;
  padding:8px 14px; border-radius:8px; cursor:pointer; transition:background .18s, border-color .18s, color .18s}
.gx-cookie-ess{background:rgba(255,255,255,.02); border:1px solid rgba(120,180,255,.18); color:var(--tx2,#B7B1A8)}
.gx-cookie-ess:hover{color:var(--tx,#EDE9E3); border-color:rgba(120,180,255,.4)}
.gx-cookie-all{background:linear-gradient(115deg,rgba(0,212,255,.16),rgba(0,137,123,.16));
  border:1px solid rgba(0,174,239,.34); color:var(--cyan,#00D4FF)}
.gx-cookie-all:hover{background:linear-gradient(115deg,rgba(0,212,255,.26),rgba(0,137,123,.26))}
.gx-cookie-done{display:none; font-family:var(--mono,monospace); font-size:11px; letter-spacing:.06em;
  color:#00c9a7}
.gx-cookie[data-state="done"] .gx-cookie-txt,
.gx-cookie[data-state="done"] .gx-cookie-btns{display:none}
.gx-cookie[data-state="done"] .gx-cookie-done{display:block}

/* ── Content locks ───────────────────────────────────────────── */
.guest-locked{position:relative !important}

/* full-card lock (hub cards + catalog cards) */
.gx-lock{position:absolute; inset:0; z-index:8; border-radius:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
  background:rgba(4,7,6,.40); backdrop-filter:blur(2.5px) saturate(.72); -webkit-backdrop-filter:blur(2.5px) saturate(.72);
  transition:background .3s ease, backdrop-filter .3s ease}
.gx-lock::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(0,212,255,.5),rgba(0,137,123,.28) 55%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; transition:opacity .3s}
.guest-locked:hover .gx-lock{background:rgba(4,7,6,.56); backdrop-filter:blur(3.5px) saturate(.7)}
.guest-locked:hover .gx-lock::before{opacity:.9}

.gx-badge{position:relative; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  overflow:hidden; background:linear-gradient(150deg,rgba(0,212,255,.15),rgba(0,137,123,.13));
  border:1px solid rgba(0,174,239,.42); box-shadow:0 8px 26px rgba(0,174,239,.16);
  transition:transform .3s ease, box-shadow .3s ease}
.gx-badge svg{width:25px; height:25px; position:relative; z-index:2}
.gx-badge::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-130%); animation:gx-shine 3.4s ease-in-out infinite}
@keyframes gx-shine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(240%)}}
.guest-locked:hover .gx-badge{transform:scale(1.07) translateY(-1px); box-shadow:0 12px 34px rgba(0,174,239,.3)}

.gx-lock-label{font-family:var(--mono,'DM Mono',monospace); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tx,#EDE9E3); display:flex; flex-direction:column; gap:3px; line-height:1.4}
.gx-lock-label b{background:var(--gx-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-weight:600; letter-spacing:.14em}
.gx-lock-label span{color:var(--tx3,#7c837f); letter-spacing:.1em; font-size:9.5px}

/* small inline lock for individual list items (hc-item) */
.gx-item-locked{opacity:.52; cursor:pointer; position:relative}
.gx-item-locked:hover{opacity:.78}
.gx-item-locked .gx-ilock{margin-left:auto; width:13px; height:13px; flex:none; opacity:.9}
.hc-item.gx-item-locked{padding-right:8px}

/* ── Certs bank: locked chips + "free to explore" strip ──────── */
.lane-chip.cert-locked{opacity:.5; position:relative}
.lane-chip.cert-locked:hover{opacity:.72}
.lane-chip.cert-locked::after{content:""; position:absolute; top:6px; right:6px; width:13px; height:13px;
  opacity:.9; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AEEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.gx-cert-free{margin:0 0 30px; padding:16px 18px 18px; border:1px solid rgba(0,174,239,.22); border-radius:14px;
  background:linear-gradient(180deg,rgba(0,174,239,.06),transparent)}
.gx-cert-free-hd{font-family:var(--mono,'DM Mono',monospace); font-size:12px; letter-spacing:.03em;
  color:var(--tx2,#A8A29A); margin-bottom:13px}
.gx-cert-free-hd b{background:var(--gx-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-weight:600; letter-spacing:.05em}
.gx-cert-free-row{display:flex; flex-wrap:wrap; gap:7px}

@media (prefers-reduced-motion:reduce){
  #gx-overlay,#gx-overlay .gx-modal{animation:none; opacity:1; transform:none}
  .gx-badge::after{animation:none; display:none}
  .gx-eyebrow .gx-dot{animation:none}
}
@media print{#gx-overlay,.gx-lock{display:none !important}}