/* ================================
   Comparison page components
   ================================ */

/* Hero VS-block */
.vs-hero {
    padding: 2.5rem 0 1rem;
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.04), transparent);
    border-bottom: 1px solid var(--border);
}
.vs-hero__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
}
.vs-hero__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem;
    font-family: var(--f-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 100px;
}
.vs-hero__title {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4.5vw, 3rem);
}
.vs-hero__subtitle {
    color: var(--text-dim);
    font-size: 1.08rem;
    margin-bottom: 2rem;
    max-width: 700px;
}
.vs-hero__match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    margin: 1.5rem 0;
}
.vs-hero__side {
    text-align: center;
}
.vs-hero__logo {
    height: 60px;
    margin: 0 auto 0.75rem;
    object-fit: contain;
    filter: brightness(1.1);
}
.vs-hero__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--text-bright);
    margin-bottom: 0.4rem;
}
.vs-hero__visit {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    border-radius: var(--r-xs);
}
.vs-hero__vs {
    font-family: var(--f-display);
    font-size: 2.5rem;
    color: var(--cyan);
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

/* TL;DR verdict */

.rounds-heading {
    max-width: var(--container-narrow);
    margin: 3rem auto 0.5rem;
    text-align: left;
}
.rounds-subheading {
    max-width: var(--container-narrow);
    margin: 0 auto 1.5rem;
    color: var(--text-dim);
    font-size: 0.95rem;
}
.tldr {
    margin: 0 auto 2rem;
    max-width: var(--container-narrow);
    padding: 1.5rem 1.75rem;
    background: rgba(0, 217, 255, 0.05);
    border-left: 3px solid var(--cyan);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-style: italic;
    color: var(--text);
    line-height: 1.7;
}
.tldr__label {
    font-family: var(--f-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.5rem;
    font-style: normal;
}
.tldr p { margin: 0 0 0.75rem; }
.tldr p:last-child { margin-bottom: 0; }
.tldr__crosslink {
    margin-top: 1rem !important;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--cyan-dim);
    font-style: normal;
    font-size: 0.92rem;
    color: var(--text-dim);
}
.tldr__crosslink a { color: var(--cyan); border-bottom: 1px dashed var(--cyan-dim); }
.tldr__crosslink a:hover { color: var(--cyan-hot); border-bottom-style: solid; }

.vs-hero__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0.4rem 0.85rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.84rem;
    color: var(--text-muted);
}
.vs-hero__inner { position: relative; }
.vs-hero__meta--corner {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    z-index: 2;
}
@media (max-width: 720px) {
    .vs-hero__meta--corner {
        position: static;
        margin: 0 0 1rem;
    }
}
.vs-hero__meta-item { color: var(--text-dim); }
.vs-hero__meta-item a { color: var(--cyan); }
.vs-hero__meta-sep { color: var(--text-muted); opacity: 0.6; }
.vs-hero__meta-icon { color: var(--cyan); margin-right: 0.2rem; }

.vs-hero__disclosure {
    margin: 1.5rem auto 0;
    max-width: 720px;
    padding: 0.75rem 1.1rem;
    background: rgba(255, 0, 170, 0.04);
    border: 1px solid rgba(255, 0, 170, 0.2);
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
}
.vs-hero__disclosure-icon { color: var(--magenta); font-weight: 700; margin-right: 0.3rem; }
.vs-hero__disclosure a { color: var(--cyan); }

.page-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 1.25rem auto 0;
    max-width: 720px;
    padding: 0.65rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 0.86rem;
}
.page-toc--wide {
    max-width: 100%;
    margin: 1rem 0;
    padding: 0.7rem 1.1rem;
}
.page-toc__label {
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.page-toc a {
    color: var(--cyan);
    border-bottom: 1px dashed var(--cyan-dim);
    padding: 0.15rem 0;
}
.page-toc a:hover { color: var(--cyan-hot); border-bottom-style: solid; }

/* Spec table */
.spec-table-wrap { margin: 2.5rem auto; max-width: var(--container-narrow); }
.spec-table-wrap h2 { margin-bottom: 1rem; }
.spec-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-2);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    overflow: hidden;
}
.spec-table th, .spec-table td {
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.spec-table thead th {
    background: var(--bg-3);
    color: var(--cyan);
    font-family: var(--f-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cyan-dim);
}
.spec-table thead th:first-child { text-align: left; }
.spec-table tbody td:first-child {
    text-align: left;
    color: var(--text-dim);
    font-weight: 500;
}
.spec-table tbody tr:hover td { background: rgba(0, 217, 255, 0.03); }
.spec-table .winner-a { color: var(--win); font-weight: 600; }
.spec-table .winner-b { color: var(--win); font-weight: 600; }
.spec-table .winner-tie { color: var(--draw); font-style: italic; }
.spec-table .winner-depends { color: var(--cyan); font-style: italic; font-size: 0.85rem; }
.spec-table .winner-cell {
    font-family: var(--f-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Round block */
.round {
    max-width: var(--container-narrow);
    margin: 2.5rem auto;
    padding: 1.75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.round__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.round__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--cyan);
    color: var(--bg);
    border-radius: 50%;
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 700;
}
.round__title {
    margin: 0;
    font-size: 1.4rem;
    font-family: var(--f-display);
    color: var(--text-bright);
}
.round__thesis {
    color: var(--text-dim);
    font-style: italic;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}
.round__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}
.round__side {
    padding: 1.25rem;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--border-hi);
}
.round__side--a { border-left-color: var(--cyan); }
.round__side--b { border-left-color: var(--magenta); }
.round__corner {
    font-family: var(--f-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.round__side--a .round__corner { color: var(--cyan); }
.round__side--b .round__corner { color: var(--magenta-hot); }
.round__side h4 {
    font-family: var(--f-display);
    font-size: 1.15rem;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
}
.round__side p {
    color: var(--text-dim);
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 0.5rem;
}
.round__verdict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), transparent);
    border-left: 3px solid var(--cyan);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-weight: 600;
    color: var(--text-bright);
    flex-wrap: wrap;
}
.round__verdict-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--cyan);
    color: var(--bg);
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
}
.round__verdict-text {
    flex: 1;
    min-width: 240px;
}
.round__tally {
    font-family: var(--f-mono);
    font-size: 0.88rem;
    color: var(--cyan);
    padding: 0.25rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--cyan-dim);
    border-radius: 100px;
}
@media (max-width: 720px) {
    .round__cols { grid-template-columns: 1fr; }
}

/* Audience */
.audience {
    max-width: var(--container-narrow);
    margin: 2.5rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.audience__side {
    padding: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.audience__side--a { border-top: 3px solid var(--cyan); }
.audience__side--b { border-top: 3px solid var(--magenta); }
.audience__side h3 {
    font-family: var(--f-display);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-bright);
}
.audience__side ul {
    list-style: none;
    padding: 0;
}
.audience__side li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: var(--text-dim);
    border-bottom: 1px dashed var(--border);
}
.audience__side li:last-child { border-bottom: none; }
.audience__side li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--cyan);
    font-weight: 700;
}
@media (max-width: 720px) {
    .audience { grid-template-columns: 1fr; }
}

