/* ============================================================
   COMPARE PAGES — extends style.css (loaded after it)
   Components: breadcrumbs, verdict caption box, tale-of-the-tape
   table, pricing-math table, choose panels, duel cards (hub),
   sources block, CTA band.
   ============================================================ */

.page--cmp{ max-width:1000px; }
.page--cmp .prose{ max-width:760px; }

/* screen-reader-only utility (accessible table captions etc.) */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Breadcrumbs ---- */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  justify-content:center; margin-bottom:1.1rem;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.crumbs a{ color:var(--steel); text-decoration:none; }
.crumbs a:hover{ color:var(--red-deep); text-decoration:underline; }
.crumbs span[aria-hidden]{ color:var(--gold-deep); }
.crumbs em{ font-style:normal; color:var(--ink); }

/* ---- Quick Verdict — comic narration caption box ---- */
.verdict{
  position:relative; max-width:760px; margin:1.9rem auto 2.4rem;
  background:var(--gold); border:4px solid var(--ink);
  box-shadow:var(--shadow-hard); padding:1.5rem 1.6rem 1.35rem;
  transform:rotate(-.5deg);
}
.verdict__tag{
  position:absolute; top:-1rem; left:1.1rem;
  font-family:var(--ff-comic); font-size:1.05rem; letter-spacing:.05em;
  background:var(--red); color:var(--cream); text-shadow:1.5px 1.5px 0 var(--ink);
  border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  padding:.15em .7em .1em; transform:rotate(-2deg);
}
.verdict p{ font-weight:600; line-height:1.6; color:var(--ink); margin:0; }
.verdict p + p{ margin-top:.7rem; }
.verdict strong{ color:var(--red-deep); }

/* ---- Tale of the Tape — trading-card stat table ---- */
.tape{ margin:2.4rem auto; max-width:900px; }
.tape__wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:14px 14px 16px; margin:-14px -14px -2px; }
table.tape__table{
  width:100%; min-width:640px; border-collapse:separate; border-spacing:0;
  background:var(--cream); border:4px solid var(--ink); box-shadow:var(--shadow-hard);
  font-size:.95rem;
}
.tape__table th, .tape__table td{
  padding:.85rem .95rem; border-bottom:3px solid var(--ink);
  text-align:left; vertical-align:top;
}
.tape__table tr:last-child th, .tape__table tr:last-child td{ border-bottom:0; }
.tape__table thead th{
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.03em;
  font-size:1.02rem; background:var(--navy); color:var(--cream);
  border-bottom-width:4px;
}
.tape__table thead th:first-child{ background:var(--navy); }
/* raised gold Agent Hero column */
.tape__table th.tape__us, .tape__table td.tape__us{
  background:var(--gold); border-left:3px solid var(--ink); border-right:3px solid var(--ink);
  font-weight:700;
}
.tape__table thead th.tape__us{ color:var(--ink); text-shadow:none; }
.tape__table tbody th[scope="row"]{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.04em; font-size:.88rem; color:var(--ink);
  background:var(--paper-2); min-width:130px;
  position:sticky; left:0; z-index:1; border-right:3px solid var(--ink);
}
.tape__table td{ font-weight:500; color:var(--ink-soft); }
.tape__table td .win{ font-weight:800; color:var(--ink); }
.tape__table td .win::before{ content:"✦ "; color:var(--red-deep); font-family:var(--ff-comic); }
.tape__table td .miss::before{ content:"✗ "; color:var(--red); font-family:var(--ff-comic); }
.tape__note{ font-size:.78rem; color:var(--steel); font-weight:600; margin-top:.7rem; text-align:center; }

/* ---- The Math — worked pricing receipt ---- */
.math{ margin:2.2rem auto; max-width:760px; }
.math__wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:14px; margin:-14px; }
table.math__table{
  width:100%; min-width:520px; border-collapse:separate; border-spacing:0;
  background:var(--cream); border:4px solid var(--ink); box-shadow:var(--shadow-hard-sm);
}
.math__table caption{
  caption-side:top; text-align:left; font-family:var(--ff-comic);
  font-size:1.15rem; letter-spacing:.04em; color:var(--red-deep);
  padding:0 0 .5rem .15rem;
}
.math__table th, .math__table td{
  padding:.7rem .95rem; border-bottom:2px solid rgba(22,19,29,.25);
  font-weight:600; text-align:left;
}
.math__table td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.math__table thead th{
  background:var(--navy); color:var(--cream); font-family:var(--ff-display);
  text-transform:uppercase; letter-spacing:.04em; font-weight:400; border-bottom:3px solid var(--ink);
}
.math__table .fee td{ color:var(--red-deep); }
.math__table .total th, .math__table .total td{
  background:var(--gold); border-top:3px solid var(--ink); border-bottom:0;
  font-weight:900; font-size:1.02rem;
}

