/**
 * compare.css – investment comparison page (/alixco/compare). 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/compare.js. All illustrations are inline SVG.
 */

.cmp-wrap{max-width:var(--container-max);margin:0 auto;padding:0 16px}
.cmp-section{padding:48px 0}
@media(max-width:768px){.cmp-section{padding:34px 0}}

/* ---- Buttons ---- */
.cmp-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}
.cmp-btn-primary{background:var(--c-green);color:var(--c-btn-text);box-shadow:var(--shadow)}
.cmp-btn-primary:hover{background:var(--c-green-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.cmp-btn-ghost{background:transparent;color:var(--c-blue);border:1.5px solid var(--c-line)}
.cmp-btn-ghost:hover{background:var(--c-chip);border-color:var(--c-blue)}

/* ---- Section headings ---- */
.cmp-sec-head{text-align:center;max-width:760px;margin:0 auto 32px}
.cmp-sec-head h2{font-family:var(--font-display);font-weight:700;font-size:29px;line-height:1.2;color:var(--c-text);margin:0 0 10px}
.cmp-sec-head p{font-size:17px;line-height:1.6;color:var(--c-muted);margin:0}
@media(max-width:768px){.cmp-sec-head h2{font-size:23px}.cmp-sec-head p{font-size:16px}}

/* ============ HERO ============ */
.cmp-hero{background:linear-gradient(180deg,var(--c-bg) 0%,var(--c-card-2) 100%);padding:52px 0 44px}
.cmp-hero-inner{max-width:820px;margin:0 auto;text-align:center}
.cmp-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}
.cmp-eyebrow svg{width:16px;height:16px;fill:none;stroke:var(--c-orange);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-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}
.cmp-hero-sub{font-size:18px;line-height:1.6;color:var(--c-body);max-width:62ch;margin:0 auto 24px}
.cmp-hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cmp-hero-note{font-size:13px;color:var(--c-muted);margin:18px 0 0}
@media(max-width:768px){.cmp-hero-inner h1{font-size:28px}.cmp-hero-sub{font-size:16px}}

/* ============ COMPARISON TABLE ============ */
.cmp-table-scroll{overflow-x:auto;border-radius:var(--r-card);box-shadow:var(--shadow);
  border:1px solid var(--c-line);background:var(--c-card)}
.cmp-table{width:100%;border-collapse:collapse;min-width:760px;font-size:14.5px;
  table-layout:fixed}
.cmp-table th,.cmp-table td{text-align:left;padding:14px 16px;vertical-align:top;line-height:1.5;
  border-bottom:1px solid var(--c-line);word-wrap:break-word;overflow-wrap:break-word}
/* Fixed, equal-width columns so no single column fans out wide */
.cmp-table thead th.cmp-th-dim{width:16%}
.cmp-table thead th:not(.cmp-th-dim){width:21%}
.cmp-table thead th{background:var(--c-blue);color:#fff;font-family:var(--font-button);
  font-weight:700;font-size:14px;position:sticky;top:0;z-index:2}
.cmp-table thead th.cmp-th-dim{background:var(--c-blue);left:0;z-index:3}
.cmp-table tbody th{font-family:var(--font-button);font-weight:700;color:var(--c-text);
  background:var(--c-bg-muted);position:sticky;left:0;z-index:1}
/* Zebra striping for readability, but never over the highlighted product column */
.cmp-table tbody tr:nth-child(even) th,
.cmp-table tbody tr:nth-child(even) td:not(.cmp-col-hi){background:var(--c-card-2)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table .cmp-col-hi{background:var(--c-active)}
.cmp-table thead th.cmp-col-hi{background:var(--c-green);color:var(--c-btn-text)}
.cmp-table td{color:var(--c-body)}
.cmp-table-foot{font-size:12.5px;color:var(--c-muted);margin:12px 2px 0;line-height:1.5}

/* ============ INSTRUMENT CARDS ============ */
.cmp-band{background:var(--c-bg-muted)}
.cmp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.cmp-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cmp-cards{grid-template-columns:1fr}}
.cmp-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:22px 20px;display:flex;flex-direction:column}
.cmp-card-hi{border-color:var(--c-green);box-shadow:var(--shadow-hover)}
.cmp-badge{align-self:flex-start;font-family:var(--font-button);font-weight:700;font-size:11px;
  letter-spacing:.8px;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);
  margin-bottom:12px;color:var(--c-blue);background:var(--c-chip)}