/* Scoreline */
.scoreline {
    max-width: var(--container-narrow);
    margin: 2.5rem auto;
    padding: 2rem 1.75rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(255, 0, 170, 0.04));
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-lg);
    text-align: center;
}
.scoreline__label {
    font-family: var(--f-body);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.scoreline__score {
    font-family: var(--f-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--text-bright);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.scoreline__a { color: var(--cyan); }
.scoreline__b { color: var(--magenta); }
.scoreline__sep { color: var(--text-muted); margin: 0 0.5rem; }
.scoreline__verdict {
    font-family: var(--f-display);
    font-size: 1.2rem;
    color: var(--text-bright);
    margin-bottom: 1.5rem;
    font-style: italic;
}
.scoreline__verdict-body {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-style: normal;
    text-align: left;
}

/* Match grid: square 500x500 branded logo on each side, score block in centre.
   Replaces the old number-only scoreline so readers see WHO competed at a glance. */
.scoreline__match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    max-width: 560px;
    margin: 0 auto 1.5rem;
}
.scoreline__side {
    display: flex;
    align-items: center;
    justify-content: center;
}
.scoreline__side--a { justify-content: flex-end; }
.scoreline__side--b { justify-content: flex-start; }
.scoreline__logo {
    width: 120px;
    height: 120px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.scoreline__logo--rect {
    object-fit: contain;
    padding: 0.5rem;
}
.scoreline__core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.scoreline__core .scoreline__score,
.scoreline__core .scoreline__verdict {
    margin: 0;
}
@media (max-width: 560px) {
    .scoreline__match {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .scoreline__side--a, .scoreline__side--b { justify-content: center; }
    .scoreline__logo { width: 96px; height: 96px; }
}

/* FAQ */
.faq {
    max-width: var(--container-narrow);
    margin: 2.5rem auto;
}
.faq__item {
    border-bottom: 1px solid var(--border);
}
.faq__q {
    width: 100%;
    text-align: left;
    padding: 1.15rem 0;
    background: transparent;
    border: none;
    color: var(--text-bright);
    font-family: var(--f-display);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq__q::after {
    content: "+";
    color: var(--cyan);
    font-size: 1.5rem;
    transition: transform var(--t-fast);
}
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-base);
    color: var(--text-dim);
    line-height: 1.7;
}
.faq__a-inner { padding: 0 0 1.15rem; }

/* Final CTA */
.final-cta {
    max-width: var(--container-narrow);
    margin: 2.5rem auto;
    padding: 2rem;
    background: var(--bg-2);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-md);
    text-align: center;
}
.final-cta__eyebrow {
    font-family: var(--f-body);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.final-cta h3 {
    font-family: var(--f-display);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}
.final-cta p {
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}
.final-cta__note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

/* ============================================================
   Head-to-head W/L summary scoreboard (casino-review pages)
   ============================================================ */
.h2h-summary {
    margin: 0 0 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.h2h-summary__title {
    font-family: var(--f-body);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.h2h-summary__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.h2h-summary__cell {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 6px);
}
.h2h-summary__cell--win {
    border-color: rgba(50, 220, 130, 0.5);
    background: linear-gradient(180deg, rgba(50, 220, 130, 0.08), rgba(50, 220, 130, 0.02));
}
.h2h-summary__cell--win .h2h-summary__num { color: #32dc82; }
.h2h-summary__cell--loss {
    border-color: rgba(245, 90, 90, 0.5);
    background: linear-gradient(180deg, rgba(245, 90, 90, 0.08), rgba(245, 90, 90, 0.02));
}
.h2h-summary__cell--loss .h2h-summary__num { color: #f55a5a; }
.h2h-summary__cell--tie {
    border-color: rgba(255, 200, 80, 0.5);
    background: linear-gradient(180deg, rgba(255, 200, 80, 0.08), rgba(255, 200, 80, 0.02));
}
.h2h-summary__cell--tie .h2h-summary__num { color: #ffc850; }
.h2h-summary__cell--pending .h2h-summary__num { color: var(--text-muted); }
.h2h-summary__cell--rate .h2h-summary__num { color: var(--cyan); }
.h2h-summary__num {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.h2h-summary__label {
    font-family: var(--f-body);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}
.h2h-summary__note {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* Per-matchup outcome chip on .compare-teaser inside casino-review pages */
.compare-teaser--win    { border-left: 3px solid #32dc82; }
.compare-teaser--loss   { border-left: 3px solid #f55a5a; }
.compare-teaser--tie    { border-left: 3px solid #ffc850; }
.compare-teaser__outcome {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
    padding: 0.18rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.5rem;
}
.compare-teaser__outcome--win   { color: #32dc82; background: rgba(50, 220, 130, 0.12); }
.compare-teaser__outcome--loss  { color: #f55a5a; background: rgba(245, 90, 90, 0.12); }
.compare-teaser__outcome--tie   { color: #ffc850; background: rgba(255, 200, 80, 0.12); }
.compare-teaser__scoreline {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--text-bright);
    font-size: 0.95rem;
}

/* ============================================================
   Cross-cluster bridges (pillars surface ≥3 sibling clusters)
   ============================================================ */
.cross-cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.cross-cluster-card {
    display: block;
    padding: 1.1rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--t-base);
}
.cross-cluster-card:hover {
    transform: translateY(-2px);
    border-color: var(--cyan-dim);
    box-shadow: var(--shadow-card);
}
.cross-cluster-card--scorecard { border-left: 3px solid var(--cyan); }
.cross-cluster-card--matchup   { border-left: 3px solid #a566ff; }
.cross-cluster-card--best      { border-left: 3px solid #32dc82; }
.cross-cluster-card--blog      { border-left: 3px solid #ffc850; }
.cross-cluster-card__rank {
    font-family: var(--f-body);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.cross-cluster-card__title {
    font-family: var(--f-display);
    font-size: 1.05rem;
    color: var(--text-bright);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.cross-cluster-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.cross-cluster-card__score {
    font-weight: 700;
}
.cross-cluster-card__tagline {
    color: var(--text-muted);
}

/* Related-comparisons: centred header card with gradient eyebrow + balanced grid.
   Bottom spacing collapsed to zero — the next block (cluster-bridges section)
   has its own padding-top from the global section rule, so any extra margin
   here just stacks on top and bloats the gap. */
.related-comparisons {
    margin: 1.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--border);
}
.related-comparisons__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2rem;
}
.related-comparisons__eyebrow {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    background: linear-gradient(90deg, rgba(0, 255, 220, 0.08), rgba(0, 200, 255, 0.08));
    border: 1px solid var(--cyan-dim);
    border-radius: 999px;
    margin-bottom: 1rem;
}
.related-comparisons__title {
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.25;
    color: var(--text-bright);
    margin: 0 0 0.75rem;
    text-align: center;
}
.related-comparisons__subtitle {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.55;
    margin: 0;
    text-align: center;
}
.related-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.related-card {
    display: block;
    padding: 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--t-base);
    border-bottom: 1px solid var(--border);
}
.related-card:hover {
    transform: translateY(-2px);
    border-color: var(--cyan-dim);
    box-shadow: var(--shadow-card);
}
.related-card__eyebrow {
    font-family: var(--f-body);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.4rem;
    font-weight: 700;
}
.related-card__title {
    font-family: var(--f-display);
    font-size: 1.15rem;
    color: var(--text-bright);
    line-height: 1.3;
}

/* Matchup variant of related-card: centred eyebrow + two square logos with VS in
   the middle, no text "Brand A vs Brand B" line — readers parse the brand pair
   from the logos faster than from the text label. Used in Related comparisons
   on /compare/{slug}/ pages. */
.related-card--matchup {
    text-align: center;
    padding: 1.1rem 1rem;
}
.related-card--matchup .related-card__eyebrow {
    text-align: center;
    margin-bottom: 0.85rem;
}
.related-card__match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}
.related-card__logo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.related-card__vs {
    font-family: var(--f-display);
    font-size: 1rem;
    color: var(--cyan);
    font-style: italic;
    font-weight: 600;
}
.related-card__name {
    font-family: var(--f-display);
    font-size: 1rem;
    color: var(--text-bright);
    font-weight: 600;
}

/* Casino card (homepage + listings) */
.casino-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-base);
    border-bottom: 1px solid var(--border);
}
.casino-card:hover { border-color: var(--cyan-dim); }
.casino-card__rank {
    font-family: var(--f-display);
    font-size: 2rem;
    color: var(--cyan);
    line-height: 1;
    min-width: 50px;
    text-align: center;
}
.casino-card__body h3 {
    font-family: var(--f-display);
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    color: var(--text-bright);
}
.casino-card__tagline {
    font-size: 0.92rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.casino-card__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.casino-card__score {
    font-family: var(--f-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cyan);
    text-align: center;
    min-width: 70px;
}

/* Comparison teaser card */
.compare-teaser {
    display: block;
    padding: 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--t-base);
    border-bottom: 1px solid var(--border);
}
.compare-teaser:hover {
    border-color: var(--cyan-dim);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}
.compare-teaser__pair {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-bottom: 0.85rem;
    font-family: var(--f-display);
    color: var(--text-bright);
    min-height: 44px;
}
/* Transparent PNG logo (300x100 ratio). object-fit: contain keeps the brand
   mark intact even though the canvas footprint differs per operator (Stake
   ~60% wide, Roobet ~100%, Rollbit ~96%). filter brightness lifts dark marks
   on the dark page background; max-width keeps the longest brand within bounds. */
.compare-teaser__logo {
    width: auto;
    height: 32px;
    max-width: 110px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(1.1);
}
.compare-teaser__vs {
    color: var(--cyan);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 600;
    flex-shrink: 0;
}
.compare-teaser__score {
    text-align: center;
    font-family: var(--f-mono);
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}
.compare-teaser__category {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Quick Compare widget */
.quick-compare {
    max-width: 100%;
    margin: 2rem 0;
    padding: 2rem 2.25rem;
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.05) 100%);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-md);
}
.quick-compare h2,
.quick-compare h3 {
    text-align: center;
    margin: 0 auto 0.5rem;
}
.quick-compare > p {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* 2-row layout: row 1 = select-A | VS | select-B, row 2 = centered Compare CTA */
.quick-compare__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-row-gap: 1.25rem;
    column-gap: 1rem;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
.quick-compare__row > .btn,
.quick-compare__row > button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: center;
    width: 200px;
    min-width: 200px;
    max-width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.quick-compare__select {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-sm);
    padding: 0.65rem 0.85rem;
    font-family: var(--f-body);
    font-size: 0.95rem;
    width: 100%;
}
.quick-compare__vs {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--cyan);
    padding: 0 0.5rem;
}
.quick-compare__hint {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}
@media (max-width: 600px) {
    .quick-compare__row {
        grid-template-columns: 1fr;
        grid-row-gap: 0.85rem;
    }
    .quick-compare__vs { text-align: center; }
    .quick-compare__row > .btn,
    .quick-compare__row > button[type="submit"] {
        width: 200px;
    }
}

/* Leaderboard table */
.leaderboard {
    max-width: var(--container);
    margin: 2rem auto;
    overflow-x: auto;
}
.leaderboard table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-2);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.leaderboard th, .leaderboard td {
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.leaderboard th {
    background: var(--bg-3);
    color: var(--cyan);
    font-family: var(--f-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cyan-dim);
    cursor: pointer;
    user-select: none;
}
.leaderboard th:hover { color: var(--cyan-hot); }
.leaderboard td:nth-child(2) { text-align: left; }
.leaderboard tbody tr:hover td { background: rgba(0, 217, 255, 0.04); }
.leaderboard__medal {
    font-size: 1.3rem;
}
.leaderboard__medal--gold { color: #FFD700; }
.leaderboard__medal--silver { color: #C0C0C0; }
.leaderboard__medal--bronze { color: #CD7F32; }
.leaderboard__casino-name {
    font-family: var(--f-display);
    color: var(--text-bright);
    font-size: 1rem;
}
.leaderboard__win-rate {
    font-family: var(--f-mono);
    color: var(--cyan);
    font-weight: 700;
}

/* Score bar */
.score-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.4rem 0;
}
.score-bar__label {
    flex: 0 0 140px;
    font-size: 0.88rem;
    color: var(--text-dim);
}
.score-bar__track {
    flex: 1;
    height: 8px;
    background: var(--bg-3);
    border-radius: 4px;
    overflow: hidden;
}
.score-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
    border-radius: 4px;
    transition: width 0.4s ease;
}
.score-bar__value {
    flex: 0 0 35px;
    text-align: right;
    font-family: var(--f-mono);
    font-size: 0.88rem;
    color: var(--cyan);
    font-weight: 700;
}

/* Hero (homepage) */
.hero {
    padding: 4rem 0 2rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.03), transparent);
    border-bottom: 1px solid var(--border);
}
.hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.9rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 100px;
}
.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    margin-bottom: 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.hero__subtitle {
    color: var(--text-dim);
    font-size: 1.15rem;
    max-width: 720px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.hero__cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.hero__stat {
    text-align: center;
}
.hero__stat-value {
    font-family: var(--f-display);
    font-size: 2rem;
    color: var(--cyan);
    line-height: 1;
}
.hero__stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.4rem;
}
@media (max-width: 600px) {
    .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* Comparison grid (listings) */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

/* Casino mini-review */
.casino-hero {
    padding: 2rem 0;
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.04), transparent);
    border-bottom: 1px solid var(--border);
}
.casino-hero__inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
}
.casino-hero__logo-wrap {
    width: 220px;
    height: 220px;
    background: transparent;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 217, 255, 0.12), 0 0 0 1px var(--border);
}
.casino-hero__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Per-operator branded hero image (500×500). Slightly larger frame than the
   plain logo, with cyan-tinted glow to flag it as the editorial-curated visual.
   Used for operators that ship a custom square hero (e.g. betfury500.jpg). */
.casino-hero__image-wrap {
    width: 240px;
    height: 240px;
    background: var(--bg-2);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0, 217, 255, 0.18), 0 0 0 1px var(--cyan-dim);
}
.casino-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.casino-hero__inner--has-hero-image {
    grid-template-columns: 240px 1fr;
}
.casino-hero__verdict {
    color: var(--cyan);
    font-style: italic;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.casino-hero__rating {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.casino-hero__rating-value {
    font-family: var(--f-display);
    font-size: 2.6rem;
    color: var(--acid);
    line-height: 1;
    text-shadow: 0 0 24px rgba(0, 255, 148, 0.45);
}
.casino-hero__rating-suffix {
    font-family: var(--f-mono);
    color: var(--text-dim);
    font-size: 1.2rem;
}
.casino-hero__rating-label {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-left: 0.4rem;
}
.casino-hero__cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.casino-coins {
    margin: 1.5rem 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
}
.casino-coins summary {
    cursor: pointer;
    color: var(--cyan);
    font-weight: 600;
    user-select: none;
}
.casino-coins[open] summary { margin-bottom: 0.85rem; }
.casino-coins__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.casino-coins__chip {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid var(--cyan-dim);
    border-radius: 100px;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    color: var(--cyan);
}
.score-bar-block {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.casino-hero__disclosure {
    margin: 1.25rem 0 0;
    padding: 0.65rem 1rem;
    background: rgba(255, 0, 170, 0.04);
    border: 1px solid rgba(255, 0, 170, 0.2);
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.casino-hero__disclosure-icon { color: var(--magenta); font-weight: 700; margin-right: 0.3rem; }
.casino-hero__disclosure a { color: var(--cyan); }

.proscons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 960px;
    margin: 1rem auto 0;
}
@media (max-width: 720px) {
    .proscons-grid { grid-template-columns: 1fr; }
}
.proscons-card {
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    border-top-width: 4px;
}
.proscons-card--pros { border-top-color: var(--acid); }
.proscons-card--cons { border-top-color: var(--hot-red); }
.proscons-card__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.proscons-card__header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-bright);
}
.proscons-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
}
.proscons-card--pros .proscons-card__icon {
    background: rgba(0, 255, 148, 0.15);
    color: var(--acid);
    box-shadow: 0 0 12px rgba(0, 255, 148, 0.25);
}
.proscons-card--cons .proscons-card__icon {
    background: rgba(255, 51, 85, 0.15);
    color: var(--hot-red);
    box-shadow: 0 0 12px rgba(255, 51, 85, 0.25);
}
.proscons-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.proscons-card__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-3);
    border-radius: var(--r-sm);
    color: var(--text-dim);
}
.proscons-card__list li strong { color: var(--text-bright); font-weight: 500; }
.proscons-card__list--detailed li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
}
.proscons-card__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}
.proscons-card__blurb {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.55;
}
.proscons-card__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 255, 148, 0.12);
    color: var(--acid);
    border: 1px solid rgba(0, 255, 148, 0.4);
    border-radius: var(--r-xs);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
}
.proscons-card__chip--low {
    background: rgba(255, 51, 85, 0.12);
    color: var(--hot-red);
    border-color: rgba(255, 51, 85, 0.4);
}
.proscons-card--empty p { margin: 0; }

.score-bar--high .score-bar__fill { background: linear-gradient(90deg, rgba(0, 255, 148, 0.5), var(--acid)); }
.score-bar--high .score-bar__value { color: var(--acid); }
.score-bar--mid  .score-bar__fill { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.score-bar--low  .score-bar__fill { background: linear-gradient(90deg, rgba(255, 51, 85, 0.5), var(--hot-red)); }
.score-bar--low  .score-bar__value { color: var(--hot-red); }
.casino-key-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}
.casino-key-facts__item {
    padding: 0.85rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.casino-key-facts__label {
    font-size: 0.74rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}
.casino-key-facts__value {
    font-family: var(--f-display);
    font-size: 1.05rem;
    color: var(--text-bright);
}

/* Field-level freshness layer — per-operator "last verified" timestamps for
   bonus / rakeback / licence / withdrawal. Sits between the key-facts grid
   and the crypto-list <details>, single column on desktop, condensed on mobile. */
.casino-freshness {
    list-style: none;
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem;
    background: rgba(0, 217, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem 1.25rem;
    font-size: 0.86rem;
}
.casino-freshness li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    line-height: 1.4;
}
.casino-freshness__label {
    color: var(--text-dim);
}
.casino-freshness__value {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.82rem;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .casino-freshness { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .casino-hero__inner,
    .casino-hero__inner--has-hero-image { grid-template-columns: 1fr; text-align: center; }
    .casino-hero__logo-wrap {
        margin: 0 auto;
        width: 160px;
        height: 160px;
    }
    .casino-hero__image-wrap {
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }
    .casino-hero__rating { justify-content: center; }
    .casino-hero__cta-row { justify-content: center; }
    .casino-hero__body h1 { font-size: 1.75rem !important; line-height: 1.2; }
}

/* Blog grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}
.blog-card {
    display: block;
    padding: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--t-base);
    border-bottom: 1px solid var(--border);
}
.blog-card:hover {
    transform: translateY(-2px);
    border-color: var(--cyan-dim);
}
.blog-card__category {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: rgba(0, 217, 255, 0.1);
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--r-xs);
    margin-bottom: 0.65rem;
}
.blog-card__title {
    font-family: var(--f-display);
    font-size: 1.2rem;
    color: var(--text-bright);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.blog-card__excerpt {
    font-size: 0.92rem;
    color: var(--text-dim);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.blog-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==================
   E-E-A-T components
   ================== */

.author-byline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin: 1.5rem 0;
    flex-wrap: wrap;
}
.author-byline__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--cyan-dim);
    object-fit: cover;
    flex-shrink: 0;
}
/* Avatar wrapper link — keeps the visual unchanged but makes the author photo
   clickable. Hover lifts the cyan border for affordance. */
.author-byline__avatar-link {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
    border-radius: 50%;
    transition: transform 0.18s ease;
}
.author-byline__avatar-link:hover .author-byline__avatar { border-color: var(--cyan); }
.author-byline__avatar-link:hover { transform: scale(1.04); }

.author-byline__body { flex: 1; min-width: 200px; }
.author-byline__name {
    font-family: var(--f-display);
    font-size: 1rem;
    color: var(--text-bright);
    font-weight: 700;
}
/* Name link — keeps the heading-weight typography but adds visual cue that
   it's clickable (cyan dashed underline on hover). */
.author-byline__name-link {
    color: var(--text-bright);
    border-bottom: 1px dashed transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.author-byline__name-link:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan-dim);
}
.author-byline__role {
    font-size: 0.82rem;
    color: var(--cyan);
    margin-bottom: 0.25rem;
}
.author-byline__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.author-byline__meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.author-byline__meta strong { color: var(--text-dim); font-weight: 500; }

.last-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    background: rgba(0, 255, 148, 0.08);
    color: var(--acid);
    border: 1px solid var(--acid-dim);
    border-radius: var(--r-xs);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sources-cited {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-2);
    border-left: 3px solid var(--cyan);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.sources-cited h4 {
    font-family: var(--f-body);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.75rem;
}
.sources-cited ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sources-cited li {
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}
.sources-cited li:last-child { border-bottom: none; }

.trust-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-3);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-xs);
    font-size: 0.78rem;
    color: var(--text-dim);
}
.trust-badge__dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 6px var(--acid);
}

