/* ============================================================
   Exness Trading Bridge — Components (trading-bridge.css)
   ============================================================ */

/* ---------- Panels & cards (soft-brutalism) ---------- */
.panel{background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-brut-sm)}
.panel-2{background:var(--panel-2);border:2px solid var(--border-strong);border-radius:var(--radius);padding:clamp(18px,3vw,28px)}
.panel-flat{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);padding:clamp(18px,3vw,28px)}

/* panel_hover_lift */
.edu-panel{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);padding:clamp(18px,3vw,26px);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.edu-panel:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-brut-sm)}
@media (prefers-reduced-motion:reduce){.edu-panel{transition:none}.edu-panel:hover{transform:none}}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(40px,7vw,90px)}
.hero-grid{display:grid;gap:var(--gap);align-items:center;grid-template-columns:1fr}
@media(min-width:780px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero h1{margin-bottom:1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}

/* animated_headline / shiny text */
.shiny-text{background:linear-gradient(90deg,var(--text-light) 0%,var(--text-light) 40%,var(--system) 50%,var(--text-light) 60%,var(--text-light) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shiny 4s linear infinite}
@keyframes shiny{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.shiny-text{animation:none;color:var(--text-light);-webkit-text-fill-color:var(--text-light)}}

/* ---------- Ticker marquee ---------- */
.ticker-marquee{overflow:hidden;background:var(--dark);border-block:2px solid var(--border-strong);color:var(--dark-ink)}
.ticker-marquee *{color:inherit}
.ticker-viewport{overflow:hidden}
.ticker-track{display:flex;gap:2.2rem;white-space:nowrap;padding:.6rem 0;width:max-content;animation:marquee 28s linear infinite}
.ticker-viewport:hover .ticker-track,.ticker-viewport:focus-within .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem}
.ticker-item .up{color:var(--bull)}
.ticker-item .down{color:var(--bear)}

/* ---------- Page header ---------- */
.page-header{background:var(--panel-2);border-bottom:2px solid var(--border-strong);padding-block:clamp(36px,6vw,64px)}
.page-header .crumbs{font-size:.82rem;color:var(--text-muted);margin-bottom:.8rem}

/* ---------- Tabs ---------- */
.tab-list{display:flex;flex-wrap:wrap;gap:.5rem;border-bottom:2px solid var(--border);margin-bottom:1.5rem;padding-bottom:.4rem}
.tab-btn{padding:.65rem 1.1rem;font-weight:700;border:2px solid transparent;border-radius:var(--radius-sm);color:var(--text-muted)}
.tab-btn.is-active{background:var(--panel);border-color:var(--border-strong);color:var(--text-light);box-shadow:var(--shadow-brut-sm)}
.tab-panel{display:none;animation:fade .3s ease}
.tab-panel.is-active{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}

/* ---------- Segmented control ---------- */
.seg-control{display:inline-flex;gap:.25rem;background:var(--panel-2);border:2px solid var(--border-strong);border-radius:999px;padding:.25rem}
.seg-btn{padding:.5rem 1.1rem;border-radius:999px;font-weight:700;color:var(--text-muted)}
.seg-btn.is-active{background:var(--bull);color:#06251c}
.seg-panel{display:none;margin-top:1.5rem}
.seg-panel.is-active{display:block}

/* feature pills / category pills / toggle */
.pill-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.pill{padding:.45rem 1rem;border:2px solid var(--border);border-radius:999px;font-weight:700;font-size:.9rem;color:var(--text-muted)}
.pill.is-active{background:var(--system);border-color:var(--border-strong);color:#fff}
.toggle-switch{display:inline-flex;border:2px solid var(--border-strong);border-radius:999px;overflow:hidden}
.toggle-switch button{padding:.5rem 1.2rem;font-weight:700;color:var(--text-muted)}
.toggle-switch button.is-active{background:var(--text-light);color:#fff}

/* ---------- Accordion (shared) ---------- */
.accordion-item,.faq-item,.checklist-item{border:2px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.75rem;background:var(--panel);overflow:hidden}
.accordion-item.open,.faq-item.open,.checklist-item.open{border-color:var(--border-strong)}
.accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;padding:1rem 1.2rem;font-weight:700;font-family:var(--ff-display)}
.accordion-trigger::after{content:"+";font-size:1.4rem;line-height:1;color:var(--system);flex-shrink:0;transition:transform .2s ease}
.accordion-item.open .accordion-trigger::after,.faq-item.open .accordion-trigger::after,.checklist-item.open .accordion-trigger::after{content:"\2212"}
.accordion-body,.faq-body,.checklist-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
@media (prefers-reduced-motion:reduce){.accordion-body,.faq-body,.checklist-body{transition:none}}
.accordion-body>div,.faq-body>div,.checklist-body>div{padding:0 1.2rem 1.2rem}

/* expand cards */
.expand-card{border:2px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden;margin-bottom:.75rem}
.expand-card.open{border-color:var(--border-strong)}
.expand-trigger{width:100%;text-align:left;padding:1rem 1.2rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.expand-trigger::after{content:"\203A";transition:transform .2s ease;font-size:1.3rem;color:var(--system)}
.expand-card.open .expand-trigger::after{transform:rotate(90deg)}
.expand-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.expand-card.open .expand-body{max-height:600px}
.expand-body>div{padding:0 1.2rem 1.2rem}
@media (prefers-reduced-motion:reduce){.expand-body{transition:none}}

/* ---------- Comparison matrix / tables ---------- */
.table-wrap{overflow-x:auto;border:2px solid var(--border-strong);border-radius:var(--radius)}
.matrix,.spec-table{min-width:560px;background:var(--panel)}
.matrix th,.matrix td,.spec-table th,.spec-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-size:.95rem}
.matrix thead th,.spec-table thead th{background:var(--panel-2);font-family:var(--ff-display);font-weight:800;cursor:pointer;position:relative;user-select:none}
.matrix thead th[data-sort]::after,.spec-table thead th[data-sort]::after{content:"\2195";font-size:.7rem;margin-left:.4rem;color:var(--text-muted)}
.matrix thead th.sort-asc::after{content:"\2191";color:var(--system)}
.matrix thead th.sort-desc::after{content:"\2193";color:var(--system)}
.matrix tbody tr:hover,.spec-table tbody tr:hover{background:var(--panel-2)}
.matrix tbody tr.is-hl{background:rgba(59,130,246,.1)}
.matrix tr[hidden]{display:none}
.cell-yes{color:var(--bull);font-weight:800}
.cell-no{color:var(--bear);font-weight:800}

/* tooltip on headers / terms */
.has-tip{border-bottom:1px dotted var(--text-muted);cursor:help}
.tip-pop{position:fixed;z-index:200;max-width:240px;background:var(--dark);color:var(--dark-ink);padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;box-shadow:var(--shadow-soft);pointer-events:none}
.tip-pop *{color:inherit}

/* filter chips */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.chip{padding:.4rem .9rem;border:2px solid var(--border);border-radius:999px;font-weight:700;font-size:.85rem;color:var(--text-muted)}
.chip.is-active{background:var(--bull);border-color:var(--border-strong);color:#06251c}

/* ---------- Feature grid / cards ---------- */
.feature-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius);padding:clamp(18px,3vw,26px);box-shadow:var(--shadow-brut-sm)}
.feature-card .ico{width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--panel-2);border:2px solid var(--border-strong);font-size:1.4rem;margin-bottom:1rem}

/* benefit card stack / flip */
.flip-card{perspective:1000px;min-height:200px}
.flip-inner{position:relative;width:100%;height:100%;min-height:200px;transition:transform .5s ease;transform-style:preserve-3d}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border:2px solid var(--border-strong);border-radius:var(--radius);padding:1.4rem;background:var(--panel)}
.flip-back{transform:rotateY(180deg);background:var(--panel-2)}
@media (prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* ---------- Steps / timeline / wizard ---------- */
.steps{display:grid;gap:1rem;counter-reset:step}
.step{position:relative;background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius);padding:1.2rem 1.2rem 1.2rem 3.6rem;box-shadow:var(--shadow-brut-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:1rem;top:1.1rem;width:34px;height:34px;border-radius:50%;background:var(--bull);color:#06251c;display:grid;place-items:center;font-weight:800;border:2px solid var(--border-strong)}
.step h4{margin-bottom:.3rem}

.timeline{position:relative;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:3px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:1.6rem}
.timeline-item::before{content:"";position:absolute;left:-2rem;top:4px;width:20px;height:20px;border-radius:50%;background:var(--panel);border:3px solid var(--system)}
.timeline-item.is-in::before{background:var(--system)}

.h-timeline{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem}
.h-timeline .step{min-width:220px;flex:0 0 auto}

/* step connector animation */
.connector{height:3px;background:var(--border);position:relative;overflow:hidden}
.connector::after{content:"";position:absolute;inset:0;background:var(--bull);transform:scaleX(0);transform-origin:left;transition:transform .8s ease}
.connector.is-in::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.connector::after{transition:none;transform:scaleX(1)}}

/* step carousel */
.carousel{overflow:hidden}
.carousel-track{display:flex;transition:transform .4s ease}
@media (prefers-reduced-motion:reduce){.carousel-track{transition:none}}
.carousel-slide{min-width:100%;padding:.4rem}
.carousel-nav{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.carousel-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border-strong);background:var(--panel)}
.carousel-dot.is-active{background:var(--bull)}

