/**
 * glossary.css – investment glossary (/alixco/glossary). AI-READINESS §9.4.
 * Consumes the global design tokens (tokens.css → var(--c-*)); no hard-coded
 * brand colours, so it re-brands and dark-modes with the rest of web2.
 * Scroll-reveal: resources/glossary.js.
 */

.gl-wrap{max-width:var(--container-max);margin:0 auto;padding:0 16px}
.gl-section{padding:44px 0}
@media(max-width:768px){.gl-section{padding:30px 0}}

/* ---- Buttons ---- */
.gl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-button);font-weight:700;font-size:15px;text-decoration:none;
  min-height:46px;padding:0 24px;border-radius:var(--r-btn);cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.gl-btn-primary{background:var(--c-green);color:var(--c-btn-text);box-shadow:var(--shadow)}
.gl-btn-primary:hover{background:var(--c-green-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.gl-btn-ghost{background:transparent;color:var(--c-blue);border:1.5px solid var(--c-line)}
.gl-btn-ghost:hover{background:var(--c-chip);border-color:var(--c-blue)}

/* ============ HERO ============ */
.gl-hero{background:linear-gradient(180deg,var(--c-bg) 0%,var(--c-card-2) 100%);padding:52px 0 44px}
.gl-hero-inner{max-width:760px;margin:0 auto;text-align:center}
.gl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-button);
  font-weight:700;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c-blue);background:var(--c-chip);border:1px solid var(--c-line);
  padding:7px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.gl-eyebrow svg{width:16px;height:16px;fill:none;stroke:var(--c-orange);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.gl-hero-inner h1{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1.14;
  color:var(--c-text);margin:0 0 16px}
.gl-hero-sub{font-size:18px;line-height:1.6;color:var(--c-body);max-width:60ch;margin:0 auto 24px}
.gl-hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(max-width:768px){.gl-hero-inner h1{font-size:28px}.gl-hero-sub{font-size:16px}}

/* ============ TERM LIST ============ */
.gl-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.gl-term{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:20px 22px;scroll-margin-top:90px}
.gl-term dt{font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--c-text);
  margin:0 0 7px;display:flex;align-items:baseline;gap:8px}
.gl-anchor{color:var(--c-line);text-decoration:none;font-size:15px;font-weight:400;
  opacity:0;transition:opacity .15s,color .15s}
.gl-term:hover .gl-anchor{opacity:1}
.gl-anchor:hover{color:var(--c-blue)}
.gl-term dd{margin:0;font-size:15px;line-height:1.65;color:var(--c-body)}
.gl-term dt:target,.gl-term:target{scroll-margin-top:90px}
.gl-term:target{border-color:var(--c-blue);box-shadow:var(--shadow-hover)}
@media(max-width:768px){.gl-term dt{font-size:17px}.gl-term dd{font-size:14.5px}
  .gl-anchor{opacity:1}}

/* ============ CTA ============ */
.gl-cta{background:var(--c-blue);border-radius:var(--r-card);padding:34px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gl-cta-copy h2{font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;margin:0 0 6px}
.gl-cta-copy p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.85);margin:0;max-width:52ch}
.gl-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.gl-cta .gl-btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.gl-cta .gl-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media(max-width:640px){.gl-cta{padding:26px 22px}.gl-cta-copy h2{font-size:21px}}

/* ============ FOCUS STATES (keyboard accessibility) ============ */
.gl-btn:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px;border-radius:var(--r-btn)}
.gl-anchor:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px;opacity:1;border-radius:4px}

/* ============ SCROLL REVEAL ============ */
.gl-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.gl-reveal.gl-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .gl-reveal{opacity:1;transform:none;transition:none}
}

/* ================================================================
 * SEARCH + A-Z TOOLBAR  (ui-ux-pro-max pass, 2026-07-07)
 * FAQ/Documentation pattern: prominent search is the #1 finding.
 * Hidden until JS adds .gl-has-js to <html>, so no-JS users never
 * see a dead control (all terms stay fully visible without JS).
 * ============================================================== */