/* Auto-leaderboard */
.leaderboard-section {
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.03), transparent);
    padding: 3rem 0;
    border-bottom: 1px solid var(--border);
}
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.leaderboard-table th, .leaderboard-table td {
    padding: 0.9rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.leaderboard-table thead th {
    background: var(--bg-3);
    color: var(--cyan);
    font-family: var(--f-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cyan-dim);
    cursor: pointer;
    user-select: none;
}
.leaderboard-table thead th:hover { color: var(--cyan-hot); }
.leaderboard-table tbody td:nth-child(2) { text-align: left; }
.leaderboard-table tbody tr:hover td { background: rgba(0, 217, 255, 0.04); }
.leaderboard-medal { font-size: 1.4rem; }
.leaderboard-medal--gold { color: #FFD700; filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4)); }
.leaderboard-medal--silver { color: #C0C0C0; }
.leaderboard-medal--bronze { color: #CD7F32; }
.leaderboard-rate {
    font-family: var(--f-mono);
    color: var(--acid);
    font-weight: 700;
}
.leaderboard-rate--low { color: var(--loss); }
.leaderboard-rate--mid { color: var(--cyan); }
.leaderboard-strength {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: rgba(0, 217, 255, 0.1);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-xs);
    font-size: 0.78rem;
    text-transform: capitalize;
    font-weight: 600;
}

/* SEO content blocks on home/best/landing */
.seo-content-block {
    padding: 2.5rem 0;
}
.seo-content-block h2 {
    font-family: var(--f-display);
    font-size: 1.7rem;
    color: var(--text-bright);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cyan-dim);
}
.seo-content-block h3 {
    font-family: var(--f-display);
    font-size: 1.25rem;
    color: var(--cyan);
    margin: 2rem 0 0.75rem;
}
.seo-content-block p { color: var(--text-dim); line-height: 1.75; margin-bottom: 1.15rem; }
.seo-content-block p strong { color: var(--text-bright); }
.seo-content-block ul, .seo-content-block ol { margin: 0.75rem 0 1.5rem 1.5rem; }
.seo-content-block li { color: var(--text-dim); margin-bottom: 0.5rem; line-height: 1.7; }
.seo-content-block a { color: var(--cyan); border-bottom: 1px dashed var(--cyan-dim); }
.seo-content-block a:hover { color: var(--cyan-hot); border-bottom-style: solid; }

/* Audience-fit cards (homepage) */
.audience-fit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.audience-fit__card {
    padding: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--t-base);
    border-bottom: 1px solid var(--border);
}
.audience-fit__card:hover { border-color: var(--cyan-dim); }
.audience-fit__icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.audience-fit__card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--text-bright); }
.audience-fit__card p { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 0.75rem; }
.audience-fit__card a { font-size: 0.88rem; color: var(--cyan); }

/* FAQ on landing pages */
.landing-faq {
    max-width: var(--container-narrow);
    margin: 2.5rem auto;
}

/* ==================
   About page
   ================== */
.about-hero {
    padding: 2.5rem 0 3rem;
    background: linear-gradient(180deg, rgba(255, 0, 170, 0.05), transparent 80%);
    border-bottom: 1px solid var(--border);
}
.about-hero__grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: center;
}
.about-hero__photo {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border-hi);
    box-shadow: 0 16px 48px rgba(0, 217, 255, 0.18), 0 0 0 1px rgba(0, 217, 255, 0.25);
}
.about-hero__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-hero__photo-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    background: rgba(10, 14, 26, 0.92);
    border: 1px solid var(--cyan-dim);
    border-radius: 100px;
    font-size: 0.78rem;
    color: var(--cyan);
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.about-hero__photo-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 8px var(--acid);
}
.about-hero__eyebrow {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: rgba(255, 0, 170, 0.1);
    border: 1px solid rgba(255, 0, 170, 0.4);
    color: var(--magenta);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 100px;
    margin-bottom: 1rem;
}
.about-hero__body h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 1.15rem;
}
.about-hero__lede {
    color: var(--text-dim);
    font-size: 1.08rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.about-hero__contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (max-width: 760px) {
    .about-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .about-hero__photo { margin: 0 auto; width: 200px; height: 200px; }
    .about-hero__contact-row { justify-content: center; }
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
}
.about-stat {
    text-align: center;
    padding: 1.25rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.about-stat__num {
    font-family: var(--f-display);
    font-size: 2.4rem;
    color: var(--cyan);
    line-height: 1;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 18px rgba(0, 217, 255, 0.35);
}
.about-stat__label {
    font-size: 0.84rem;
    color: var(--text-muted);
}
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin: 1rem 0;
}
.about-card {
    padding: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.about-card h2 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 0.85rem;
    color: var(--text-bright);
}
.about-card p, .about-card ul { color: var(--text-dim); line-height: 1.7; margin-bottom: 0; }
.about-card ul { padding-left: 1.25rem; }
.about-card li { margin-bottom: 0.45rem; }
.about-contact-block {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.75rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.06), rgba(255, 0, 170, 0.04));
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-lg);
    margin: 2rem 0 0;
}
.about-contact-block__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--cyan);
    box-shadow: 0 0 24px rgba(0, 217, 255, 0.35);
}
.about-contact-block__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    background: var(--bg-1);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-sm);
    color: var(--cyan);
    text-decoration: none;
    font-family: var(--f-mono);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--t-base);
}
.about-contact-link:hover {
    background: rgba(0, 217, 255, 0.08);
    color: var(--cyan-hot);
    transform: translateY(-1px);
}
.about-contact-link__icon { font-size: 1.1rem; }
@media (max-width: 600px) {
    .about-contact-block { grid-template-columns: 1fr; text-align: center; }
    .about-contact-block__avatar { margin: 0 auto; }
}

/* ==================
   Methodology 2-col
   ================== */
.method-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    margin-top: 2rem;
    align-items: start;
}
.method-main {
    max-width: none;
    min-width: 0;       /* CSS grid gotcha: prevent table from blowing out the column */
    overflow-x: hidden; /* Belt-and-braces: clip anything that escapes the column */
}
.method-main .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.method-main .table-wrap > table {
    width: 100%;
    table-layout: auto;
}
@media (max-width: 720px) {
    /* Drop the 540px min-width on mobile so the table fits the viewport
       without a horizontal scrollbar — text wraps inside cells instead. */
    .method-main .table-wrap > table { min-width: 0 !important; }
    .method-main .table-wrap { overflow-x: visible; }
    .method-main .table-wrap th,
    .method-main .table-wrap td {
        padding: 0.5rem 0.45rem;
        font-size: 0.8rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}
.method-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 84px;
}
.method-sidebar__card {
    padding: 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.method-sidebar__card--accent {
    border-color: var(--cyan-dim);
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.06), var(--bg-2));
}
.method-sidebar__title {
    font-size: 0.78rem;
    color: var(--cyan);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    margin-top: 0;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
}
.method-sidebar__lede {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}
.method-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.method-sidebar__list a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color var(--t-base);
    display: block;
}
.method-sidebar__list a:hover {
    color: var(--cyan);
}
.method-sidebar__vs {
    color: var(--magenta);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    padding: 0 0.2rem;
}
@media (max-width: 960px) {
    .method-layout { grid-template-columns: 1fr; }
    .method-sidebar { position: static; }
}

/* ==================
   Blog category groups
   ================== */
.blog-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin: 0 0 2rem;
}
.blog-cat-nav__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.86rem;
    transition: all var(--t-base);
}
.blog-cat-nav__chip:hover {
    background: rgba(0, 217, 255, 0.08);
    border-color: var(--cyan-dim);
    color: var(--cyan);
}
.blog-cat-nav__count {
    background: var(--bg-1);
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 100px;
}
.blog-cat-block {
    margin: 2.5rem 0;
    scroll-margin-top: 80px;
}
.blog-cat-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.blog-cat-block__title {
    font-family: var(--f-display);
    font-size: 1.65rem;
    margin: 0;
    color: var(--text-bright);
    position: relative;
    padding-left: 1rem;
}
.blog-cat-block__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--magenta));
    border-radius: 2px;
}
.blog-cat-block__count {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================================
   ALTERNATIVES PAGE — overhauled card grid + decision panel + spec table.
   Each card is a 6-column grid:
     rank+logo / name+tagline / head-to-head vs source / big rating / top-3 strengths / CTA
   Mobile: stacks vertically with the same content order.
   ============================================================ */
.alt-page__intro {
    color: var(--text-dim);
    max-width: 760px;
    margin-bottom: 1.25rem;
    line-height: 1.55;
}
.alt-page__disclosure {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 1.25rem 0 1.5rem;
    padding: 0.7rem 1rem;
    background: rgba(0, 200, 255, 0.04);
    border-left: 2px solid var(--cyan);
    border-radius: var(--r-sm);
    max-width: 760px;
}
.alt-page__disclosure span[aria-hidden] {
    color: var(--cyan);
    margin-right: 0.4rem;
    font-weight: 700;
}

/* ===== Anchor TOC ===== */
.anchor-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    margin: 1.5rem 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.92rem;
}
.anchor-toc__label {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 0.5rem;
}
.anchor-toc a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 200, 255, 0.4);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.anchor-toc a:hover,
.anchor-toc a:focus-visible {
    color: var(--text);
    border-color: var(--text);
}

/* ===== Decision panel ===== */
.alt-decision {
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.03) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r-md);
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 2.25rem;
}
.alt-decision__title {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.alt-decision__lead {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}
.alt-decision__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.alt-decision__list li {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--r-sm);
    font-size: 0.95rem;
    line-height: 1.4;
}
.alt-decision__rank {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 0.95rem;
}
.alt-decision__why {
    color: var(--text-dim);
    font-size: 0.88rem;
}

/* ===== Card list ===== */
.alt-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 1.5rem 0 2rem;
}
.alt-card {
    display: grid;
    /* All columns FIXED widths except name-col — guarantees vs-col, rating, strengths, CTA align vertically across all 5 cards.
       Total fixed: 80 + 195 + 90 + 240 + 160 = 765px + gaps + 1fr name-col flex */
    grid-template-columns: 80px 1fr 195px 90px 240px 160px;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color 0.18s, transform 0.18s;
}
.alt-card:hover {
    border-color: var(--cyan);
    transform: translateY(-1px);
}

/* Col 1: rank + logo */
.alt-card__rank-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.alt-card__rank {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}
.alt-card__logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--r-sm);
}

/* Col 2: name + tagline + meta row */
.alt-card__name-col h3 {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    line-height: 1.25;
}
.alt-card__name-link {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s;
}
.alt-card__name-link:hover,
.alt-card__name-link:focus-visible {
    color: var(--cyan);
}
.alt-card__tagline {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 0.55rem;
}
.alt-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.alt-card__meta-item {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    padding: 2px 7px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    white-space: nowrap;
}

/* Col 3: head-to-head block */
.alt-card__vs-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.7rem 0.75rem;
    background: rgba(0, 0, 0, 0.22);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text);
    transition: background 0.18s, transform 0.15s;
}
.alt-card__vs-block:hover,
.alt-card__vs-block:focus-visible {
    background: rgba(0, 200, 255, 0.06);
}
.alt-card__vs-label {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.alt-card__vs-pair {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.3;
    text-align: center;
}
.alt-card__vs-pair span {
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0.2rem;
}
.alt-card__vs-score {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--f-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dim);
    line-height: 1;
    margin-top: 0.15rem;
}
.alt-card__vs-num {
    color: var(--text-dim);
    transition: color 0.15s;
}
.alt-card__vs-num.is-winner {
    color: var(--cyan);
}
.alt-card__vs-sep {
    color: var(--text-muted);
}
.alt-card__vs-verdict {
    color: var(--text-dim);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
    margin-top: 0.15rem;
}
.alt-card__vs-block--no-cmp {
    background: rgba(0, 0, 0, 0.12);
}
.alt-card__vs-no-cmp {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Col 4: big rating — centered inside its fixed cell so spacing is symmetric to vs and strengths */
.alt-card__rating-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.alt-card__rating {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    line-height: 1;
}
.alt-card__rating-num {
    font-family: var(--f-mono);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.alt-card__rating-suffix {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 1rem;
}

/* Col 5: top-3 strengths list — left-aligned inside its fixed 240px cell */
.alt-card__strengths-col {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.alt-card__strengths-label {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.alt-card__strengths {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.alt-card__strengths li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.25;
}
.alt-card__strength-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 200, 255, 0.12);
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    min-width: 38px;
    flex-shrink: 0;
}
.alt-card__strength-label {
    color: var(--text);
}

/* Col 6: CTA */
.alt-card__cta-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}
.alt-card__cta-col .btn {
    text-align: center;
    white-space: nowrap;
}
.alt-card__review-link {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    text-decoration: none;
    transition: color 0.15s;
}
.alt-card__review-link:hover,
.alt-card__review-link:focus-visible {
    color: var(--cyan);
}

/* Mobile + tablet collapse */
@media (max-width: 1100px) {
    .alt-card {
        grid-template-columns: 80px minmax(160px, 1fr) minmax(130px, 0.7fr) 165px;
    }
    .alt-card__rating-col,
    .alt-card__strengths-col {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--border);
        gap: 1rem;
    }
    .alt-card__strengths-col {
        flex: 1;
    }
    .alt-card__strengths {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.3rem 0.85rem;
    }
}
@media (max-width: 720px) {
    .alt-card {
        grid-template-columns: 70px 1fr;
        gap: 0.75rem 1rem;
        padding: 1rem 1rem;
    }
    .alt-card__logo { width: 48px; height: 48px; }
    .alt-card__rank { font-size: 1.25rem; }
    .alt-card__vs-col,
    .alt-card__rating-col,
    .alt-card__strengths-col,
    .alt-card__cta-col {
        grid-column: 1 / -1;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--border);
    }
    .alt-card__rating-col,
    .alt-card__strengths-col {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
    }
    .alt-card__strengths {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* ===== Combined page footer: bottom-line + byline + disclosure as one cohesive bottom block.
   !important on padding because the global `section { padding: 3rem 0 }` rule in main.css
   ends up being applied via cascade order on alternatives pages (where this is a <section>),
   wiping out horizontal padding. We force it back here. ===== */
.alt-page-footer {
    margin: 0.75rem 0 0.25rem !important;
    padding: 1.75rem 1.75rem 1.5rem !important;
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.04) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--cyan);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
/* Blog-post pages: pull next-sibling site-footer up so the gap below the
   alt-page-footer matches the small gap above it.
   Stack we cancel: outer section padding-bottom (48px) + site-footer margin-top (64px). */