/* ---------- Platform mock frames ---------- */
.mock-frame{border:2px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow-brut)}
.mock-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:var(--panel-2);border-bottom:2px solid var(--border-strong)}
.mock-bar i{width:11px;height:11px;border-radius:50%;display:inline-block;border:1.5px solid var(--border-strong)}
.mock-bar i:nth-child(1){background:var(--bear)}
.mock-bar i:nth-child(2){background:#f5b301}
.mock-bar i:nth-child(3){background:var(--bull)}
.mock-body{padding:1.2rem;min-height:240px;background:linear-gradient(180deg,var(--panel),var(--panel-2))}

/* mock chart pan */
.chart-pan{overflow:hidden;border:2px solid var(--border-strong);border-radius:var(--radius);background:var(--panel-2)}
.chart-pan-img{min-width:160%;height:240px;background:repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(20,24,32,.06) 39px),linear-gradient(180deg,rgba(0,197,130,.12),transparent);animation:pan 18s linear infinite alternate}
@keyframes pan{to{transform:translateX(-30%)}}
@media (prefers-reduced-motion:reduce){.chart-pan-img{animation:none}}

/* device mock switcher */
.device-frame{display:none}
.device-frame.is-active{display:block}

/* video poster */
.video-poster{position:relative;border:2px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--dark);min-height:240px;display:grid;place-items:center}
.video-poster *{color:var(--dark-ink)}
.video-poster .play{width:64px;height:64px;border-radius:50%;background:var(--bull);border:2px solid var(--border-strong);display:grid;place-items:center;color:#06251c;font-size:1.4rem}

/* ---------- Gallery / lightbox ---------- */
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery-thumb{border:2px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:var(--panel-2);aspect-ratio:16/10;display:grid;place-items:center;font-weight:700;color:var(--text-muted)}
.gallery-thumb:hover{border-color:var(--system)}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(20,24,32,.9);display:none;place-items:center;padding:2rem}
.lightbox.is-open{display:grid}
.lightbox *{color:#fff}
.lightbox-content{max-width:900px;width:100%;background:var(--panel);border:2px solid #fff;border-radius:var(--radius);padding:2rem;min-height:300px}
.lightbox-content *{color:var(--text-light)}
.lightbox-close{position:absolute;top:1rem;right:1rem;font-size:2rem;color:#fff}

/* before/after slider */
.ba-slider{position:relative;overflow:hidden;border:2px solid var(--border-strong);border-radius:var(--radius);aspect-ratio:16/9;background:var(--panel-2);user-select:none}
.ba-before,.ba-after{position:absolute;inset:0;display:grid;place-items:center;font-weight:800}
.ba-after{background:var(--dark)}
.ba-after *{color:var(--dark-ink)}
.ba-before{background:var(--panel)}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:4px;background:var(--bull);cursor:ew-resize}
.ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:var(--bull);border:2px solid var(--border-strong);border-radius:50%;display:grid;place-items:center;color:#06251c}

/* screenshot annotator */
.annotate{position:relative;border:2px solid var(--border-strong);border-radius:var(--radius);background:var(--panel-2);min-height:260px}
.annotate-dot{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--system);color:#fff;display:grid;place-items:center;font-weight:800;border:2px solid #fff;cursor:pointer}
.annotate-note{position:absolute;background:var(--dark);color:var(--dark-ink);padding:.5rem .7rem;border-radius:var(--radius-sm);font-size:.82rem;max-width:200px;display:none;z-index:5}
.annotate-note *{color:inherit}
.annotate-dot.is-active + .annotate-note{display:block}

/* ---------- Counters / stats / badges ---------- */
.stat-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-brut-sm)}
.stat .num{font-family:var(--ff-display);font-size:2rem;font-weight:800;color:var(--system)}
.metric-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;background:var(--panel-2);border:2px solid var(--border-strong);font-weight:700;font-size:.8rem}
.metric-badge.pulse::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bull);animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,197,130,.5)}50%{box-shadow:0 0 0 6px rgba(0,197,130,0)}}
@media (prefers-reduced-motion:reduce){.metric-badge.pulse::before{animation:none}}
.last-updated{display:inline-block;font-size:.8rem;color:var(--text-muted);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem}
.status-badge{padding:.2rem .6rem;border-radius:999px;font-size:.78rem;font-weight:800;border:2px solid var(--border-strong)}
.status-badge.ok{background:rgba(0,197,130,.15);color:#06251c}
.status-badge.wait{background:rgba(59,130,246,.15);color:#1e40af}
.status-badge.hold{background:rgba(255,74,90,.15);color:#7a1320}

/* progress ring */
.progress-ring{display:grid;place-items:center}
.progress-ring circle{fill:none;stroke-width:8}
.progress-ring .track{stroke:var(--border)}
.progress-ring .bar{stroke:var(--bull);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1s ease}
@media (prefers-reduced-motion:reduce){.progress-ring .bar{transition:none}}

/* tier ladder */
.ladder{display:grid;gap:.6rem}
.ladder-rung{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:1rem;background:var(--panel)}
.ladder-rung:nth-child(2){background:var(--panel-2)}
.ladder-rung:nth-child(3){background:rgba(0,197,130,.12)}

/* highlight box shimmer */
.highlight-box{position:relative;overflow:hidden;background:var(--panel-2);border:2px solid var(--border-strong);border-radius:var(--radius);padding:1.4rem}
.highlight-box::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 3s ease infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.highlight-box::after{animation:none;display:none}}

/* ---------- Promo code reveal ---------- */
.promo-box{text-align:center;background:var(--dark);color:var(--dark-ink);border:2px solid var(--border-strong);border-radius:var(--radius);padding:2rem}
.promo-box *{color:inherit}
.promo-code{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-display);font-size:1.4rem;font-weight:800;letter-spacing:.1em;background:var(--bull);color:#06251c!important;border:2px solid #fff;border-radius:var(--radius-sm);padding:.6rem 1.2rem;filter:blur(7px);transition:filter .3s ease}
.promo-box.revealed .promo-code{filter:none}
.copy-btn{margin-top:1rem}
.copy-ok{color:var(--bull);font-weight:700;font-size:.85rem;margin-left:.5rem}

/* ---------- TOC / anchor sidebar / scroll spy ---------- */
.doc-layout{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:780px){.doc-layout{grid-template-columns:240px 1fr}}
.toc-sidebar{position:sticky;top:90px;align-self:start;background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);padding:1.2rem}
.toc-sidebar a{display:block;padding:.4rem 0;font-size:.9rem;color:var(--text-muted);border-left:3px solid transparent;padding-left:.6rem}
.toc-sidebar a.is-active{color:var(--text-light);border-left-color:var(--bull);font-weight:700}
.anchor-target{scroll-margin-top:90px}
.anchor-target.flash{animation:anchorflash 1.4s ease}
@keyframes anchorflash{0%{background:rgba(0,197,130,.18)}100%{background:transparent}}

/* read progress */
.read-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--bull);z-index:80}

