/* Comparison pages: a compact reading layout on top of pages.css.
   One narrow column, thin rules instead of heavy cards, tags that say which side wins a topic. */
body{font-size:17px;line-height:1.7}
.hero{padding-block:clamp(36px,5vw,64px) 8px;max-width:720px}
.hero h1{font-size:clamp(27px,3.6vw,38px);line-height:1.18;margin-top:18px}
.hero .lede{font-size:clamp(17px,1.5vw,18.5px);line-height:1.7;margin-top:16px}
.hero .meta{margin-top:14px;font-size:14px}
.eyebrow{font-size:12px;padding:7px 11px}
.art{grid-template-columns:minmax(0,720px);padding-block:clamp(20px,3vw,32px) clamp(56px,7vw,88px)}
.body{gap:16px}
.body h2{font-size:clamp(22px,2.4vw,26px);margin-top:40px;padding-top:28px}
.body h3{font-size:18px;margin-top:4px}
.body p,.body li{max-width:none}
.secnav a{padding:7px 13px;font-size:14px}
.secnav{padding-block:9px}

/* tags: who wins a topic, in our view */
.edge{display:inline-block;font:700 11.5px/1 var(--f-ui);letter-spacing:.03em;padding:5px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px}
.e-us{background:var(--blue-soft);color:var(--blue)}
.e-them{background:var(--sand);color:var(--ink)}
.e-even{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line)}
@media (prefers-color-scheme:dark){.e-us{color:#DCE4FF}}
.later{display:inline-block;margin-left:4px;font:700 10.5px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:3px 5px;vertical-align:1px;white-space:nowrap}

/* two columns: their strengths and ours */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--card);display:grid;gap:8px;align-content:start}
.side h3{margin:0;font-size:16.5px;font-family:var(--f-ui);font-weight:700}
.side.us h3{color:var(--blue)}
.side ul{list-style:none;display:grid;gap:7px}
.side li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.side li::before{content:"";position:absolute;left:1px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sand)}
.side.us li::before{background:var(--blue)}
@media (max-width:620px){.sides{grid-template-columns:1fr}}

/* topic table: topic, them, us, our take */
.tt-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.tt{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tt th,.tt td{padding:11px 13px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tt thead th{border-top:0;font:700 11.5px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
.tt tbody th{font-weight:600;color:var(--ink);width:19%}
.tt td{color:var(--ink-2)}
.tt td.take{width:112px}
@media (max-width:680px){
  .tt thead{display:none}
  .tt,.tt tbody,.tt tr,.tt th,.tt td{display:block;width:auto}
  .tt tr{padding:12px 14px;border-top:1px solid var(--line)}
  .tt tr:first-child{border-top:0}
  .tt tbody th,.tt td{border:0;padding:0}
  .tt tbody th{width:auto;margin-bottom:6px}
  .tt tbody td{width:auto;margin-top:4px}
  .tt td.take{width:auto;margin-top:8px}
  .tt td[data-l]::before{content:attr(data-l)": ";font-weight:700;color:var(--ink)}
}

/* screens */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:0}
.shots figure{margin:0;display:grid;gap:6px}
.shots img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:var(--paper)}
.shots figcaption{font-size:13px;line-height:1.4;color:var(--ink-3)}
.wide-shot{margin:0;display:grid;gap:6px}
.wide-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--paper)}
.wide-shot figcaption{font-size:13px;color:var(--ink-3)}

/* small lists, faq, sources, bottom links */
.faq{gap:10px}
summary{padding:16px 52px 16px 20px;font-size:16px}
summary::after{right:20px;font-size:22px}
details p{padding:0 20px 6px;font-size:15.5px}
details p:last-child{padding-bottom:18px}
details{box-shadow:none;border:1px solid var(--line)}
.srcs{list-style:none;display:grid;gap:6px;font-size:14.5px}
.related{gap:12px}
.related a{padding:18px 20px;box-shadow:none;border:1px solid var(--line);gap:6px}
.related b{font-size:16px}.related span{font-size:14.5px}
.steps{gap:14px}
.steps li{padding-left:44px;font-size:16px;line-height:1.6}
.steps li::before{width:28px;height:28px;font-size:14px;border-radius:8px}
.end{border-top:1px solid var(--line);margin-top:24px;padding-top:24px;display:grid;gap:12px}
.end h2{border:0;margin:0;padding:0}
.end .btns{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.end a.go{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:11px;background:var(--blue);color:#fff;font:700 15.5px/1 var(--f-ui);text-decoration:none}
.end a.go:hover{background:var(--blue-2)}
.end a.other{font:600 15px/1.4 var(--f-ui);color:var(--ink-2)}
.end small{font-size:13.5px;color:var(--ink-3)}
.note{font-size:14px;color:var(--ink-3)}