.blog-post-footer-wrap { margin-bottom: -6rem; }

/* Sibling cluster grid forced to 4 columns (used on /alternatives/{slug}/) */
.alt-cluster-grid--4col {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px) { .alt-cluster-grid--4col { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .alt-cluster-grid--4col { grid-template-columns: 1fr !important; } }

/* Bottom-stack wrapper for /alternatives/{slug}/ — holds BOTH the alt-page-footer
   and the verify-strip. Light negative margin closes the worst of the dead-space
   before site-footer; we don't go fully -6rem here (as blog post does) because
   the verify-strip below the footer needs its own breathing room before the
   cyan site-footer line. Proper gap rather than collapsed overlap. */
.alt-page-bottom-stack {
    margin-bottom: -2rem;
}

/* Small post-author verification strip — replaces the bloated How-we-verified
   block. Sits as a sibling under the alt-page-footer inside .alt-page-bottom-stack.
   Subdued treatment so it reads as trust-signal footnote, not competing copy. */
.alt-verify-strip {
    margin: 0.75rem 0 0;
    padding: 0.85rem 1.25rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(0, 217, 255, 0.025);
}
.alt-verify-strip strong { color: var(--text-dim); font-weight: 600; }
.alt-verify-strip a { color: var(--cyan); border-bottom: 1px dashed var(--cyan-dim); }
.alt-verify-strip a:hover { color: var(--cyan-hot); }

/* Top: Bottom-line callout — focal point */
.alt-page-footer__bottomline {
    text-align: center;
    padding: 0 0.5rem 1.25rem;
    border-bottom: 1px dashed var(--border);
}
.alt-page-footer__bottomline-eyebrow {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.6rem;
}
.alt-page-footer__bottomline p {
    margin: 0 auto;
    max-width: 720px;
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Middle: trust block (author byline + 3 trust chips, slightly smaller in this context) */
.alt-page-footer__trust {
    /* Override the standalone byline padding now that it's inside a footer wrapper */
}
.alt-page-footer__trust .author-byline {
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
}
.alt-page-footer__trust .trust-badges {
    margin-top: 0.85rem;
    justify-content: center;
}

/* Bottom: affiliate disclosure as a quiet footer note */
.alt-page-footer__disclosure {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.alt-page-footer__disclosure-icon {
    color: var(--cyan);
    font-weight: 700;
    flex-shrink: 0;
}
.alt-page-footer__disclosure strong {
    color: var(--text-dim);
}

@media (max-width: 720px) {
    .alt-page-footer {
        padding: 1.25rem 1.25rem 1.1rem;
    }
    .alt-page-footer__bottomline p { font-size: 0.98rem; }
}

/* ============================================================
   BLOG POST visual structure: 2-column hero (illustration LEFT, text RIGHT),
   TLDR box, key-stats, pullquote, inline callouts.
   ============================================================ */
.blog-post-hero {
    padding: 2.5rem 0 2rem;
}
.blog-post-hero__grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 2.5rem;
    align-items: center;
}
.blog-post-hero__visual {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
    line-height: 0;
}
.blog-post-hero__visual svg {
    display: block;
    width: 100%;
    height: 100%;
}
.blog-post-hero__text {
    display: flex;
    flex-direction: column;
}
.blog-post-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.blog-post-hero__category {
    --accent: var(--cyan);
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.blog-post-hero__title {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.15;
    margin: 0 0 1.1rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}
.blog-post-hero__lead {
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}
.blog-post-hero__byline {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

@media (max-width: 880px) {
    .blog-post-hero__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .blog-post-hero__visual {
        max-width: 280px;
        margin: 0 auto;
    }
    .blog-post-hero__text {
        text-align: center;
    }
    .blog-post-hero__meta {
        justify-content: center;
    }
    .blog-post-hero__byline {
        text-align: center;
    }
}

/* ============================================================
   BEST-OF HUB — unique visual identity per /best/ cluster
   Distinct from blog-post-hero / vs-hero / casino-hero so each
   cluster looks structurally different (no copy-paste templates).
   ============================================================ */

/* Hub hero: ranking-themed with stacked weight-profile rings */
.best-hub-hero {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.5rem;
}
.best-hub-hero__grid {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 2.5rem;
    align-items: center;
}
.best-hub-hero__text { display: flex; flex-direction: column; }
.best-hub-hero__eyebrow {
    display: inline-block;
    background: linear-gradient(90deg, rgba(50,220,130,0.12), rgba(0,217,255,0.08));
    color: #32dc82;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(50,220,130,0.32);
    margin-bottom: 1rem;
    width: fit-content;
}
.best-hub-hero__title {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.15;
    margin: 0 0 1.1rem;
    font-family: var(--f-display);
    font-weight: 700;
}
.best-hub-hero__lead {
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.best-hub-hero__stat-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.best-hub-hero__stat-item {
    display: flex;
    flex-direction: column;
}
.best-hub-hero__stat-num {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: var(--cyan);
    line-height: 1;
}
.best-hub-hero__stat-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}
.best-hub-hero__visual {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #0A0E1A, #11162A 60%, #1A1F3A);
    line-height: 0;
}
.best-hub-hero__visual svg {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 880px) {
    .best-hub-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .best-hub-hero__visual { max-width: 320px; margin: 0 auto; order: -1; }
    .best-hub-hero__stat-row {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        text-align: center;
    }
    .best-hub-hero__stat-item { align-items: center; }
}

/* Ranking card with #N medal + casino logo + per-criterion accent strip + score bar */
.ranking-card-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1.5rem 0 2rem;
}
.ranking-card {
    display: grid;
    grid-template-columns: 72px 88px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.85rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}
.ranking-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--cyan-dim));
}
.ranking-card:hover {
    transform: translateY(-2px);
    border-color: var(--cyan-dim);
    box-shadow: var(--shadow-card);
}
.ranking-card--gold::before { background: linear-gradient(180deg, #FFD700, #FFA500); }
.ranking-card--silver::before { background: linear-gradient(180deg, #C0C0C0, #909090); }
.ranking-card--bronze::before { background: linear-gradient(180deg, #CD7F32, #8B4513); }
/* Crown medallion replaces old circle medal */
.ranking-card__crown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 64px;
    text-align: center;
}
.ranking-card__crown svg {
    width: 56px;
    height: 48px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.ranking-card__crown-rank {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-bright);
    line-height: 1;
}
.ranking-card__crown-label {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.1;
}
.ranking-card--gold .ranking-card__crown svg { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.35)); }
.ranking-card--gold .ranking-card__crown-rank { color: #FFD700; }
.ranking-card--silver .ranking-card__crown-rank { color: #D5D5D5; }
.ranking-card--bronze .ranking-card__crown-rank { color: #E89B5C; }
.ranking-card__logo {
    width: 88px;
    height: 52px;
    object-fit: contain;
    filter: brightness(1.05);
}
.ranking-card__body { display: flex; flex-direction: column; gap: 0.3rem; }
.ranking-card__name {
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.2;
    margin: 0;
}
.ranking-card__verdict {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0;
}
.ranking-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.ranking-card__fact strong { color: var(--text-dim); font-weight: 600; }
.ranking-card__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.ranking-card__score-num {
    font-family: var(--f-display);
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--cyan);
    line-height: 1;
}
.ranking-card__score-suffix {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 3px;
}
.ranking-card__score-bar {
    width: 72px;
    height: 5px;
    background: var(--bg-1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}
.ranking-card__score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
    border-radius: 3px;
}
@media (max-width: 720px) {
    .ranking-card {
        grid-template-columns: 56px 1fr auto;
        gap: 0.7rem;
        padding: 0.75rem 0.85rem;
    }
    .ranking-card__logo { display: none; }
    .ranking-card__crown { width: 56px; }
    .ranking-card__crown svg { width: 48px; height: 40px; }
    .ranking-card__crown-rank { font-size: 0.9rem; }
    .ranking-card__crown-label { font-size: 0.46rem; }
    .ranking-card__score-num { font-size: 1.55rem; }
    .ranking-card__score-bar { width: 56px; }
}

/* Weight profile visualization — small radar-like bar grid showing which parameters
   are weighted heavier on this ranking (replaces dry "Weighted on: crypto-casinos" text). */
.weight-profile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 6px);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 1.5rem;
}
.weight-profile__item { display: flex; flex-direction: column; gap: 4px; }
.weight-profile__label {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    text-transform: uppercase;
}
.weight-profile__bar {
    height: 4px;
    background: var(--bg-2);
    border-radius: 2px;
    overflow: hidden;
}
.weight-profile__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
    transition: width var(--t-base);
}
.weight-profile__bar-fill--heavy {
    background: linear-gradient(90deg, #32dc82, #26a866);
}
.weight-profile__bar-fill--mid {
    background: linear-gradient(90deg, #FFC850, #E8A82E);
}
.weight-profile__bar-fill--light {
    background: linear-gradient(90deg, #4a5266, #3a4258);
}

/* Per-ranking visual category-card on /best/ pillar */
.ranking-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}
.ranking-preview {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ranking-preview:hover {
    transform: translateY(-2px);
    border-color: var(--cyan-dim);
    box-shadow: var(--shadow-card);
}
.ranking-preview__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--cyan);
}
.ranking-preview__title {
    font-family: var(--f-display);
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--text-bright);
    margin: 0 0 0.6rem;
}
/* Brand-name highlight inside the card title — uses the per-card --accent
   so the casino name pops in the friction-theme colour (gold for welcome,
   cyan for access, magenta for trust-signal, etc.) */
.ranking-preview__brand {
    display: inline-block;
    color: var(--accent, var(--cyan));
    background: color-mix(in srgb, var(--accent, var(--cyan)) 14%, transparent);
    padding: 0.05em 0.45em;
    border-radius: var(--r-xs);
    border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 35%, transparent);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.ranking-preview__lede {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.ranking-preview__current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
    color: var(--text-muted);
}
.ranking-preview__current-label {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.ranking-preview__current-name {
    color: var(--text-bright);
    font-weight: 600;
}
.ranking-preview__current-score {
    color: #32dc82;
    font-weight: 700;
    margin-left: auto;
    font-family: var(--f-display);
}

/* Category-themed accent corner for ranking-preview */
.ranking-preview--rakeback { border-top: 3px solid #FFC850; }
.ranking-preview--volume { border-top: 3px solid #FF6B6B; }
.ranking-preview--privacy { border-top: 3px solid #A78BFA; }
.ranking-preview--bonus { border-top: 3px solid #32dc82; }
.ranking-preview--live { border-top: 3px solid #00D9FF; }

/* Section visual divider with category icon */
.cluster-section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.85rem 0 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}
.cluster-section-divider__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--cyan);
    background: var(--bg-2);
    border: 1px solid var(--cyan-dim);
    border-radius: 50%;
    padding: 7px;
    box-sizing: content-box;
}
.cluster-section-divider__text {
    flex: 1;
}
.cluster-section-divider__label {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 700;
}
.cluster-section-divider__h2 {
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.25;
    color: var(--text-bright);
    margin: 0.3rem 0 0;
}

/* TLDR box — key takeaways pinned at top */
.blog-tldr {
    margin: 2rem 0 1.75rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.05) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r-md);
}
.blog-tldr__label {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.85rem;
}
.blog-tldr__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.blog-tldr__list li {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
    padding-left: 1.5rem;
    position: relative;
}
.blog-tldr__list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cyan);
    font-weight: 700;
}

/* Key-stats: 3-4 stat cards */
.blog-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.75rem 0;
}
.blog-stat-card {
    padding: 1.5rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: var(--r-md);
    text-align: center;
}
.blog-stat-card__value {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.blog-stat-card__label {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.35;
}

/* ============================================================
   INLINE article callouts — insert inside .md body via HTML pass-through
   to break up the prose with structured visual blocks.
   ============================================================ */

/* Insight callout — info / pro-tip box (cyan) */
.article-callout {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    align-items: start;
}
.article-callout--warning   { border-left-color: #FF9C66; }
.article-callout--warning .article-callout__icon { color: #FF9C66; }
.article-callout--fact      { border-left-color: #00FF94; }
.article-callout--fact .article-callout__icon    { color: #00FF94; }
.article-callout__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.12);
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}
.article-callout--warning .article-callout__icon { background: rgba(255, 156, 102, 0.12); }
.article-callout--fact .article-callout__icon    { background: rgba(0, 255, 148, 0.12); }
.article-callout__body { min-width: 0; }
.article-callout__eyebrow {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
}
.article-callout--warning .article-callout__eyebrow { color: #FF9C66; }
.article-callout--fact .article-callout__eyebrow    { color: #00FF94; }
.article-callout__body p {
    margin: 0;
    color: var(--text);
    line-height: 1.55;
}
.article-callout__body p + p { margin-top: 0.55rem; }

/* Fact strip — big number + label, used inline as visual emphasis */
.article-fact-strip {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.04) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
}
.article-fact-strip__number {
    font-family: var(--f-mono);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.article-fact-strip__text {
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.45;
}
.article-fact-strip__text strong { color: var(--text); }

/* Multi-stat variant: when .article-fact-strip contains .article-fact children
   (3 or more stat pairs), render as horizontal stat-card grid instead of
   single-stat auto/1fr grid. Targets the multi-stat usage case. */
.article-fact-strip:has(> .article-fact) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem 1.75rem;
    padding: 1.5rem 1.75rem;
    align-items: stretch;
}
.article-fact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.article-fact__value {
    font-family: var(--f-mono);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.article-fact__label {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.45;
}
.article-fact__label strong { color: var(--text); }
@media (max-width: 600px) {
    .article-fact-strip:has(> .article-fact) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Inline comparison — 2-3 columns side-by-side mini-comparison */
.article-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1.75rem 0;
}
.article-compare__col {
    padding: 1rem 1.15rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: var(--r-md);
}
.article-compare__col--alt { border-top-color: #FF00AA; }
.article-compare__col--neutral { border-top-color: var(--text-muted); }
.article-compare__col-label {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.article-compare__col--alt .article-compare__col-label { color: #FF00AA; }
.article-compare__col--neutral .article-compare__col-label { color: var(--text-muted); }
.article-compare__col-value {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.article-compare__col-detail {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Numbered step cards — for procedural posts.
   Default: 2 columns desktop, 1 column mobile. Avoids 3+1 ugly layout.
   - 3 steps:        3 columns (clean row)
   - 4 steps:        2x2 (default 2 columns)
   - 5+ steps:       vertical 1-column "process" layout (no asymmetric grid mess)
   Mobile: always 1 column. */
.article-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin: 1.75rem 0;
}
.article-steps:has(> .article-step:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}
.article-steps:has(> .article-step:nth-child(5)) {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.article-steps:has(> .article-step:nth-child(5)) .article-step {
    padding: 1.25rem 1.4rem 1.25rem 4.2rem;
}
.article-steps:has(> .article-step:nth-child(5)) .article-step__num {
    top: 50%;
    transform: translateY(-50%);
    left: 1.4rem;
    font-size: 1.6rem;
    width: 2.2rem;
    text-align: center;
}
@media (max-width: 700px) {
    .article-steps,
    .article-steps:has(> .article-step:nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }
    .article-steps:has(> .article-step:nth-child(5)) .article-step {
        padding: 2.4rem 1.2rem 1.1rem;
    }
    .article-steps:has(> .article-step:nth-child(5)) .article-step__num {
        top: 0.75rem;
        transform: none;
        left: 1.2rem;
    }
}

/* Fact-strip number slot — guard against non-numeric content.
   The number slot is designed for short numerals/spec strings (e.g. "19", "~$20K", "8 yrs").
   Long descriptive text overflows; cap width so the layout doesn't blow up. */
.article-fact-strip__number {
    max-width: 12ch;
    overflow-wrap: break-word;
    word-break: keep-all;
    hyphens: none;
}
.article-step {
    padding: 1.1rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    position: relative;
    padding-top: 2.4rem;
}
.article-step__num {
    position: absolute;
    top: 0.75rem;
    left: 1.2rem;
    color: var(--cyan);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 1.3rem;
}
.article-step__title {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.article-step__body {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================================
   INLINE CTA grid — operator cards inside article body
   with Play Now (affiliate fake-link) + Read Review (internal link).
   Drives monetization + cluster cross-linking from inside the prose.

   Supports multiple intent-driven variants:
   - Default: auto-fit grid (works for 2/3 cards)
   - --solo: single hero card centred (for "stop overthinking" / decision-paralysis posts)
   - --asymmetric: 1 large + 2 smaller cards (for upset/honorable-mentions posts)
   - --decision: stacked decision-tree rows (one row per profile/condition)
   ============================================================ */
.article-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin: 2rem 0;
}
.article-cta-grid:has(> .article-cta-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
.article-cta-grid:has(> .article-cta-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}
.article-cta-grid:has(> .article-cta-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 800px) {
    .article-cta-grid,
    .article-cta-grid:has(> .article-cta-card:nth-child(2):last-child),
    .article-cta-grid:has(> .article-cta-card:nth-child(3):last-child),
    .article-cta-grid:has(> .article-cta-card:nth-child(4):last-child) {
        grid-template-columns: 1fr;
    }
}

/* --solo: one big hero card, centred, for decision-paralysis posts */
.article-cta-grid--solo {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.article-cta-grid--solo .article-cta-card {
    border-top-width: 4px;
    padding: 1.5rem 1.5rem 1.35rem;
}
.article-cta-grid--solo .article-cta-card__head {
    gap: 1rem;
}
.article-cta-grid--solo .article-cta-card__logo {
    width: 56px;
    height: 56px;
}
.article-cta-grid--solo .article-cta-card__name {
    font-size: 1.3rem;
}

/* --asymmetric: 1 lead + 2 honorable mentions stacked
   Layout: LEFT column = lead card (full height), RIGHT column = 2 stacked. */
.article-cta-grid--asymmetric {
    grid-template-columns: 1.25fr 1fr;
    gap: 0.85rem;
}
.article-cta-grid--asymmetric > .article-cta-card:first-child {
    grid-row: 1 / span 2;
    border-top-width: 4px;
}
@media (max-width: 800px) {
    .article-cta-grid--asymmetric {
        grid-template-columns: 1fr;
    }
    .article-cta-grid--asymmetric > .article-cta-card:first-child {
        grid-row: auto;
    }
}

/* --decision: vertical decision-tree CTA. Each row is profile -> operator pick.
   Wraps .article-cta-row blocks. */
.article-cta-grid--decision {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.article-cta-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.5fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r-md);
}
.article-cta-row__condition {
    color: var(--text-dim);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.35;
}
.article-cta-row__condition strong {
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--f-body);
    font-size: 0.95rem;
    display: block;
    margin-top: 0.2rem;
    font-weight: 600;
}
.article-cta-row__pick {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
}
.article-cta-row__pick img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.article-cta-row__pick strong { color: var(--text); }
.article-cta-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.article-cta-row__action:hover { background: #00B5DC; border-color: #00B5DC; }
@media (max-width: 700px) {
    .article-cta-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        padding: 1rem 1.1rem;
    }
    .article-cta-row__action {
        justify-self: start;
    }
}

/* --inline-pick: single-line operator recommendation embedded in prose.
   Looks like a quote-card, not a marketing block. */
.article-inline-pick {
    margin: 1.75rem 0;
    padding: 1.1rem 1.4rem 1.1rem 1.25rem;
    background: rgba(0, 200, 255, 0.04);
    border-left: 3px solid var(--cyan);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}
.article-inline-pick__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.article-inline-pick__body {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.5;
}
.article-inline-pick__body strong { color: var(--text); }
.article-inline-pick__body em {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-dim);
    font-style: normal;
    font-size: 0.86rem;
    font-family: var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.article-inline-pick__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.article-inline-pick__action:hover { background: #00B5DC; border-color: #00B5DC; }
@media (max-width: 600px) {
    .article-inline-pick {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }
    .article-inline-pick__action {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 0.4rem;
    }
}
.article-cta-card {
    padding: 1.25rem 1.25rem 1.1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: border-color 0.18s, transform 0.18s;
}
.article-cta-card:hover {
    border-color: var(--cyan);
    transform: translateY(-1px);
}
.article-cta-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.article-cta-card__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.article-cta-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.article-cta-card__score {
    font-family: var(--f-mono);
    font-size: 0.85rem;
    color: var(--cyan);
    font-weight: 700;
    margin-top: 2px;
}
.article-cta-card__angle {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.45;
    flex: 1;
}
.article-cta-card__angle strong { color: var(--text); }
.article-cta-card__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.article-cta-card__btn-primary,
.article-cta-card__btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.55rem 0.5rem;
    border-radius: var(--r-sm);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.article-cta-card__btn-primary {
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
}
.article-cta-card__btn-primary:hover { background: #00B5DC; border-color: #00B5DC; }
.article-cta-card__btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.article-cta-card__btn-ghost:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* Pullquote — editorial highlight */
.blog-pullquote {
    margin: 2.5rem 0;
    padding: 1.75rem 2rem;
    background: rgba(0, 200, 255, 0.04);
    border-left: 4px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: 'Playfair Display', Georgia, serif;
}
.blog-pullquote p {
    margin: 0 0 0.85rem;
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1.45;
    font-style: italic;
    font-weight: 500;
}
.blog-pullquote cite {
    display: block;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-family: var(--f-sans);
    font-style: normal;
}

/* ===== H1 + Updated badge row ===== */
.alt-page__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.85rem 1.25rem;
    margin-bottom: 0.85rem;
}
.alt-page__heading-row h1 { margin: 0; }
.alt-page__updated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.25);
    border-radius: 999px;
    white-space: nowrap;
}
.alt-page__updated svg { flex-shrink: 0; }

/* ===== "Continue exploring" cluster section ===== */
.alt-cluster {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px dashed var(--border);
}

/* Centered section heading + eyebrow (mono-uppercase cyan label above) */
.alt-cluster__heading {
    text-align: center;
    margin: 0 auto 1rem;
}
.alt-cluster__heading h2,
.alt-cluster__heading h3 {
    margin: 0 auto;
    text-align: center;
}
.alt-cluster__eyebrow {
    display: block;
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.55rem;
    font-weight: 600;
}

/* Blog page: quick-compare reused in middle of /blog/ index */
.blog-quick-compare {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}
.blog-quick-compare__lede {
    text-align: center;
    color: var(--text-dim);
    max-width: 720px;
    margin: -0.25rem auto 1.25rem;
    font-size: 0.96rem;
    line-height: 1.55;
}

.alt-cluster__subhead {
    margin: 3rem 0 1.5rem;
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1.3;
    text-align: center;
    position: relative;
}
.alt-cluster__subhead::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--cyan);
    border-radius: 2px;
    margin: 0.65rem auto 0;
    opacity: 0.6;
}
.alt-cluster__subhead:first-of-type { margin-top: 1.5rem; }

.alt-cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.alt-cluster-grid--guides { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.alt-cluster-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.18s, transform 0.18s;
}
.alt-cluster-card:hover,
.alt-cluster-card:focus-visible {
    border-color: var(--cyan);
    transform: translateY(-1px);
}
.alt-cluster-card--guide img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.alt-cluster-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.10);
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 2px;
}
.alt-cluster-card__body { flex: 1; min-width: 0; }
.alt-cluster-card__title {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.alt-cluster-card__sub {
    color: var(--text-dim);
    font-size: 0.86rem;
    line-height: 1.45;
}
.alt-cluster-card--blog {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}
.alt-cluster-card__category {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.alt-cluster-card__meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 0.4rem;
}

/* ===== Methodology mini-callout near FAQ ===== */
.alt-method-callout {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: start;
    gap: 1rem 1.25rem;
    margin: 2rem 0 1rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.05) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r-md);
}
.alt-method-callout__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.10);
    color: var(--cyan);
}
.alt-method-callout__eyebrow {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.45rem;
}
.alt-method-callout__body h3 {
    margin: 0 0 0.65rem;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--text);
}
.alt-method-callout__body p {
    margin: 0 0 1rem;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.55;
}
@media (max-width: 720px) {
    .alt-method-callout { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.25rem 1.25rem; }
}

/* ===== Closing pair: Switch / Stay cards with SVG icons ===== */
.alt-closing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2.5rem 0 1.5rem;
}
.alt-closing-card {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.alt-closing-card--switch { border-left: 3px solid var(--cyan); }
.alt-closing-card--stay   { border-left: 3px solid #ff9c66; }
.alt-closing-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-bottom: 0.85rem;
    background: rgba(0, 0, 0, 0.25);
}
.alt-closing-card--switch .alt-closing-card__icon { color: var(--cyan); }
.alt-closing-card--stay   .alt-closing-card__icon { color: #ff9c66; }
.alt-closing-card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--text);
}
.alt-closing-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.55;
}
@media (max-width: 720px) {
    .alt-closing-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== Per-alternative editorial summary callout (used inside .md via HTML pass-through) ===== */
.alt-deepdive {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 200, 255, 0.04);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    align-items: center;
}
.alt-deepdive__score {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    font-family: var(--f-mono);
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.alt-deepdive__score-num { font-size: 2rem; }
.alt-deepdive__score-suf { font-size: 0.95rem; color: var(--text-muted); }
.alt-deepdive__tags {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.alt-deepdive__tag {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.4;
}
.alt-deepdive__tag strong {
    color: var(--text);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.4rem;
}
@media (max-width: 720px) {
    .alt-deepdive { grid-template-columns: 1fr; gap: 0.65rem; }
}

/* ===== Decision shortcut grid (used inside .md via HTML pass-through) ===== */
.decision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0 1.75rem;
}
.decision-card {
    padding: 1.1rem 1.15rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
a.decision-card:hover,
a.decision-card:focus-visible {
    border-color: var(--cyan);
    transform: translateY(-1px);
    background: linear-gradient(180deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.05) 100%);
    outline: none;
}
a.decision-card:hover .decision-card__pick,
a.decision-card:focus-visible .decision-card__pick {
    color: var(--text);
}
.decision-card__profile {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.45;
}
.decision-card__pick {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.decision-card__pick strong {
    color: var(--text);
    font-family: var(--f-sans);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 0.15rem;
}
.decision-card__why {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* ===== Spec table mobile scroll hint ===== */
.alt-spec-table-wrap {
    position: relative;
}
@media (max-width: 720px) {
    .alt-spec-table-wrap[data-scroll-hint]::after {
        content: attr(data-scroll-hint);
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        background: var(--cyan);
        color: #000;
        font-family: var(--f-mono);
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 3px;
        pointer-events: none;
        opacity: 0.85;
    }
}

/* ===== Most-recommended insight (index page only) — unique editorial finding ===== */
.alt-most-recommended {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.alt-mr-card {
    display: grid;
    grid-template-columns: 50px 60px 1fr 100px;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.18s, transform 0.18s;
}
.alt-mr-card:hover,
.alt-mr-card:focus-visible {
    border-color: var(--cyan);
    transform: translateY(-1px);
}
.alt-mr-card__rank {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
}
.alt-mr-card__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--r-sm);
    justify-self: center;
}
.alt-mr-card__name {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.alt-mr-card__count {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}
.alt-mr-card__count strong { color: var(--cyan); }
.alt-mr-card__guides {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}
.alt-mr-card__score {
    text-align: right;
    font-family: var(--f-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.alt-mr-card__score span {
    color: var(--text-muted);
    font-size: 0.85rem;
}
@media (max-width: 720px) {
    .alt-mr-card {
        grid-template-columns: 40px 48px 1fr;
        gap: 0.75rem;
    }
    .alt-mr-card__score {
        grid-column: 1 / -1;
        text-align: left;
        padding-top: 0.4rem;
        border-top: 1px dashed var(--border);
    }
}

/* ===== Hub nav grid (4 hub-card cells, index page only) ===== */
.alt-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 1.5rem;
}
.alt-hub-card {
    padding: 1.25rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.18s, transform 0.18s;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.alt-hub-card:hover,
.alt-hub-card:focus-visible {
    border-color: var(--cyan);
    transform: translateY(-1px);
}
.alt-hub-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.10);
    color: var(--cyan);
}
.alt-hub-card__label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.alt-hub-card__sub {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* ===== "How the picks work" mini-card grid on /alternatives/ index ===== */
.alt-howit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 1.5rem 0 0.5rem;
}
.alt-howit-card {
    padding: 1.1rem 1.15rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: var(--r-md);
}
.alt-howit-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.10);
    color: var(--cyan);
    margin-bottom: 0.65rem;
}
.alt-howit-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--text);
}
.alt-howit-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Index card angle chip with icon */
.alt-index-card__angle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
}
.alt-index-card__angle-icon { flex-shrink: 0; }