.gl-toolbar-wrap{padding-bottom:0}
.gl-toolbar{display:none}
.gl-has-js .gl-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;max-width:820px;margin:0 auto;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:14px 16px}
.gl-search{position:relative;flex:1 1 260px;display:flex;align-items:center}
.gl-search svg{position:absolute;left:12px;width:18px;height:18px;fill:none;stroke:var(--c-muted);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* Higher-specificity selector + box-sizing so the global input styles do not
 * override the left padding that clears the search icon. */
.gl-search input.gl-search-input{box-sizing:border-box;width:100%;min-height:44px;
  margin:0;padding:0 14px 0 42px;font-family:var(--font-body);font-size:15px;
  color:var(--c-text);background:var(--c-bg-muted);
  border:1.5px solid var(--c-line);border-radius:var(--r-btn);
  transition:border-color .2s,box-shadow .2s}
.gl-search input.gl-search-input::placeholder{color:var(--c-muted);opacity:1}
.gl-search input.gl-search-input:focus{outline:none;border-color:var(--c-blue);box-shadow:var(--focus-ring)}
.gl-search svg{z-index:1}
.gl-az{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.gl-az:empty{display:none}
.gl-az a,.gl-az span{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 5px;font-family:var(--font-button);font-weight:700;
  font-size:12px;border-radius:var(--r-chip)}
.gl-az a{color:var(--c-blue);background:var(--c-chip);text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.gl-az a:hover{background:var(--c-blue);color:#fff;transform:translateY(-2px)}
.gl-az a:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.gl-az span{color:var(--c-line)}
.gl-empty{max-width:820px;margin:18px auto 0;text-align:center;color:var(--c-muted);font-size:15px}
.gl-term[hidden]{display:none}
@media(max-width:560px){.gl-az{justify-content:flex-start}}

/* ================================================================
 * EYE-CATCHERS & EFFECTS  (brand-consistent with /alixco/compare)
 * Token-based only; all decorative motion is gated by
 * prefers-reduced-motion at the very end.
 * ============================================================== */

/* ---- Hero: brand-tinted aurora + animated gradient headline ---- */
.gl-hero{position:relative;overflow:hidden;isolation:isolate}
.gl-hero::before,.gl-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;
  filter:blur(64px);pointer-events:none}
.gl-hero::before{width:440px;height:440px;top:-160px;left:-120px;opacity:.5;
  background:radial-gradient(circle at 30% 30%,var(--c-blue),transparent 70%);
  animation:glFloatA 18s ease-in-out infinite}
.gl-hero::after{width:380px;height:380px;top:-120px;right:-120px;opacity:.3;
  background:radial-gradient(circle at 70% 30%,var(--c-green-alt),transparent 70%);
  animation:glFloatB 22s ease-in-out infinite}
.gl-hero-inner{position:relative;z-index:1}
@keyframes glFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,26px) scale(1.08)}}
@keyframes glFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,36px) scale(1.12)}}
.gl-hero-inner h1{color:var(--c-blue);
  background:linear-gradient(100deg,var(--c-blue) 0%,var(--c-blue-variant) 32%,
    var(--c-green-text) 60%,var(--c-blue) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:glSheen 9s linear infinite}
@keyframes glSheen{to{background-position:220% center}}
.gl-eyebrow{animation:glPillGlow 3.6s ease-in-out infinite}
@keyframes glPillGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,153,1,0)}
  50%{box-shadow:0 0 0 4px rgba(255,153,1,.16)}}

/* ---- Buttons: light sweep on hover ---- */
.gl-btn{position:relative;overflow:hidden}
.gl-btn::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;
  transform:translateX(-190%) skewX(-18deg);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent)}
.gl-btn:hover::after{animation:glBtnShine .75s ease}
@keyframes glBtnShine{to{transform:translateX(320%) skewX(-18deg)}}

/* ---- Term cards: left accent reveal + subtle lift (Swiss-minimal, 250ms) ---- */
.gl-term{position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.gl-term::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--c-blue),var(--c-green-alt));
  transform:scaleY(0);transform-origin:top;transition:transform .28s ease}
.gl-term:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--c-blue)}
.gl-term:hover::before,.gl-term:target::before{transform:scaleY(1)}
.gl-term:target{border-color:var(--c-blue);animation:glTargetFlash 1.1s ease}
@keyframes glTargetFlash{0%{box-shadow:0 0 0 3px rgba(1,223,13,0)}
  30%{box-shadow:0 0 0 3px rgba(1,223,13,.35)}100%{box-shadow:var(--shadow-hover)}}
/* brighten the anchor "#" into a pill on hover */
.gl-term:hover .gl-anchor{color:var(--c-blue)}

/* ---- Closing CTA: brand gradient + drifting glow + slow sheen ---- */
.gl-cta{position:relative;overflow:hidden;isolation:isolate;box-shadow:var(--shadow-hover);
  background:linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-variant) 60%,
    color-mix(in srgb,var(--c-blue) 78%,#000) 100%)}
.gl-cta::before{content:"";position:absolute;z-index:-1;top:-70%;left:-12%;width:60%;height:240%;
  pointer-events:none;background:radial-gradient(closest-side,rgba(1,223,13,.30),transparent);
  animation:glFloatB 15s ease-in-out infinite}
.gl-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  transform:translateX(-130%);
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);
  animation:glCtaSheen 6.5s ease-in-out infinite}
@keyframes glCtaSheen{0%,68%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ---- Reduced motion: kill every decorative animation ---- */
@media(prefers-reduced-motion:reduce){
  .gl-hero::before,.gl-hero::after,.gl-hero-inner h1,.gl-eyebrow,.gl-btn::after,
  .gl-term::before,.gl-term:target,.gl-cta::before,.gl-cta::after{animation:none!important}
}