.cmp-badge-hi{color:var(--c-green-text);background:var(--c-pos-bg)}
.cmp-card h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--c-text);margin:0 0 8px}
.cmp-card-figure{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--c-blue);line-height:1}
.cmp-card-hi .cmp-card-figure{color:var(--c-green-text)}
.cmp-card-figlbl{font-size:12.5px;color:var(--c-muted);margin:4px 0 14px}
.cmp-card>p{font-size:14px;line-height:1.6;color:var(--c-body);margin:0 0 14px}
.cmp-pros,.cmp-cons{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:7px}
.cmp-pros li,.cmp-cons li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.45;color:var(--c-body)}
.cmp-pros li::before,.cmp-cons li::before{position:absolute;left:0;top:0;width:16px;height:16px;
  border-radius:50%;text-align:center;font-size:12px;font-weight:700;line-height:16px}
.cmp-pros li::before{content:"+";background:var(--c-pos-bg);color:var(--c-success-text)}
.cmp-cons li::before{content:"–";background:var(--c-neg-bg);color:var(--c-danger-text)}
.cmp-cons{margin-top:auto}

/* ============ HOW TO COMBINE ============ */
.cmp-mix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.cmp-mix{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.cmp-mix-item{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:24px 22px;text-align:center}
.cmp-mix-ico{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  border-radius:50%;background:var(--c-chip);margin-bottom:12px}
.cmp-mix-ico svg{width:26px;height:26px;fill:none;stroke:var(--c-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cmp-mix-item h4{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--c-text);margin:0 0 8px}
.cmp-mix-item p{font-size:14.5px;line-height:1.6;color:var(--c-muted);margin:0}

/* ============ RISK DISCLAIMER ============ */
.cmp-risk{background:var(--c-warn-bg)}
.cmp-risk-inner{display:flex;gap:14px;align-items:flex-start;padding:18px 16px;flex-wrap:wrap}
.cmp-risk-badge{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--font-button);font-weight:700;font-size:12.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--c-warn-text)}
.cmp-risk-badge svg{width:18px;height:18px;fill:none;stroke:var(--c-warn-text);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-risk p{margin:0;font-size:14px;line-height:1.6;color:var(--c-warn-text);flex:1 1 320px}

/* ============ FAQ ============ */
.cmp-faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.cmp-q{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:4px 20px}
.cmp-q summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;
  font-size:16.5px;color:var(--c-text);padding:16px 28px 16px 0;position:relative}
.cmp-q summary::-webkit-details-marker{display:none}
.cmp-q summary::after{content:"+";position:absolute;right:2px;top:14px;font-size:22px;font-weight:400;
  color:var(--c-blue);transition:transform .2s}
.cmp-q[open] summary::after{content:"–"}
.cmp-q p{margin:0 0 16px;font-size:15px;line-height:1.65;color:var(--c-body)}

/* ============ CTA ============ */
.cmp-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}
.cmp-cta-copy h2{font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;margin:0 0 6px}
.cmp-cta-copy p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.85);margin:0;max-width:52ch}
.cmp-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cmp-cta .cmp-btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.cmp-cta .cmp-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media(max-width:640px){.cmp-cta{padding:26px 22px}.cmp-cta-copy h2{font-size:21px}}

/* ============ FOCUS STATES (keyboard accessibility) ============ */
.cmp-btn:focus-visible,.cmp-q summary:focus-visible{outline:3px solid var(--c-blue);
  outline-offset:2px;border-radius:var(--r-btn)}

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

/* ================================================================
 * EYE-CATCHERS & EFFECTS  (ui-ux-pro-max pass, 2026-07-07)
 * Layered on top of the base styles above (later same-specificity
 * rules win). Token-based only, so it dark-modes and re-brands with
 * the rest of web2. ALL decorative motion is disabled in the
 * prefers-reduced-motion block at the very end.
 * ============================================================== */

/* ---- Hero: brand-tinted aurora + animated gradient headline ---- */
.cmp-hero{position:relative;overflow:hidden;isolation:isolate}
.cmp-hero::before,.cmp-hero::after{content:"";position:absolute;z-index:-1;
  border-radius:50%;filter:blur(64px);pointer-events:none}
.cmp-hero::before{width:460px;height:460px;top:-170px;left:-120px;opacity:.5;
  background:radial-gradient(circle at 30% 30%,var(--c-blue),transparent 70%);
  animation:cmpFloatA 17s ease-in-out infinite}
.cmp-hero::after{width:400px;height:400px;top:-130px;right:-120px;opacity:.32;
  background:radial-gradient(circle at 70% 30%,var(--c-green-alt),transparent 70%);
  animation:cmpFloatB 21s ease-in-out infinite}
.cmp-hero-inner{position:relative;z-index:1}
@keyframes cmpFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(38px,28px) scale(1.08)}}
@keyframes cmpFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,38px) scale(1.12)}}

/* animated gradient headline — text-safe stops only (>=4.5:1 as large text) */
.cmp-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:cmpSheen 9s linear infinite}
@keyframes cmpSheen{to{background-position:220% center}}