/* ===== Alternatives index list (/alternatives/) ===== */
.alt-index-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 1.25rem 0 2rem;
}
.alt-index-card {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.18s, transform 0.18s;
}
.alt-index-card:hover,
.alt-index-card:focus-visible {
    border-color: var(--cyan);
    transform: translateY(-1px);
}
.alt-index-card__logo-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.alt-index-card__logo-col img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--r-sm);
}
.alt-index-card__angle {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
}
.alt-index-card__title {
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}
.alt-index-card__sub {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}
.alt-index-card__rating-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 1px dashed var(--border);
}
.alt-index-card__rating-num {
    font-family: var(--f-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.alt-index-card__rating-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.3rem;
    line-height: 1.2;
}
.alt-index-card__cta-col {
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .alt-index-card {
        grid-template-columns: 70px 1fr;
        gap: 0.85rem 1rem;
    }
    .alt-index-card__rating-col,
    .alt-index-card__cta-col {
        grid-column: 1 / -1;
        padding: 0.5rem 0 0;
        border-left: none;
        border-top: 1px dashed var(--border);
    }
    .alt-index-card__rating-col {
        flex-direction: row;
        gap: 0.6rem;
        justify-content: flex-start;
    }
    .alt-index-card__rating-label { text-align: left; margin-top: 0; }
    .alt-index-card__cta-col { text-align: center; }
}

/* ===== Spec comparison table ===== */
.alt-spec-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 2rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.alt-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.alt-spec-table thead {
    background: rgba(0, 0, 0, 0.25);
}
.alt-spec-table th,
.alt-spec-table td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.alt-spec-table th {
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.alt-spec-table tbody tr:last-child td { border-bottom: none; }
.alt-spec-table tbody tr:hover { background: rgba(0, 200, 255, 0.04); }

/* ============================================================
   MID-BODY CTA — sits between editorial body and pros/cons block.
   Conversion logic: reader has consumed editorial; this gives a
   "decided already?" off-ramp before the deeper structural blocks.
   ============================================================ */
.midbody-cta-section {
    padding: 2.5rem 0;
}
.midbody-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.75rem;
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 200, 255, 0.04) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r-md);
    padding: 1.5rem 1.75rem;
}
.midbody-cta__eyebrow {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}
.midbody-cta__title {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.4rem;
}
.midbody-cta__subtitle {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.5;
    font-style: italic;
}
.midbody-cta__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 220px;
}
.midbody-cta__action .btn {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}
.midbody-cta__disclosure {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: right;
    line-height: 1.3;
}
@media (max-width: 720px) {
    .midbody-cta {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem 1.25rem;
    }
    .midbody-cta__action {
        align-items: stretch;
        min-width: 0;
    }
    .midbody-cta__disclosure {
        text-align: center;
    }
}

