/* sport chips */
.chips-bar { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.sport-chip { display:inline-block; padding:0.35rem 1rem; background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-meta); font-size:0.8rem; cursor:pointer; transform:skewX(-6deg); transition:background 0.18s,border-color 0.18s,color 0.18s; color:var(--text); }
.sport-chip span { display:inline-block; transform:skewX(6deg); }
.sport-chip:hover,.sport-chip.is-active { background:var(--accent); border-color:var(--accent-strong); color:var(--on-accent); }
/* intent chips */
.intent-chips { display:flex; flex-wrap:wrap; gap:0.75rem; }
.intent-chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1.25rem; background:var(--pitch); color:var(--text-light); border:1.5px solid var(--accent); border-radius:var(--radius); font-family:var(--font-meta); font-size:0.85rem; text-decoration:none; transform:skewX(-6deg); transition:background 0.18s,color 0.18s; }
.intent-chip span { transform:skewX(6deg); display:inline-block; }
.intent-chip:hover { background:var(--accent); color:var(--on-accent); }
/* ticker */
.ticker-wrap { overflow:hidden; background:var(--pitch); padding:0.4rem 0; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); }
.ticker-track { display:flex; width:max-content; animation:ticker-scroll 30s linear infinite; }
@media (prefers-reduced-motion:reduce){ .ticker-track { animation:none; } }
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { font-family:var(--font-meta); font-size:0.8rem; color:var(--text-light); padding:0 2rem; white-space:nowrap; border-right:1px solid rgba(168,181,196,0.3); }
.ticker-item .ticker-sep { color:var(--accent); margin:0 0.4rem; }
/* tabs */
.tab-list { display:flex; gap:0; border-bottom:2px solid var(--border); overflow-x:auto; margin-bottom:1.5rem; }
.tab-btn { padding:0.6rem 1.25rem; background:none; border:none; border-bottom:3px solid transparent; font-family:var(--font); font-size:0.9rem; font-weight:600; cursor:pointer; color:var(--muted); white-space:nowrap; margin-bottom:-2px; transition:color 0.15s,border-color 0.15s; }
.tab-btn:hover { color:var(--text); }
.tab-btn.is-active { color:var(--accent-strong); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }
/* seg control */
.seg-control { display:inline-flex; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; gap:0; }
.seg-btn { padding:0.45rem 1.1rem; background:none; border:none; font-family:var(--font-meta); font-size:0.82rem; cursor:pointer; color:var(--muted); transition:background 0.15s,color 0.15s; }
.seg-btn.is-active { background:var(--accent); color:var(--on-accent); }
.seg-panel { display:none; }
.seg-panel.is-active { display:block; }
/* scoreboard cards */
.scoreboard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media(max-width:640px){ .scoreboard-grid { grid-template-columns:1fr; } }
@media(min-width:641px) and (max-width:780px){ .scoreboard-grid { grid-template-columns:repeat(2,1fr); } }
.score-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem; border-top:3px solid var(--gold); box-shadow:var(--shadow); transition:transform 0.18s,box-shadow 0.18s; }
.score-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,35,50,0.13); }
.score-card__label { font-family:var(--font-meta); font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.4rem; }
.score-card__value { font-family:var(--font-display); font-size:2rem; color:var(--text); line-height:1.1; }
.score-card__sub { font-size:0.82rem; color:var(--muted); margin-top:0.3rem; }
/* market cards */
.market-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:2rem; }
@media(max-width:640px){ .market-grid { grid-template-columns:1fr; } }
@media(min-width:641px) and (max-width:780px){ .market-grid { grid-template-columns:repeat(2,1fr); } }
.market-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem 1rem; transition:transform 0.18s,border-color 0.18s; cursor:default; }
.market-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.market-card__sport { font-family:var(--font-meta); font-size:0.72rem; color:var(--accent-strong); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.35rem; }
.market-card__name { font-weight:700; font-size:1rem; color:var(--text); margin-bottom:0.3rem; }
.market-card__desc { font-size:0.85rem; color:var(--muted); }
/* promo cards */
.promo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-bottom:2rem; }
@media(max-width:640px){ .promo-grid { grid-template-columns:1fr; } }
.promo-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; position:relative; overflow:hidden; transition:box-shadow 0.18s; }
.promo-card:hover { box-shadow:var(--shadow); }
.promo-card::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(46,230,107,0) 60%,rgba(46,230,107,0.12) 100%); opacity:0; transition:opacity 0.3s; pointer-events:none; }
.promo-card:hover::after { opacity:1; }
.promo-card__badge { display:inline-block; background:var(--accent); color:var(--on-accent); font-family:var(--font-meta); font-size:0.72rem; padding:0.2rem 0.6rem; border-radius:2px; margin-bottom:0.75rem; }
.promo-card__title { font-family:var(--font-display); font-size:1.3rem; color:var(--text); margin-bottom:0.5rem; }
.promo-card__desc { font-size:0.88rem; color:var(--muted); }
.promo-card.is-visible .promo-card__detail { display:block; }
/* method cards */
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
@media(max-width:640px){ .method-grid { grid-template-columns:1fr 1fr; } }
.method-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1rem; text-align:center; transition:border-color 0.18s,transform 0.18s; }
.method-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.method-card__icon { font-size:1.75rem; margin-bottom:0.4rem; }
.method-card__name { font-weight:600; font-size:0.9rem; color:var(--text); }
.method-card__meta { font-family:var(--font-meta); font-size:0.75rem; color:var(--muted); }
/* platform cards */
.platform-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-bottom:2rem; }
@media(max-width:640px){ .platform-grid { grid-template-columns:1fr; } }
.platform-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; }
.platform-card__icon { font-size:2.5rem; margin-bottom:0.75rem; }
.platform-card__name { font-family:var(--font-display); font-size:1.4rem; margin-bottom:0.4rem; }
.platform-card__desc { font-size:0.88rem; color:var(--muted); }
/* path cards */
.path-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-bottom:2rem; }
@media(max-width:640px){ .path-grid { grid-template-columns:1fr; } }
.path-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:border-color 0.18s,box-shadow 0.18s; }
.path-card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.path-card__heading { font-weight:700; font-size:1rem; margin-bottom:0.4rem; color:var(--text); }
.path-card__desc { font-size:0.88rem; color:var(--muted); }
/* resource grid */
.resource-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
@media(max-width:640px){ .resource-grid { grid-template-columns:1fr; } }
.resource-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1rem 1.25rem; transition:box-shadow 0.18s; }
.resource-card:hover { box-shadow:var(--shadow); }
.resource-card__name { font-weight:700; font-size:0.95rem; margin-bottom:0.25rem; color:var(--text); }
.resource-card__desc { font-size:0.83rem; color:var(--muted); }
/* doc card */
.doc-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem; transition:border-color 0.18s; }
.doc-card:hover { border-color:var(--accent-strong); }
/* timeline */
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:0.45rem; top:0; bottom:0; width:2px; background:var(--border); }
.timeline-item { position:relative; margin-bottom:1.75rem; padding-left:1.25rem; }
.timeline-item::before { content:''; position:absolute; left:-1.65rem; top:0.4rem; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--accent-strong); }
.timeline-item__label { font-family:var(--font-meta); font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.2rem; }
.timeline-item__title { font-weight:700; font-size:1rem; color:var(--text); margin-bottom:0.25rem; }
.timeline-item__desc { font-size:0.88rem; color:var(--muted); }
/* step list */
.step-list { list-style:none; padding:0; counter-reset:steps; }
.step-item { counter-increment:steps; display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; padding:1rem; background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); transition:border-color 0.18s; }
.step-item.is-active { border-color:var(--accent); }
.step-item::before { content:counter(steps); display:flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; background:var(--accent); color:var(--on-accent); font-family:var(--font-meta); font-size:0.9rem; font-weight:700; border-radius:50%; flex-shrink:0; }
.step-item__title { font-weight:700; margin-bottom:0.2rem; color:var(--text); }
.step-item__desc { font-size:0.88rem; color:var(--muted); }
/* horizontal stepper */
.h-stepper { display:flex; gap:0; overflow-x:auto; margin-bottom:1.5rem; }
.h-step { flex:1; padding:1.25rem; background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); display:none; }
.h-step.is-active { display:block; }
.stepper-nav { display:flex; gap:0.75rem; margin-top:1rem; }
/* comparison table */
.compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:2rem; }
.compare-table { width:100%; border-collapse:collapse; min-width:480px; }
.compare-table th { background:var(--pitch); color:var(--text-light); font-family:var(--font-meta); font-size:0.8rem; text-align:left; padding:0.6rem 1rem; }
.compare-table td { padding:0.6rem 1rem; border-bottom:1px solid var(--border); font-size:0.88rem; color:var(--text); }
.compare-table tr:hover td { background:rgba(46,230,107,0.05); }
.compare-table .tick { color:var(--accent-strong); font-weight:700; }
.compare-table .cross { color:#d44; }
/* methods table */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:2rem; }
.data-table { width:100%; border-collapse:collapse; min-width:540px; font-size:0.88rem; }
.data-table thead th { background:var(--pitch); color:var(--text-light); font-family:var(--font-meta); font-size:0.78rem; text-align:left; padding:0.55rem 0.9rem; white-space:nowrap; }
.data-table tbody tr:nth-child(even) { background:rgba(46,230,107,0.04); }
.data-table tbody td { padding:0.55rem 0.9rem; border-bottom:1px solid var(--border); color:var(--text); }
.data-table tbody tr:hover td { background:rgba(46,230,107,0.08); }
.expandable-row-detail { display:none; }
.expandable-row-detail.is-open { display:table-row; }
.expandable-row-detail td { background:rgba(46,230,107,0.04); font-size:0.84rem; color:var(--muted); }
/* FAQ */
.faq-list { margin-bottom:2rem; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-trigger { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none; padding:1rem 0; font-size:1rem; font-weight:600; color:var(--text); cursor:pointer; text-align:left; gap:1rem; }
.faq-trigger .acc-icon { font-family:var(--font-meta); font-size:1.1rem; color:var(--accent-strong); transition:transform 0.2s; flex-shrink:0; }
.faq-item.is-open .faq-trigger .acc-icon { transform:rotate(45deg); }
.faq-body { display:none; padding:0 0 1rem; font-size:0.92rem; color:var(--muted); word-break:break-word; overflow-wrap:break-word; }
.faq-item.is-open .faq-body { display:block; }
/* general accordion */
.accordion-item { border-bottom:1px solid var(--border); }
.accordion-trigger { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none; padding:0.85rem 0; font-size:0.95rem; font-weight:600; color:var(--text); cursor:pointer; text-align:left; gap:1rem; }
.accordion-body { display:none; padding:0 0 0.85rem; font-size:0.9rem; color:var(--muted); word-break:break-word; overflow-wrap:break-word; }
.accordion-item.is-open .accordion-body { display:block; }
/* checklist accordion */
.checklist-item { border-bottom:1px solid var(--border); }
.checklist-trigger { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none; padding:0.85rem 0; font-size:0.95rem; font-weight:600; color:var(--text); cursor:pointer; text-align:left; }
.checklist-body { display:none; padding:0 0 0.85rem; font-size:0.9rem; color:var(--muted); }
.checklist-item.is-expanded .checklist-body { display:block; }
/* dense list */
.dense-list { list-style:none; padding:0; margin:0; }
.dense-list li { display:block; padding:1.5rem 0; }
.dense-list li + li { border-top:1px solid var(--border); padding-top:1.5rem; }
.dense-list__marker { display:block; font-weight:600; color:var(--accent-strong); margin-bottom:0.5rem; font-family:var(--font-meta); font-size:0.82rem; text-transform:uppercase; }
/* gov link */
.gov-link { display:inline-flex; align-items:center; gap:0.3rem; color:var(--link-on-dark); text-decoration:underline; text-underline-offset:3px; font-weight:500; transition:color 0.15s; }
.gov-link:hover { color:var(--link-on-dark-hover); }
.band-pitch .gov-link,.band-bg .gov-link { color:var(--link-on-dark); }
.gov-link-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
/* rg callout */
.rg-callout { background:var(--pitch); color:var(--text-light); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1.25rem 1.5rem; margin-bottom:2rem; word-break:break-word; overflow-wrap:break-word; }
.rg-callout * { color:inherit; }
.rg-callout__title { font-family:var(--font-display); font-size:1.1rem; margin-bottom:0.4rem; }
/* callout generic */
.callout { background:rgba(46,230,107,0.08); border:1.5px solid var(--accent); border-radius:var(--radius); padding:1.25rem; margin-bottom:1.5rem; word-break:break-word; overflow-wrap:break-word; }
.callout--warn { background:rgba(212,160,23,0.1); border-color:var(--gold); }
.callout--warn * { color:var(--text); }
/* alert box */
.alert-box { background:rgba(212,160,23,0.12); border:2px solid var(--gold); border-radius:var(--radius); padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.alert-box__title { font-weight:700; color:var(--text); margin-bottom:0.4rem; }
.alert-box__body { font-size:0.9rem; color:var(--muted); }
/* phone mockup */
.device-wrap { display:flex; justify-content:center; margin:2rem 0; }
.device-frame { width:220px; height:420px; border:4px solid var(--pitch); border-radius:32px; background:var(--bg-elevated); box-shadow:var(--shadow); overflow:hidden; position:relative; }
.device-frame::before { content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:60px; height:6px; background:var(--pitch); border-radius:3px; }
.device-screen { position:absolute; inset:26px 0 0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; }
/* affiliate strip */
.affiliate-strip { background:var(--pitch); color:var(--text-light); padding:0.55rem 0; font-family:var(--font-meta); font-size:0.78rem; text-align:center; border-bottom:2px solid var(--accent); }
.affiliate-strip * { color:inherit; }
/* sponsor badge */
.sponsored-badge { display:inline-block; background:var(--gold); color:#1a2332; font-family:var(--font-meta); font-size:0.7rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:2px; text-transform:uppercase; letter-spacing:0.06em; margin-left:0.4rem; vertical-align:middle; }
/* cookie badge */
.cookie-badge { display:inline-block; padding:0.2rem 0.55rem; border-radius:12px; font-family:var(--font-meta); font-size:0.72rem; font-weight:600; }
.cookie-badge--essential { background:rgba(46,230,107,0.15); color:var(--accent-strong); }
.cookie-badge--analytics { background:rgba(212,160,23,0.15); color:#a07c10; }
.cookie-badge--marketing { background:rgba(200,60,60,0.12); color:#a02020; }
/* disclosure card */
.disclosure-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem; transition:box-shadow 0.18s,border-color 0.18s; }
.disclosure-card:hover { box-shadow:var(--shadow); border-color:var(--accent); }
.disclosure-card__term { font-weight:700; color:var(--text); margin-bottom:0.35rem; }
.disclosure-card__body { font-size:0.88rem; color:var(--muted); }
/* toc sidebar */
#toc-sidebar { position:sticky; top:80px; font-size:0.85rem; }
#toc-sidebar a { display:block; color:var(--muted); text-decoration:none; padding:0.3rem 0.6rem; border-left:2px solid var(--border); transition:color 0.15s,border-color 0.15s; }
#toc-sidebar a:hover,#toc-sidebar a.is-active { color:var(--accent-strong); border-left-color:var(--accent); }
/* progress steps */
.progress-steps { display:flex; gap:0; margin-bottom:2rem; }
.progress-step { flex:1; text-align:center; padding:0.6rem 0.5rem; font-family:var(--font-meta); font-size:0.75rem; background:var(--bg-elevated); border:1.5px solid var(--border); color:var(--muted); position:relative; }
.progress-step.is-done { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.progress-step.is-current { border-color:var(--accent-strong); color:var(--accent-strong); font-weight:700; }
/* faq search */
.faq-search-wrap { margin-bottom:1.5rem; }
#faq-search { width:100%; padding:0.65rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font); font-size:0.95rem; background:var(--bg-elevated); color:var(--text); outline:none; }
#faq-search:focus { border-color:var(--accent); }
/* reading progress */
#reading-progress { position:fixed; top:0; left:0; height:3px; background:var(--accent); z-index:2000; width:0; transition:width 0.1s; }
/* anchor highlight */
:target { animation:anchor-pulse 1.2s ease; }
@keyframes anchor-pulse { 0%{background:rgba(46,230,107,0.18)} 100%{background:transparent} }
/* content link underline */
.content-body a { color:var(--link); text-decoration:underline; text-underline-offset:3px; transition:color 0.15s; }
.content-body a:hover { color:var(--link-hover); }
/* term highlight */
.term-highlight { background:rgba(212,160,23,0.18); padding:0.1em 0.25em; border-radius:2px; font-weight:600; }
/* flip card */
.flip-card { height:280px; perspective:900px; }
.flip-card__inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 0.5s; }
.flip-card:hover .flip-card__inner { transform:rotateY(180deg); }
.flip-card__front,.flip-card__back { position:absolute; inset:0; overflow-y:auto; backface-visibility:hidden; border-radius:var(--radius); padding:1.25rem; border:1.5px solid var(--border); }
.flip-card__front { background:var(--bg-elevated); }
.flip-card__back { background:var(--pitch); color:var(--text-light); transform:rotateY(180deg); }
.flip-card__back * { color:inherit; }
@media(prefers-reduced-motion:reduce){ .flip-card__inner { transition:none; } }