/* ---------- Callouts / disclaimers ---------- */
.callout{border:2px solid var(--border-strong);border-radius:var(--radius);padding:1.2rem 1.4rem;background:var(--panel-2);border-left:6px solid var(--system)}
.callout.warn{border-left-color:var(--bear)}
.callout.bull{border-left-color:var(--bull)}
.disclaimer{font-size:.85rem;color:var(--text-muted);background:var(--panel);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:1rem}
.warn-dismiss{position:relative}
.warn-dismiss .dismiss-x{position:absolute;top:.6rem;right:.8rem;font-size:1.2rem;font-weight:800;color:var(--text-muted)}
.warn-dismiss[hidden]{display:none}

/* floating callout */
.floating-callout{position:fixed;bottom:90px;right:16px;max-width:280px;background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow-brut-sm);z-index:55;transform:translateY(20px);opacity:0;transition:transform .4s ease,opacity .4s ease}
.floating-callout.is-show{transform:none;opacity:1}
.floating-callout[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.floating-callout{transition:none}}

/* cta banner slide-in */
.cta-banner{background:var(--dark);color:var(--dark-ink);border:2px solid var(--border-strong);border-radius:var(--radius);padding:clamp(24px,4vw,40px);text-align:center;transform:translateY(28px);opacity:0;transition:transform .6s ease,opacity .6s ease}
.cta-banner *{color:inherit}
.cta-banner.is-in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.cta-banner{transition:none;transform:none;opacity:1}}
.cta-banner .btn{margin-top:1.2rem}