/* ============================================================
   SCROLL-CTA — floating popup that appears at >=50% scroll.
   Desktop: bottom-right corner card.
   Mobile:  full-width bottom bar.
   Dismissible via × button (state persisted in localStorage 7d).
   Hides automatically when hero or final CTA is in viewport.
   ============================================================ */
.scroll-cta {
    position: fixed;
    z-index: 80;
    right: 1.25rem;
    bottom: 1.25rem;
    max-width: 420px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 200, 255, 0.18);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease;
    pointer-events: none;
}
.scroll-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.scroll-cta__inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
}
.scroll-cta__logo {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    object-fit: contain;
    background: transparent;
    flex-shrink: 0;
}
.scroll-cta__body {
    flex: 1;
    min-width: 0;
}
.scroll-cta__title {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scroll-cta__sub {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.3;
    margin-top: 2px;
}
.scroll-cta__btn {
    flex-shrink: 0;
    padding: 0.55rem 1rem !important;
    font-size: 0.88rem !important;
}
.scroll-cta__dismiss {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.18s;
}
.scroll-cta__dismiss:hover,
.scroll-cta__dismiss:focus-visible {
    color: var(--text);
    outline: none;
}
@media (max-width: 720px) {
    .scroll-cta {
        right: 0;
        left: 0;
        bottom: 0;
        max-width: none;
        border-radius: var(--r-md) var(--r-md) 0 0;
        border-bottom: none;
    }
    .scroll-cta__inner {
        padding: 0.75rem 0.85rem;
        gap: 0.65rem;
    }
    .scroll-cta__sub {
        display: none; /* tighten on mobile */
    }
    .scroll-cta__btn {
        padding: 0.55rem 0.85rem !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cta {
        transition: opacity 0.2s ease;
    }
}


/* ============================================================================
   v3.8 CTA / EDITORIAL LAYOUT EXPANSION
   8 fundamentally different CTA block patterns + FAQ accordion + Bottom-line
   callout, designed so every blog post can carry a distinct visual treatment
   tied to the post's specific intent - not just card-grid variations.
   ============================================================================ */

/* ---------- FAQ accordion (replaces plain H3 + paragraph) ---------- */
.article-faq {
    margin: 2rem 0 2.5rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.article-faq__title {
    font-family: var(--f-display);
    font-size: 1.6rem;
    color: var(--text-bright);
    margin: 0;
    padding: 1.4rem 0 1rem;
    letter-spacing: -0.01em;
}
.article-faq__intro {
    color: var(--text-dim);
    margin: 0 0 1.25rem;
    line-height: 1.55;
    font-size: 0.96rem;
}
.article-faq details {
    border-top: 1px solid var(--border);
    padding: 0;
}
/* Removed border-bottom on last details — .article-faq container already
   has its own border-bottom; the duplicate produced two parallel lines. */
.article-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 2.4rem 1.1rem 0.25rem;
    font-family: var(--f-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    position: relative;
    transition: color 0.18s;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
    content: "+";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-hi);
    border-radius: 50%;
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    line-height: 26px;
    transition: transform 0.22s, border-color 0.18s, background 0.18s;
}
.article-faq details[open] summary::after {
    content: "\2212";
    transform: translateY(-50%) rotate(180deg);
    background: var(--cyan);
    color: #000;
    border-color: var(--cyan);
}
.article-faq summary:hover { color: var(--cyan); }
.article-faq details[open] summary {
    color: var(--text-bright);
    padding-bottom: 0.4rem;
}
.article-faq__answer {
    padding: 0 0 1.2rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-size: 0.96rem;
}
.article-faq__answer p { margin: 0 0 0.6rem; }
.article-faq__answer p:last-child { margin-bottom: 0; }
.article-faq__answer strong { color: var(--text); }

/* ---------- Bottom-line styled callout (key takeaway block) ---------- */
.article-bottomline {
    margin: 2.5rem 0 2rem;
    padding: 1.75rem 2rem 1.85rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.06) 0%, rgba(0, 200, 255, 0.02) 100%);
    border: 1px solid var(--cyan-dim);
    border-left: 4px solid var(--cyan);
    border-radius: var(--r-md);
    position: relative;
}
.article-bottomline__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.85rem;
}
.article-bottomline__eyebrow svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.article-bottomline__title {
    font-family: var(--f-display);
    font-size: 1.55rem;
    color: var(--text-bright);
    line-height: 1.3;
    margin: 0 0 0.85rem;
    letter-spacing: -0.005em;
}
.article-bottomline__body {
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.6;
}
.article-bottomline__body p { margin: 0 0 0.7rem; }
.article-bottomline__body p:last-child { margin-bottom: 0; }
.article-bottomline__body strong { color: var(--text-bright); }