/* ---- Choose panels — honest two-way recommendation ---- */
.choose{
  display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;
  max-width:860px; margin:2.2rem auto;
}
.choose__panel{
  background:var(--cream); border:4px solid var(--ink);
  box-shadow:var(--shadow-hard-sm); padding:1.4rem 1.4rem 1.2rem;
}
.choose__panel--us{ background:var(--gold); }
.choose__panel h3{
  font-family:var(--ff-display); text-transform:uppercase; font-size:1.2rem;
  margin-bottom:.8rem; -webkit-text-stroke:.4px var(--ink);
}
.choose__panel--us h3{ color:var(--red-deep); }
.choose__panel ul{ list-style:none; display:grid; gap:.6rem; }
.choose__panel li{ font-weight:600; padding-left:1.4rem; position:relative; font-size:.95rem; }
.choose__panel li::before{ content:"→"; position:absolute; left:0; font-weight:900; color:var(--steel); }
.choose__panel--us li::before{ content:"✦"; color:var(--red-deep); font-family:var(--ff-comic); }

/* ---- Hub: duel cards ---- */
.duels{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1.6rem; margin:2.2rem 0 1rem;
}
.duel{
  position:relative; display:block; background:var(--cream);
  border:4px solid var(--ink); box-shadow:var(--shadow-hard-sm);
  padding:1.35rem 1.3rem 1.2rem; text-decoration:none; color:var(--ink);
  transition:transform .18s, box-shadow .18s;
}
.duel:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.duel:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.duel__kicker{
  font-family:var(--ff-comic); font-size:.85rem; letter-spacing:.08em;
  color:var(--red-deep); display:block; margin-bottom:.35rem;
}
.duel__title{
  font-family:var(--ff-display); text-transform:uppercase; line-height:1.12;
  font-size:1.25rem; -webkit-text-stroke:.4px var(--ink);
}
.duel__title .vs{ color:var(--red); font-family:var(--ff-comic); -webkit-text-stroke:0; padding:0 .18em; }
.duel__sub{ font-size:.86rem; font-weight:600; color:var(--ink-soft); margin-top:.55rem; line-height:1.45; }
.duel__go{ display:inline-block; margin-top:.75rem; font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--red-deep); }
.duel--alt{ background:var(--navy); color:var(--cream); }
.duel--alt .duel__title{ color:var(--cream); -webkit-text-stroke:.4px var(--ink); text-shadow:2px 2px 0 rgba(0,0,0,.4); }
.duel--alt .duel__sub{ color:#cfc9bb; }
.duel--alt .duel__go{ color:var(--gold); }
.duels__section{ margin:2.6rem 0 .6rem; }
.duels__section h2{
  font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem;
  -webkit-text-stroke:.4px var(--ink);
}
.duels__section p{ font-weight:500; color:var(--ink-soft); margin-top:.3rem; }

/* ---- Sources / freshness block ---- */
.sources{
  max-width:760px; margin:2.6rem auto 0; padding:1.1rem 1.2rem;
  background:var(--paper-2); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  font-size:.8rem; color:var(--ink-soft); font-weight:500;
}
.sources h2{ font-family:var(--ff-display); text-transform:uppercase; font-size:.95rem; margin-bottom:.45rem; }
.sources ul{ list-style:none; display:grid; gap:.3rem; }
.sources a{ color:var(--red-deep); font-weight:600; word-break:break-word; }
.sources .stamp{
  display:inline-block; font-family:var(--ff-comic); letter-spacing:.05em;
  color:var(--red-deep); border:2px solid var(--red-deep); border-radius:3px;
  padding:.05em .5em; transform:rotate(-1.5deg); margin-bottom:.5rem;
}

/* ---- CTA band ---- */
.cmp-cta{
  position:relative; margin:3rem auto 0; max-width:860px;
  background:var(--navy); border:4px solid var(--ink); box-shadow:var(--shadow-hard);
  padding:2rem 1.8rem; text-align:center; overflow:hidden;
}
.cmp-cta::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(150,180,255,.5) 1.1px, transparent 1.6px);
  background-size:14px 14px; opacity:.1; mix-blend-mode:screen; pointer-events:none;
}
.cmp-cta h2{
  font-family:var(--ff-display); text-transform:uppercase; color:var(--cream);
  font-size:clamp(1.4rem,3.4vw,2rem); -webkit-text-stroke:.6px var(--ink);
  text-shadow:3px 3px 0 var(--red-deep); margin-bottom:.5rem; position:relative;
}
.cmp-cta p{ color:#d9d2c1; font-weight:500; max-width:52ch; margin:0 auto 1.2rem; position:relative; }
.cmp-cta .btn{ position:relative; }

/* ---- FAQ heading inside compare pages ---- */
.cmp-faq{ max-width:820px; margin:2.6rem auto 0; }
.cmp-faq > h2{
  font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem;
  text-align:center; margin-bottom:1.1rem; -webkit-text-stroke:.4px var(--ink);
}

/* ---- Responsive ---- */
@media (max-width:720px){
  .choose{ grid-template-columns:1fr; }
  .verdict{ margin-top:1.4rem; padding:1.3rem 1.15rem 1.15rem; }
  .tape__table{ font-size:.88rem; }
  .tape__table th, .tape__table td{ padding:.7rem .7rem; }
}
@media (prefers-reduced-motion: reduce){
  .duel{ transition:none; }
  .verdict{ transform:none; }
}