/* softly glowing eyebrow pill */
.cmp-eyebrow{animation:cmpPillGlow 3.6s ease-in-out infinite}
@keyframes cmpPillGlow{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 ---- */
.cmp-btn{position:relative;overflow:hidden}
.cmp-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)}
.cmp-btn:hover::after{animation:cmpBtnShine .75s ease}
@keyframes cmpBtnShine{to{transform:translateX(320%) skewX(-18deg)}}

/* ---- Comparison table: highlighted column glow, ribbon, row hover ---- */
.cmp-table thead th.cmp-col-hi{box-shadow:inset 0 3px 0 var(--c-orange),0 0 20px rgba(1,223,13,.30)}
.cmp-rec-ribbon{display:block;width:fit-content;margin:7px 0 0;font-family:var(--font-button);
  font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--c-card);color:var(--c-green-text);
  position:relative;overflow:hidden}
.cmp-rec-ribbon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(1,223,13,.40) 50%,transparent 65%);
  transform:translateX(-150%);animation:cmpRibbon 3.2s ease-in-out infinite}
@keyframes cmpRibbon{0%,55%{transform:translateX(-150%)}100%{transform:translateX(150%)}}
.cmp-table tbody tr{transition:background .18s ease}
.cmp-table tbody tr:hover>th,
.cmp-table tbody tr:hover>td:not(.cmp-col-hi){background:var(--c-chip)}
.cmp-table tbody tr:hover>td.cmp-col-hi{filter:brightness(.97)}

/* ---- Instrument cards: hover lift + animated gradient border on the pick ---- */
.cmp-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cmp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--c-blue)}
.cmp-card-hi{border:2px solid transparent;
  background:linear-gradient(var(--c-card),var(--c-card)) padding-box,
    linear-gradient(120deg,var(--c-green),var(--c-blue),var(--c-green-alt),var(--c-green)) border-box;
  background-size:100% 100%,220% 100%;animation:cmpBorder 6s linear infinite}
.cmp-card-hi:hover{transform:translateY(-6px)}
@keyframes cmpBorder{to{background-position:0 0,220% 0}}
/* shimmer on the "Higher yield" badge */
.cmp-badge-hi{position:relative;overflow:hidden}
.cmp-badge-hi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(31,122,20,.35) 50%,transparent 70%);
  transform:translateX(-150%);animation:cmpBadge 3.4s ease-in-out infinite}
@keyframes cmpBadge{0%,55%{transform:translateX(-150%)}100%{transform:translateX(150%)}}
/* headline figure pops when its card reveals */
.cmp-reveal.cmp-in .cmp-card-figure{animation:cmpPop .55s cubic-bezier(.2,.7,.3,1.3) both}
@keyframes cmpPop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
/* stagger the four cards as the row reveals */
.cmp-cards .cmp-reveal:nth-child(2){transition-delay:.08s}
.cmp-cards .cmp-reveal:nth-child(3){transition-delay:.16s}
.cmp-cards .cmp-reveal:nth-child(4){transition-delay:.24s}

/* ---- How-to-combine: icon pop + gradient fill on hover ---- */
.cmp-mix-item{transition:transform .25s ease,box-shadow .25s ease}
.cmp-mix-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.cmp-mix-ico{transition:transform .3s ease,background .3s ease}
.cmp-mix-item:hover .cmp-mix-ico{transform:rotate(-6deg) scale(1.08);
  background:linear-gradient(135deg,var(--c-blue),var(--c-green-alt))}
.cmp-mix-item:hover .cmp-mix-ico svg{stroke:#fff}

/* ---- FAQ: hover highlight + smooth open ---- */
.cmp-q{transition:box-shadow .2s ease,border-color .2s ease}
.cmp-q:hover{border-color:var(--c-blue);box-shadow:var(--shadow-hover)}
.cmp-q[open]{border-color:var(--c-blue)}
.cmp-q[open] p{animation:cmpFaq .35s ease both}
@keyframes cmpFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- Closing CTA: brand gradient + drifting glow + slow sheen ---- */
.cmp-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%)}
.cmp-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:cmpFloatB 15s ease-in-out infinite}
.cmp-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:cmpCtaSheen 6.5s ease-in-out infinite}
@keyframes cmpCtaSheen{0%,68%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ---- Reduced motion: kill every decorative animation ---- */
@media(prefers-reduced-motion:reduce){
  .cmp-hero::before,.cmp-hero::after,.cmp-hero-inner h1,.cmp-eyebrow,
  .cmp-btn::after,.cmp-rec-ribbon::after,.cmp-card-hi,.cmp-badge-hi::after,
  .cmp-reveal.cmp-in .cmp-card-figure,.cmp-cta::before,.cmp-cta::after{
    animation:none!important}
  .cmp-cards .cmp-reveal{transition-delay:0s!important}
}