/* ---------- CTA pattern 6: --editor-quote ---------- */
.article-editor-quote {
    margin: 2.25rem 0;
    padding: 1.85rem 2rem 1.65rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    border-radius: var(--r-md);
    position: relative;
}
.article-editor-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.4rem;
    left: 0.85rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--cyan);
    opacity: 0.18;
    pointer-events: none;
}
.article-editor-quote__eyebrow {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.6rem;
}
.article-editor-quote__body {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-bright);
    font-style: italic;
    margin-bottom: 1rem;
}
.article-editor-quote__body strong { font-style: normal; color: var(--text-bright); }
.article-editor-quote__attribution {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.88rem;
}
.article-editor-quote__attribution-name {
    color: var(--text);
    font-weight: 600;
}
.article-editor-quote__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.55rem 1.1rem;
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}
.article-editor-quote__cta:hover { background: #00B5DC; }
@media (max-width: 600px) {
    .article-editor-quote__attribution { flex-wrap: wrap; gap: 0.6rem; }
    .article-editor-quote__cta { margin-left: 0; flex-grow: 1; justify-content: center; }
}

/* ---------- CTA pattern 7: --scorecard-snapshot ---------- */
.article-scorecard {
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem 1.6rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.article-scorecard__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.article-scorecard__logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}
.article-scorecard__name {
    font-family: var(--f-display);
    font-size: 1.4rem;
    color: var(--text-bright);
    line-height: 1.2;
    margin: 0;
}
.article-scorecard__overall { margin-left: auto; text-align: right; }
.article-scorecard__overall-num {
    font-family: var(--f-mono);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.article-scorecard__overall-label {
    color: var(--text-dim);
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.2rem;
}
.article-scorecard__rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem 1.5rem;
    margin-bottom: 1.25rem;
}
.article-scorecard__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    font-size: 0.92rem;
}
.article-scorecard__row-label {
    color: var(--text-dim);
    flex: 1;
    text-transform: capitalize;
}
.article-scorecard__row-bar {
    width: 70px;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.article-scorecard__row-bar-fill {
    display: block;
    height: 100%;
    background: var(--cyan);
    border-radius: 3px;
}
.article-scorecard__row-num {
    color: var(--text);
    font-family: var(--f-mono);
    font-size: 0.85rem;
    font-weight: 700;
    width: 38px;
    text-align: right;
}
.article-scorecard__cta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.article-scorecard__cta a {
    flex: 1;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
}
.article-scorecard__cta-primary {
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    cursor: pointer;
}
.article-scorecard__cta-primary:hover { background: #00B5DC; }
.article-scorecard__cta-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.article-scorecard__cta-ghost:hover { color: var(--text); border-color: var(--text-muted); }
@media (max-width: 600px) {
    .article-scorecard__rows { grid-template-columns: 1fr; }
}

/* ---------- CTA pattern 8: --checklist-pass ---------- */
.article-checklist-pass {
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.article-checklist-pass__eyebrow {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00FF94;
    margin-bottom: 0.85rem;
}
.article-checklist-pass__items {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}
.article-checklist-pass__item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 0.7rem;
    align-items: start;
    padding: 0.45rem 0;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
}
.article-checklist-pass__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 255, 148, 0.12);
    border: 1px solid rgba(0, 255, 148, 0.4);
    color: #00FF94;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.article-checklist-pass__featured {
    margin-top: 0.5rem;
    padding: 1rem 1.15rem;
    background: rgba(0, 217, 255, 0.04);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
}
.article-checklist-pass__featured img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.article-checklist-pass__featured-text {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
}
.article-checklist-pass__featured-text strong { color: var(--text-bright); }
.article-checklist-pass__featured-cta {
    padding: 0.55rem 1.1rem;
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.article-checklist-pass__featured-cta:hover { background: #00B5DC; }
@media (max-width: 600px) {
    .article-checklist-pass__featured { grid-template-columns: auto 1fr; }
    .article-checklist-pass__featured-cta {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }
}

/* ---------- CTA pattern 9: --leaderboard ---------- */
.article-leaderboard {
    margin: 2.25rem 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.article-leaderboard__head {
    background: var(--bg-2);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.article-leaderboard__title {
    font-family: var(--f-display);
    font-size: 1.2rem;
    color: var(--text-bright);
    margin: 0;
    letter-spacing: -0.005em;
}
.article-leaderboard__sub {
    font-family: var(--f-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-top: 0.3rem;
}
.article-leaderboard__row {
    display: grid;
    grid-template-columns: 36px auto 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 1.5rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.18s;
}
.article-leaderboard__row:last-child { border-bottom: none; }
.article-leaderboard__row:hover { background: rgba(0, 217, 255, 0.025); }
.article-leaderboard__row--top { background: rgba(0, 255, 148, 0.04); }
.article-leaderboard__rank {
    font-family: var(--f-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cyan);
    text-align: center;
}
.article-leaderboard__row--top .article-leaderboard__rank { color: #00FF94; }
.article-leaderboard__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.article-leaderboard__name {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}
.article-leaderboard__name-sub {
    color: var(--text-dim);
    font-size: 0.82rem;
    margin-top: 0.2rem;
    line-height: 1.3;
}
.article-leaderboard__metric {
    font-family: var(--f-mono);
    color: var(--text-bright);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: right;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
}
.article-leaderboard__metric-label {
    display: block;
    color: var(--text-dim);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
    margin-bottom: 0.15rem;
}
.article-leaderboard__btn {
    padding: 0.5rem 0.95rem;
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.article-leaderboard__btn:hover { background: #00B5DC; }
@media (max-width: 700px) {
    .article-leaderboard__row {
        grid-template-columns: 32px 32px 1fr;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }
    .article-leaderboard__metric {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 0;
        border-left: none;
        border-top: 1px dashed var(--border);
        padding-top: 0.5rem;
        margin-top: 0.3rem;
    }
    .article-leaderboard__btn { grid-column: 1 / -1; text-align: center; margin-top: 0.4rem; }
}

/* ---------- CTA pattern 10: --duel ---------- */
.article-duel {
    margin: 2.25rem 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}
.article-duel__side {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 1.5rem 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
}
.article-duel__side:first-child { border-radius: var(--r-md) 0 0 var(--r-md); border-right: none; }
.article-duel__side:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; border-left: none; }
.article-duel__profile {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cyan);
    margin-bottom: 0.85rem;
    font-weight: 700;
}
.article-duel__side:last-child .article-duel__profile { color: #FF00AA; }
.article-duel__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; }
.article-duel__logo { width: 44px; height: 44px; object-fit: contain; }
.article-duel__brand {
    font-family: var(--f-display);
    font-size: 1.3rem;
    color: var(--text-bright);
    line-height: 1.2;
}
.article-duel__pitch {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.5;
    flex: 1;
    margin-bottom: 1rem;
}
.article-duel__pitch strong { color: var(--text); }
.article-duel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    background: var(--cyan);
    color: #000;
    border: 1px solid var(--cyan);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.article-duel__side:last-child .article-duel__btn {
    background: #FF00AA;
    border-color: #FF00AA;
    color: #fff;
}
.article-duel__btn:hover { background: #00B5DC; }
.article-duel__side:last-child .article-duel__btn:hover { background: #d6008f; }
.article-duel__divider {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-weight: 700;
    color: var(--text-dim);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    align-self: center;
    margin: 0 -28px;
    z-index: 2;
    position: relative;
}
@media (max-width: 700px) {
    .article-duel { grid-template-columns: 1fr; gap: 0.6rem; }
    .article-duel__side:first-child,
    .article-duel__side:last-child { border-radius: var(--r-md); border: 1px solid var(--border); }
    .article-duel__divider { margin: 0 auto; align-self: center; }
}

/* ---------- CTA pattern 11: --calendar (Q1-Q4 strip) ---------- */
.article-calendar {
    margin: 2.25rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
}
.article-calendar__cell {
    padding: 1.1rem 1rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cyan);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: border-color 0.18s;
}
.article-calendar__cell:hover { border-color: var(--cyan); }
.article-calendar__quarter {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
}
.article-calendar__theme {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
}
.article-calendar__pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
}
.article-calendar__pick img { width: 22px; height: 22px; object-fit: contain; }
.article-calendar__pick strong { color: var(--text); }
.article-calendar__btn {
    display: inline-flex;
    justify-content: center;
    padding: 0.45rem 0.7rem;
    background: rgba(0, 217, 255, 0.08);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--r-sm);
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.article-calendar__btn:hover { background: var(--cyan); color: #000; }
@media (max-width: 800px) { .article-calendar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .article-calendar { grid-template-columns: 1fr; } }

/* ---------- CTA pattern 12: --tier-list ---------- */
.article-tierlist { margin: 2.25rem 0; }
.article-tierlist__row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.55rem;
}
.article-tierlist__tier {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    font-family: var(--f-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.article-tierlist__row--s .article-tierlist__tier { background: linear-gradient(135deg, #00FF94 0%, #00C76F 100%); color: #002814; }
.article-tierlist__row--a .article-tierlist__tier { background: linear-gradient(135deg, #00D9FF 0%, #00B5DC 100%); color: #001a23; }
.article-tierlist__row--b .article-tierlist__tier { background: linear-gradient(135deg, #FFB800 0%, #FF8800 100%); color: #2c1f00; }
.article-tierlist__row--c .article-tierlist__tier { background: linear-gradient(135deg, #FF00AA 0%, #c70077 100%); color: #2c0020; }
.article-tierlist__operators {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    flex-wrap: wrap;
}
.article-tierlist__op {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 100px;
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s;
    cursor: pointer;
}
.article-tierlist__op:hover { border-color: var(--cyan); background: rgba(0, 217, 255, 0.06); }
.article-tierlist__op img { width: 20px; height: 20px; object-fit: contain; }
.article-tierlist__op-name { color: var(--text); font-size: 0.88rem; font-weight: 600; }
.article-tierlist__note {
    margin-top: 0.85rem;
    color: var(--text-dim);
    font-size: 0.86rem;
    line-height: 1.5;
    padding: 0 0.25rem;
}

/* ---------- CTA pattern 13: --trend-cards ---------- */
.article-trends {
    margin: 2.25rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
.article-trend-card {
    padding: 1.25rem 1.4rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    position: relative;
    transition: border-color 0.18s;
}
.article-trend-card:hover { border-color: var(--cyan); }
.article-trend-card__num {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.article-trend-card__name {
    font-family: var(--f-display);
    font-size: 1.05rem;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.article-trend-card__detail {
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.article-trend-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.4rem 0.45rem;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid var(--cyan-dim);
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.article-trend-card__pill:hover { background: var(--cyan); }
.article-trend-card__pill:hover .article-trend-card__pill-name { color: #000; }
.article-trend-card__pill img { width: 18px; height: 18px; object-fit: contain; }
.article-trend-card__pill-name {
    color: var(--cyan);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s;
}
@media (max-width: 700px) { .article-trends { grid-template-columns: 1fr; } }

/* ---------- CTA pattern 14: --tenure-timeline ---------- */
.article-timeline {
    margin: 2.25rem 0 2.5rem;
    padding: 1.5rem 1.75rem 2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow-x: auto;
}
.article-timeline__title {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cyan);
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.article-timeline__list {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 600px;
    padding-bottom: 1rem;
    position: relative;
}
.article-timeline__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    height: 2px;
    background: linear-gradient(to right, var(--border) 0%, var(--cyan-dim) 100%);
}
.article-timeline__entry {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.5rem;
    position: relative;
}
.article-timeline__op {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-2);
    border: 2px solid var(--cyan);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: transform 0.18s, border-color 0.18s;
    cursor: pointer;
    margin-bottom: 0.5rem;
    z-index: 2;
}
.article-timeline__op:hover { transform: translateY(-3px); border-color: #00FF94; }
.article-timeline__op img { width: 26px; height: 26px; object-fit: contain; }
.article-timeline__op-name {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}
.article-timeline__dot {
    width: 14px;
    height: 14px;
    background: var(--cyan);
    border: 2px solid var(--bg-2);
    border-radius: 50%;
    z-index: 2;
}
.article-timeline__year {
    margin-top: 0.5rem;
    color: var(--text-dim);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}
.article-timeline__tenure {
    color: var(--text);
    font-family: var(--f-mono);
    font-size: 0.68rem;
    margin-top: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* === Verified references block (Test 18 E-E-A-T deep signals) === */
.verified-references {
    margin: 2rem auto 2rem;
    max-width: var(--container-narrow);
    padding: 1.5rem 1.85rem 1.6rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--acid);
    border-radius: var(--r-md);
}
.verified-references__title {
    color: var(--acid);
    font-family: var(--f-display);
    font-size: 1.15rem;
    margin: 0 0 0.65rem;
    letter-spacing: -0.005em;
}
.verified-references__intro {
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0 0 0.85rem;
}
.verified-references__list {
    margin: 0.5rem 0 0.85rem;
    padding-left: 1.1rem;
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.55;
}
.verified-references__list li {
    margin-bottom: 0.5rem;
}
.verified-references__list strong { color: var(--text); }
.verified-references__list a {
    color: var(--cyan);
    border-bottom: 1px dashed var(--cyan-dim);
}
.verified-references__list a:hover { color: var(--cyan-hot); }
.verified-references__updated {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* === /best/ pillar + per-page tighter section spacing per user feedback === */
body.tpl-best-list section,
body.tpl-best section {
    padding: 1.5rem 0;
}
body.tpl-best-list section:first-of-type,
body.tpl-best section:first-of-type {
    padding-top: 1.25rem;
}
/* Tighter spacing on alt-page-footer on best pages */
body.tpl-best .alt-page-footer { margin-top: 1.5rem; }
body.tpl-best .alt-method-callout { margin-top: 1.5rem; margin-bottom: 1rem; }

/* === /alternatives/ pillar HUB HERO - friction-pivot decision-flow visual ===
   Same skeleton as /best/ pillar (1fr minmax(280px,360px), aspect 1/1) so
   text column is wide enough for 4 stat items in a single row. */
.alt-hub-hero {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.5rem;
}
.alt-hub-hero__grid {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 2.5rem;
    align-items: center;
}
.alt-hub-hero__text { display: flex; flex-direction: column; }
.alt-hub-hero__eyebrow {
    display: inline-block;
    width: fit-content;
    padding: 0.32rem 0.7rem;
    background: rgba(255, 0, 170, 0.12);
    color: #FF00AA;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(255, 0, 170, 0.32);
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.alt-hub-hero__title {
    font-family: var(--f-display);
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.15;
    color: var(--text-bright);
    margin: 0 0 0.85rem;
}
.alt-hub-hero__lead {
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    max-width: 720px;
}
.alt-hub-hero__stat-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.alt-hub-hero__stat-item { display: flex; flex-direction: column; }
.alt-hub-hero__stat-num {
    font-family: var(--f-display);
    font-size: 1.95rem;
    font-weight: 800;
    color: #FF00AA;
    line-height: 1;
}
.alt-hub-hero__stat-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.32rem;
}
.alt-hub-hero__visual {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #0A0E1A, #11162A 60%, #1A1F3A);
    line-height: 0;
}
.alt-hub-hero__visual svg { display: block; width: 100%; height: 100%; }
@media (max-width: 880px) {
    .alt-hub-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .alt-hub-hero__visual { max-width: 320px; margin: 0 auto; order: -1; }
    .alt-hub-hero__stat-row {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        text-align: center;
    }
    .alt-hub-hero__stat-item { align-items: center; }
}

/* tighter section padding on alternatives pillar to match best */
body.tpl-alternatives-list section,
body.tpl-alternatives section {
    padding: 1.5rem 0;
}
body.tpl-alternatives-list section:first-of-type,
body.tpl-alternatives section:first-of-type {
    padding-top: 1.25rem;
}

/* === /alternatives/{slug}/ per-page friction-pivot hero === */
.alt-page-hero {
    padding: 1.5rem 0 1.25rem;
}
.alt-page-hero__grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: center;
}
/* Hero source-block — site-style square (matches alt-page-footer / cards / methodology cards) */
.alt-page-hero__source {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    min-height: 200px;
    gap: 1.1rem;
}
.alt-page-hero__source-eyebrow {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}
.alt-page-hero__source-brand {
    font-family: var(--f-display);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-bright);
    letter-spacing: 0.05em;
}
.alt-page-hero__source-marker {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 700;
    margin: 0;
}
.alt-page-hero__pivot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
}
.alt-page-hero__pivot svg {
    width: 80px;
    height: 60px;
}
.alt-page-hero__pivot-label {
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FF00AA;
    font-weight: 700;
    line-height: 1.3;
    max-width: 100px;
}
.alt-page-hero__text { display: flex; flex-direction: column; }
.alt-page-hero__title {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.18;
    color: var(--text-bright);
    margin: 0.5rem 0 0.7rem;
}
.alt-page-hero__lead {
    color: var(--text-dim);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0 0 0.6rem;
}
@media (max-width: 768px) {
    .alt-page-hero__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .alt-page-hero__source { max-width: 220px; margin: 0 auto; }
}

/* === SHARED hub-hero pattern for all 4 pillars (best/alternatives/casinos/compare/home) ===
   Each pillar has its own .{name}-hub-hero class but they share the same internal structure.
   This block defines reusable styles for casinos-/compare-/home- variants matching the
   /best/ pattern user explicitly approved as the visual reference. */

.casinos-hub-hero,
.compare-hub-hero,
.home-hub-hero {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.5rem;
}
.casinos-hub-hero__grid,
.compare-hub-hero__grid,
.home-hub-hero__grid {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 2.5rem;
    align-items: center;
}
.casinos-hub-hero__text,
.compare-hub-hero__text,
.home-hub-hero__text { display: flex; flex-direction: column; }

/* === eyebrow chip — colour per hub === */
.casinos-hub-hero__eyebrow,
.compare-hub-hero__eyebrow,
.home-hub-hero__eyebrow {
    display: inline-block;
    width: fit-content;
    padding: 0.32rem 0.7rem;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.casinos-hub-hero__eyebrow {
    background: rgba(0, 217, 255, 0.12);
    color: #00D9FF;
    border: 1px solid rgba(0, 217, 255, 0.32);
}
.compare-hub-hero__eyebrow {
    background: rgba(255, 184, 0, 0.12);
    color: #FFB800;
    border: 1px solid rgba(255, 184, 0, 0.32);
}
.home-hub-hero__eyebrow {
    background: rgba(0, 255, 148, 0.12);
    color: #00FF94;
    border: 1px solid rgba(0, 255, 148, 0.32);
}

/* === H1 + lead === */
.casinos-hub-hero__title,
.compare-hub-hero__title,
.home-hub-hero__title {
    font-family: var(--f-display);
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.15;
    color: var(--text-bright);
    margin: 0 0 0.85rem;
}
.casinos-hub-hero__lead,
.compare-hub-hero__lead,
.home-hub-hero__lead {
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    max-width: 720px;
}

/* === stat-row === */
.casinos-hub-hero__stat-row,
.compare-hub-hero__stat-row,
.home-hub-hero__stat-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.casinos-hub-hero__stat-item,
.compare-hub-hero__stat-item,
.home-hub-hero__stat-item { display: flex; flex-direction: column; }
.casinos-hub-hero__stat-num {
    font-family: var(--f-display);
    font-size: 1.95rem;
    font-weight: 800;
    color: #00D9FF;
    line-height: 1;
}
.compare-hub-hero__stat-num {
    font-family: var(--f-display);
    font-size: 1.95rem;
    font-weight: 800;
    color: #FFB800;
    line-height: 1;
}
.home-hub-hero__stat-num {
    font-family: var(--f-display);
    font-size: 1.95rem;
    font-weight: 800;
    color: #00FF94;
    line-height: 1;
}
.casinos-hub-hero__stat-label,
.compare-hub-hero__stat-label,
.home-hub-hero__stat-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.32rem;
}

/* === cta-row (home only) === */
.home-hub-hero__cta-row {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1.25rem;
}

/* === SVG visual container ===
   Square aspect-ratio matching /best/ pattern. Internal SVG viewBoxes
   (320×280) are slightly rectangular; preserveAspectRatio="xMidYMid meet"
   inside the SVG centres them inside the square box. */
.casinos-hub-hero__visual,
.compare-hub-hero__visual,
.home-hub-hero__visual {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #0A0E1A, #11162A 60%, #1A1F3A);
    line-height: 0;
}
.casinos-hub-hero__visual svg,
.compare-hub-hero__visual svg,
.home-hub-hero__visual svg { width: 100%; height: 100%; display: block; }

@media (max-width: 880px) {
    .casinos-hub-hero__grid,
    .compare-hub-hero__grid,
    .home-hub-hero__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .casinos-hub-hero__visual,
    .compare-hub-hero__visual,
    .home-hub-hero__visual { max-width: 320px; margin: 0 auto; order: -1; }
    .casinos-hub-hero__stat-row,
    .compare-hub-hero__stat-row,
    .home-hub-hero__stat-row { justify-content: center; }
    /* Per-item centring on mobile — the row is centred but each <stat-item> is a
       flex column with left-aligned children by default. On phones (where the 4
       stats fall into a 2×2 grid) this looks ragged; centring the column items
       and the inner text gives a balanced 2×2 grid. */
    .casinos-hub-hero__stat-row,
    .compare-hub-hero__stat-row,
    .home-hub-hero__stat-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        text-align: center;
    }
    .casinos-hub-hero__stat-item,
    .compare-hub-hero__stat-item,
    .home-hub-hero__stat-item {
        align-items: center;
    }
}

/* === tighter section padding on these pillars (matching /best/ + /alternatives/ pattern) === */
body.tpl-casinos-list section,
body.tpl-compare-list section,
body.tpl-home section {
    padding: 1.5rem 0;
}
body.tpl-casinos-list section:first-of-type,
body.tpl-compare-list section:first-of-type,
body.tpl-home section:first-of-type {
    padding-top: 1.25rem;
}

/* === Leaderboard table CTA buttons (Play / Review per row) ===
   Reuses the EXACT same .btn .btn-primary + .alt-card__review-link
   classes used on /alternatives/{slug}/ alt-card. Only layout overrides here. */
.leaderboard-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 170px;
}
.leaderboard-actions .btn-primary {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.leaderboard-actions .alt-card__review-link {
    text-align: center;
    font-size: 0.78rem;
}
.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
    width: 200px;
    min-width: 170px;
    text-align: center;
}
@media (max-width: 720px) {
    .leaderboard-actions { min-width: 0; }
    .leaderboard-actions .btn-primary { font-size: 0.78rem; padding: 0.45rem 0.55rem; }
    .leaderboard-actions .alt-card__review-link { font-size: 0.72rem; }
    .leaderboard-table th:last-child,
    .leaderboard-table td:last-child { width: auto; min-width: 0; }
}

/* === Cross-cluster grid: 4-column variant for /home/ pillar === */
.cross-cluster-grid--4col {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1024px) {
    .cross-cluster-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .cross-cluster-grid--4col { grid-template-columns: 1fr; }
}

/* === Rich cross-cluster card with visual icon/logo at top === */
.cross-cluster-card--rich {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1rem;
}
.cross-cluster-card__visual {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-1);
    border-radius: var(--r-sm);
    margin-bottom: 0.4rem;
}
.cross-cluster-card__visual img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: brightness(1.05);
}
/* Centered variant for /alternatives/ migration cards. Operator logo is the
   PNG-transparent logo_300 (300x100 ratio, no background). Per-PNG art varies:
   Rollbit/1xSlots fill ~90% of the canvas, Stake/Roobet only ~40%. To make all
   logos read at a similar visual size we give the box the largest sane footprint
   the 3-col grid allows (220x90), object-fit:contain, and bump brightness +
   add a soft drop-shadow so dark-on-dark marks (Roobet) stay legible. */
.cross-cluster-card__visual--centered {
    width: 100%;
    max-width: 220px;
    height: 90px;
    margin: 0 auto 0.85rem;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cross-cluster-card__visual--centered .cross-cluster-card__brand-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(1.15) drop-shadow(0 0 4px rgba(255, 255, 255, 0.12));
}
.cross-cluster-card--rich:has(.cross-cluster-card__visual--centered) {
    text-align: center;
}
.cross-cluster-card--rich:has(.cross-cluster-card__visual--centered) .cross-cluster-card__rank,
.cross-cluster-card--rich:has(.cross-cluster-card__visual--centered) .cross-cluster-card__title,
.cross-cluster-card--rich:has(.cross-cluster-card__visual--centered) .cross-cluster-card__meta {
    text-align: center;
}
.cross-cluster-card--best   .cross-cluster-card__visual { color: #32dc82; }
.cross-cluster-card--alternatives .cross-cluster-card__visual { color: #FF00AA; }
.cross-cluster-card--blog   .cross-cluster-card__visual { color: #ffc850; }
.cross-cluster-card--scorecard .cross-cluster-card__visual { color: var(--cyan); }
.cross-cluster-card--matchup .cross-cluster-card__visual { color: #a566ff; }
.cross-cluster-card--alternatives { border-left: 3px solid #FF00AA; }

/* === Mobile padding & gap fixes for grid layouts ===
   On <600px screens content blocks used to butt up against the container edge.
   Container gets 1.25rem side-padding (was 1rem) so border-blocks have air on both sides. */
@media (max-width: 600px) {
    .container { padding: 0 1.25rem; }
    .compare-grid,
    .ranking-preview-grid,
    .cross-cluster-grid,
    .ranking-card-grid,
    .alt-cluster-grid {
        gap: 0.85rem;
        margin-left: 0;
        margin-right: 0;
    }
    .compare-teaser,
    .casino-card,
    .ranking-preview,
    .ranking-card,
    .cross-cluster-card,
    .alt-cluster-card {
        padding: 1rem;
    }
    /* Quick-compare form on mobile: stack vertically + LOTS of breathing room INSIDE the bordered block
       so children (selects, button, headings) never touch the cyan border on either side. */
    .quick-compare {
        padding: 1.75rem 2rem !important;
        margin: 1.5rem 0.5rem !important;
        box-sizing: border-box !important;
    }
    .quick-compare h2,
    .quick-compare h3 {
        font-size: 1.1rem;
        line-height: 1.3;
        padding: 0 0.25rem;
    }
    .quick-compare > p {
        padding: 0 0.25rem;
        font-size: 0.9rem;
    }
    .quick-compare__row {
        grid-template-columns: 1fr;
        grid-row-gap: 0.85rem;
        column-gap: 0;
        max-width: 100%;
    }
    .quick-compare__vs {
        text-align: center;
        font-size: 1rem;
        padding: 0;
        margin: 0.2rem 0;
    }
    .quick-compare__select {
        width: 100%;
        max-width: 100%;
        font-size: 0.92rem;
        box-sizing: border-box;
    }
    /* Compare CTA — fixed 200px width centered, NOT full-width on mobile */
    .quick-compare .btn-primary,
    .quick-compare button[type="submit"] {
        width: 200px;
        max-width: 100%;
        box-sizing: border-box;
        justify-self: center;
        margin-top: 0.4rem;
    }
    /* Casino-card on mobile: stack avatar+body+score vertically */
    .casino-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .casino-card__rank,
    .casino-card__score {
        justify-self: start;
    }
    /* Leaderboard table on mobile: tighter cells, smaller font */
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.78rem;
    }
}

/* === Highlighted "all-of-cluster" pillar-redirect card ===
   Shown as the 4th item in cross-cluster-grid on pillars to draw attention
   to the sibling pillar URL. Visually distinct: gradient bg, brighter border. */
.cross-cluster-card--pillar-redirect {
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 217, 255, 0.08) 100%);
    border: 1px solid var(--cyan-dim);
    border-left-width: 4px;
    position: relative;
}
.cross-cluster-card--pillar-redirect::after {
    content: "→";
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.3rem;
    color: var(--cyan);
    font-weight: 700;
    line-height: 1;
}
.cross-cluster-card--pillar-redirect:hover {
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(0, 217, 255, 0.16) 100%);
    border-color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 217, 255, 0.2);
}
.cross-cluster-card--pillar-redirect .cross-cluster-card__rank {
    color: var(--cyan-hot);
    letter-spacing: 0.18em;
}
.cross-cluster-card--pillar-redirect .cross-cluster-card__title {
    color: var(--text-bright);
    font-weight: 700;
}

/* ============================================================
   Methodology sidebar — rich cards (head-to-heads, recommended, alts, blog)
   ============================================================ */
.method-sidebar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-1);
    color: var(--cyan);
    margin-bottom: 0.6rem;
    border: 1px solid var(--cyan-dim);
}
.method-sidebar__card--matchups .method-sidebar__icon { color: #a566ff; border-color: rgba(165, 102, 255, 0.4); }
.method-sidebar__card--recommend .method-sidebar__icon { color: #32dc82; border-color: rgba(50, 220, 130, 0.4); }
.method-sidebar__card--alts .method-sidebar__icon { color: #FF00AA; border-color: rgba(255, 0, 170, 0.4); }
.method-sidebar__card--blog .method-sidebar__icon { color: #FFB800; border-color: rgba(255, 184, 0, 0.4); }

.method-sidebar__card--matchups { border-left: 3px solid #a566ff; }
.method-sidebar__card--recommend { border-left: 3px solid #32dc82; }
.method-sidebar__card--alts { border-left: 3px solid #FF00AA; }
.method-sidebar__card--blog { border-left: 3px solid #FFB800; }

/* === Head-to-head list === */
.method-sidebar__hth-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.85rem;
}
.method-sidebar__hth-list li { margin-bottom: 0.4rem; }
.method-sidebar__hth {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: all var(--t-base);
}
.method-sidebar__hth:hover {
    border-color: var(--cyan-dim);
    background: rgba(0, 217, 255, 0.04);
}
.method-sidebar__hth-pair {
    color: var(--text-bright);
    font-size: 0.86rem;
    font-weight: 600;
}
.method-sidebar__hth-score {
    font-family: var(--f-mono);
    font-weight: 800;
    color: var(--cyan);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* === Casino list (recommend / alts) === */
.method-sidebar__casino-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.85rem;
}
.method-sidebar__casino-list li { margin-bottom: 0.4rem; }
.method-sidebar__casino {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.7rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: all var(--t-base);
}
.method-sidebar__casino:hover {
    border-color: var(--cyan-dim);
    background: rgba(0, 217, 255, 0.04);
}
.method-sidebar__casino img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: var(--bg-2);
    border-radius: 4px;
    padding: 2px;
}
.method-sidebar__casino-name {
    color: var(--text-bright);
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.method-sidebar__casino-rating {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--acid);
    line-height: 1;
}
.method-sidebar__casino-rating span {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* === Blog list === */
.method-sidebar__blog-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.85rem;
}
.method-sidebar__blog-list li { margin-bottom: 0.4rem; }
.method-sidebar__blog-link {
    display: block;
    padding: 0.55rem 0.7rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: all var(--t-base);
}
.method-sidebar__blog-link:hover {
    border-color: var(--cyan-dim);
    background: rgba(0, 217, 255, 0.04);
}
.method-sidebar__blog-cat {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFB800;
    margin-bottom: 0.2rem;
    font-weight: 700;
}
.method-sidebar__blog-title {
    color: var(--text-bright);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
}

/* === CTA at the bottom of each sidebar card === */
.method-sidebar__cta {
    display: inline-block;
    padding: 0.4rem 0.65rem;
    color: var(--cyan);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed var(--cyan-dim);
    transition: all var(--t-fast);
}
.method-sidebar__cta:hover {
    color: var(--cyan-hot);
    border-bottom-color: var(--cyan-hot);
}

/* === First-hand bankroll test log (casino-review pages) =================
   Strong E-E-A-T signal block. Sits between editorial body and the
   Editorial-verdict CTA. Inline-styles avoided in template so this CSS
   is the single source of truth. */
.firsthand-log {
    padding: 2.5rem 0 1.5rem;
}
.firsthand-log__card {
    max-width: 880px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(0, 217, 255, 0.06), rgba(20, 28, 48, 0.6));
    border: 1px solid var(--border, #1F2640);
    border-left: 4px solid var(--cyan, #00D9FF);
    border-radius: var(--r-md, 10px);
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.firsthand-log__head { margin-bottom: 1.25rem; }
.firsthand-log__eyebrow {
    font-family: var(--f-body), system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan, #00D9FF);
    font-weight: 700;
    margin-bottom: 0.65rem;
}
.firsthand-log__title {
    margin: 0 0 0.7rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--text, #E8ECF1);
}
.firsthand-log__lede {
    margin: 0;
    color: var(--text-dim, #94A3B8);
    line-height: 1.6;
    font-size: 0.96rem;
}
.firsthand-log__lede a { color: var(--cyan, #00D9FF); border-bottom: 1px dashed rgba(0, 217, 255, 0.4); }
.firsthand-log__grid {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 1.25rem;
    display: grid;
    gap: 0.55rem;
}
.firsthand-log__row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    background: rgba(10, 14, 26, 0.4);
    border: 1px solid rgba(31, 38, 64, 0.7);
    border-radius: 8px;
}
.firsthand-log__row-label {
    font-family: var(--f-body), system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    font-weight: 700;
    align-self: center;
}
.firsthand-log__row-value {
    color: var(--text, #E8ECF1);
    font-size: 0.95rem;
    line-height: 1.5;
}
.firsthand-log__row-value strong { color: var(--cyan, #00D9FF); font-weight: 700; }
.firsthand-log__footer {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px dashed rgba(31, 38, 64, 0.8);
    color: var(--text-dim, #94A3B8);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.55;
}
.firsthand-log__footer a { color: var(--cyan, #00D9FF); border-bottom: 1px dashed rgba(0, 217, 255, 0.4); font-style: normal; }
@media (max-width: 640px) {
    .firsthand-log__card { padding: 1.25rem 1.1rem; }
    .firsthand-log__title { font-size: 1.15rem; }
    .firsthand-log__row { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.7rem 0.85rem; }
}