/* Marketplace image requirement pages (/image-requirements/*).
   Linked only from those pages; builds on the tokens in main.css. */

.page-hero .ir-crumbs{order:-2;font-size:15px;line-height:1.4;color:var(--muted);margin:0 0 10px}
.ir-crumbs a{border-bottom:1px solid #cfcfcf}
.ir-crumbs a:hover{border-color:var(--ink)}
.ir-crumbs span[aria-hidden]{margin:0 6px}
.ir-nocap{text-transform:none}

.article .ir-answer{background:var(--card);border-left:4px solid var(--green);border-radius:12px;padding:20px 24px;margin-top:32px}
.article .ir-answer p{margin:0}
.article .ir-answer p+p{margin-top:10px}

.article .ir-toc{background:var(--card);border-radius:12px;padding:16px 24px 16px 44px;margin-top:24px;font-size:16px}
.article .ir-toc li{margin:4px 0}

/* tables: one scroll box per table, so the page itself never scrolls sideways */
.ir-table-wrap{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e4e4e4;border-radius:12px}
.article .ir-table-wrap table{display:table;width:100%;max-width:none;margin:0;border-collapse:collapse;font-size:16px;line-height:1.5}
.article .ir-table-wrap caption{caption-side:top;text-align:left;padding:12px 14px;font-size:14px;color:var(--muted);border-bottom:1px solid #e4e4e4}
.article .ir-table-wrap th,.article .ir-table-wrap td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #ececec;min-width:0}
.article .ir-table-wrap thead th{background:var(--card-alt);font-weight:600}
.article .ir-table-wrap tbody th{font-weight:600}
.article .ir-table-wrap tbody tr:last-child>*{border-bottom:0}
.article .ir-specs tbody th{width:30%}
.article .ir-compare{font-size:15px}
.article .ir-compare th,.article .ir-compare td{min-width:150px}
.article .ir-compare tbody th{position:sticky;left:0;z-index:1;background:#fff;min-width:120px}
.article .ir-compare thead th:first-child{position:sticky;left:0;z-index:2;min-width:120px}
.article .ir-wide th,.article .ir-wide td{min-width:128px}
/* the 8-column comparison breaks out of the 800px article column on desktop */
@media (min-width:810px){
  .article .ir-table-wrap.ir-wide{width:min(1240px,calc(100vw - 64px));position:relative;left:50%;transform:translateX(-50%)}
}

.article .ir-checklist{list-style:none;padding-left:0}
.article .ir-checklist li{position:relative;padding-left:34px}
.article .ir-checklist li::before{content:"";position:absolute;left:2px;top:6px;width:18px;height:18px;border:2px solid var(--ink);border-radius:5px}

.article figure{margin:32px 0 0}
.article figure img{margin:0 auto}
.article figcaption{font-size:15px;line-height:1.5;color:var(--muted);margin-top:10px;text-align:center}
.article .ir-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.article .ir-pair img{width:100%;height:auto;max-height:none;margin:0}

.article .ir-cta{background:var(--card);border-radius:16px;padding:28px 32px;margin-top:40px}
.article .ir-cta h3{margin-top:0}
.article .ir-cta .btn-row{justify-content:flex-start;flex-wrap:wrap;gap:12px;margin-top:20px}
.article .ir-cta .note{font-size:15px;color:var(--muted);margin-top:12px}

.article .ir-sources li,.article .ir-related li{font-size:16px}

@media (max-width:809px){
  .article .ir-table-wrap table{font-size:14px}
  .article .ir-table-wrap th,.article .ir-table-wrap td{padding:10px 12px}
  .article .ir-specs tbody th{width:auto;min-width:110px}
  .article .ir-compare th,.article .ir-compare td{min-width:140px}
  .article .ir-compare tbody th,.article .ir-compare thead th:first-child{min-width:104px}
  .article .ir-answer,.article .ir-cta{padding:18px}
  .article .ir-toc{padding:14px 18px 14px 36px}
}