/* The North Edge — compatibility layer over tkm.css + aec.css.
   Styles legacy content classes emitted by the generator, using tkm tokens. */

/* hero heading (plain h1 inside aec hero) */
.aec-hero-in h1{font-family:var(--disp,'Bebas Neue',sans-serif);font-size:clamp(30px,5vw,52px);line-height:1.05;margin:6px 0 10px;color:#fff;letter-spacing:.5px}
.aec-hero-in h1 .hl{color:#ffd24a}
.aec-hero-in p{max-width:64rem;margin-left:auto;margin-right:auto}
.aec-hero-in .aec-byline a{color:#ffe9b0}

/* trust badges (ul variant) */
.trust-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 0;padding:0;list-style:none}
.trust-badges li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 12px;font-size:.8rem;color:#fff}

/* byline outside the hero (guides, infra) */
.tkm-body .aec-byline{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--muted)}
.aec-byline img{border-radius:50%}

/* misc legacy */
.rg-note{font-size:.82rem;color:var(--muted);margin-top:22px}
.rg-mini{display:block;font-size:.68rem;color:var(--muted);margin-top:4px}
.kicker{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}
.byline{font-size:.85rem;color:var(--muted)}

/* review cards (tkm-info + aec-rev) */
.tkm-info.aec-rev{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:start;margin:14px 0}
.tkm-info.aec-rev .op-logo{display:flex;align-items:center;justify-content:center;height:64px;background:linear-gradient(180deg,#f5f9fa,#fff);border:1px solid #e3ecee;border-radius:10px;padding:6px}
.tkm-info.aec-rev .op-logo img{max-height:48px;max-width:110px;object-fit:contain}
.tkm-info.aec-rev h3{margin:.1rem 0 .4rem}
@media (max-width:700px){.tkm-info.aec-rev{grid-template-columns:1fr}}

/* pros/cons two-column */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.pros-cons ul{margin:4px 0;padding-left:20px;font-size:.92rem}
@media (max-width:700px){.pros-cons{grid-template-columns:1fr}}

/* callouts (template uses .callout / .callout.warn) */
.callout{background:#eef6f8;border:1px solid #cfe3e8;border-left:4px solid var(--cta,#0c8a6a);border-radius:10px;padding:12px 16px;margin:14px 0}
.callout.warn{background:#fff7e8;border-color:#f1dfb4;border-left-color:#d97706}

/* numbered lists inherit tkm-ol look */
.tkm-body ol{padding-left:22px}
.tkm-body ol li{margin:.45rem 0}

/* review author box avatars */
.tkm-avatar{border-radius:50%}

/* guard: keep bon chips to one tidy line even with longer text */
.tkm-bon{max-width:250px}
.tkm-mcard .tkm-bon{max-width:100%}

/* toplist + comparison tables: full wrap width, centered — the 820px cap
   in tkm-body is a prose measure; the affiliate table should sit mid-page
   like the template's #toplist section */
.tkm-body .tkm-wrap>.tkm-filters,
.tkm-body .tkm-wrap>.tkm-desk-rows,
.tkm-body .tkm-wrap>.tkm-mobile-cards,
.tkm-body .tkm-wrap>.tkm-table-wrap{max-width:none;margin-left:auto;margin-right:auto}

/* ---- mobile above-the-fold: H1 + byline (author/updated) + toplist H2 + table.
   Hide the hero lede, trust badges and podium on small screens so the affiliate
   table lands above the fold. ---- */
@media (max-width:760px){
  .aec-hero-in{padding:20px 16px 14px}
  .aec-hero-in h1{font-size:26px;line-height:1.12;margin:4px 0 8px}
  .aec-hero-in>p:not(.aec-byline){display:none}
  .aec-hero-in .trust-badges{display:none}
  .aec-hero-in .aec-podium{display:none}
  .aec-byline{justify-content:center;font-size:.8rem}
  .tkm-body .tkm-wrap>h2:first-child{margin-top:14px;font-size:20px}
  .tkm-filters{margin-top:8px}
}