/* dual cta band */
.dual-cta{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:640px){.dual-cta{grid-template-columns:repeat(2,1fr)}}
.dual-cta .panel{text-align:center}

/* official cta */
.official-cta{text-align:center;background:var(--panel-2);border:2px solid var(--border-strong);border-radius:var(--radius);padding:clamp(28px,5vw,52px)}
.cta-pulse{animation:ctapulse 2.4s ease infinite}
@keyframes ctapulse{0%,100%{box-shadow:var(--shadow-brut-sm)}50%{box-shadow:0 0 0 8px rgba(0,197,130,.25),var(--shadow-brut-sm)}}
@media (prefers-reduced-motion:reduce){.cta-pulse{animation:none}}

/* sticky cta footer */
.cta-sticky-footer{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:2px solid var(--border-strong);padding:.7rem clamp(16px,4vw,32px);display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:58;transform:translateY(110%);transition:transform .35s ease}
.cta-sticky-footer.is-show{transform:none}
.cta-sticky-footer .lbl{font-weight:700;font-size:.92rem}
@media (prefers-reduced-motion:reduce){.cta-sticky-footer{transition:none}}

/* sticky compare bar */
.compare-bar{position:sticky;top:74px;z-index:40;background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:.7rem 1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;box-shadow:var(--shadow-brut-sm);margin-bottom:1.2rem}
.sticky-section-nav{position:sticky;top:74px;z-index:40;background:var(--panel);border-bottom:2px solid var(--border);display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 0}
.sticky-section-nav a{padding:.4rem .8rem;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--text-muted);white-space:nowrap}
.sticky-section-nav a.is-active{background:var(--bull);color:#06251c}

/* back to top */
.back-to-top{position:fixed;bottom:80px;right:16px;width:48px;height:48px;border-radius:50%;background:var(--text-light);color:#fff;border:2px solid var(--border-strong);display:grid;place-items:center;font-size:1.3rem;z-index:55;opacity:0;pointer-events:none;transition:opacity .3s ease}
.back-to-top *{color:#fff}
.back-to-top.is-show{opacity:1;pointer-events:auto}

/* map frame */
.map-frame{border:2px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:repeating-linear-gradient(45deg,var(--panel-2),var(--panel-2) 16px,var(--panel) 16px,var(--panel) 32px);min-height:240px;display:grid;place-items:center;font-weight:700;color:var(--text-muted)}

/* live search */
.search-field{width:100%;padding:.85rem 1.1rem;border:2px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--panel);font-size:1rem}
.no-results{display:none;text-align:center;color:var(--text-muted);padding:1.5rem}
.no-results.is-show{display:block}

/* parallax */
.parallax{will-change:transform}
@media (prefers-reduced-motion:reduce){.parallax{transform:none!important}}

/* practice flow diagram / pipeline */
.flow-diagram{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.flow-node{flex:1 1 140px;text-align:center;background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:.9rem;font-weight:700}
.flow-arrow{color:var(--system);font-size:1.4rem;font-weight:800}
.pipeline{display:grid;gap:.6rem}
.pipeline-stage{display:flex;align-items:center;gap:.8rem;border:2px solid var(--border);border-radius:var(--radius-sm);padding:.9rem;background:var(--panel)}
.pipeline-stage.done{border-color:var(--bull)}
.pipeline-stage .dot{width:14px;height:14px;border-radius:50%;background:var(--border);flex-shrink:0}
.pipeline-stage.done .dot{background:var(--bull)}

/* status stepper */
.stepper{display:flex;gap:0;counter-reset:sp}
.stepper-step{flex:1;text-align:center;position:relative;padding-top:36px;font-size:.85rem;font-weight:700;color:var(--text-muted)}
.stepper-step::before{counter-increment:sp;content:counter(sp);position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--panel);border:2px solid var(--border-strong);display:grid;place-items:center}
.stepper-step.is-active{color:var(--text-light)}
.stepper-step.is-active::before{background:var(--bull);color:#06251c}
.stepper-step::after{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--border);z-index:-1}
.stepper-step:first-child::after{display:none}

/* hover detail panel */
.hover-detail{position:relative}
.hover-detail .detail-pop{position:absolute;left:0;top:100%;margin-top:.4rem;background:var(--dark);color:var(--dark-ink);padding:.7rem .9rem;border-radius:var(--radius-sm);font-size:.85rem;width:240px;display:none;z-index:30;box-shadow:var(--shadow-soft)}
.hover-detail .detail-pop *{color:inherit}
.hover-detail:hover .detail-pop,.hover-detail:focus-within .detail-pop{display:block}

/* method icon grid + filter region */
.method-grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.method-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:780px){.method-grid{grid-template-columns:repeat(4,1fr)}}
.method-card{text-align:center;background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:1.1rem .8rem;font-weight:700;font-size:.9rem}
.method-card .ico{font-size:1.6rem;margin-bottom:.4rem}
.method-card[hidden]{display:none}

/* values grid */
.values-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.values-grid{grid-template-columns:repeat(3,1fr)}}

/* cookie type cards */
.cookie-card{border:2px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin-bottom:.8rem}
.cookie-card-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;cursor:pointer;font-weight:700}
.cookie-card-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cookie-card.open .cookie-card-body{max-height:400px}
.cookie-card-body>div{padding:0 1.2rem 1.2rem}
@media (prefers-reduced-motion:reduce){.cookie-card-body{transition:none}}

/* info cards */
.info-cards{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:640px){.info-cards{grid-template-columns:repeat(3,1fr)}}

/* helper utilities */
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.tag-bull{color:var(--bull);font-weight:800}
.tag-bear{color:var(--bear);font-weight:800}
.divider{height:2px;background:var(--border);border:0;margin:2rem 0}
.verify{font-size:.78rem;color:var(--text-muted);font-style:italic}
.kbd{display:inline-block;border:2px solid var(--border-strong);border-radius:4px;padding:.05rem .4rem;font-size:.8rem;font-family:monospace;background:var(--panel-2)}