/* Pages B: /compatibility/, /imac/<year>/, /heritage/ (the light /imac/ page carries its own inline CSS for old Safari). */

/* ---------- product photo under a page heading ---------- */
.b-shot{max-width:620px;margin:32px auto 0}
.b-shot img{width:100%;height:auto}
.b-shot figcaption{margin-top:14px;text-align:center;font-size:14px;line-height:20px;color:var(--grey)}

/* ---------- specs: four headline tiles + a list of rows (Rivian-style) ---------- */
.b-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.b-specs__tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b-tile{display:flex;flex-direction:column;justify-content:center;min-height:150px;border-radius:28px;background:#f6f6f6;padding:24px 26px}
.b-tile span{font-size:14px;line-height:20px;color:var(--grey)}
.b-tile b{margin-top:6px;font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.015em}
.b-rows{border-radius:28px;background:#f6f6f6;padding:10px 28px}
.b-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:22px}
.b-row:last-child{border-bottom:0}
.b-row dt{color:var(--grey)}
.b-row dd{color:var(--ink)}

/* ---------- tiles with a short list (cables) ---------- */
.b-list{list-style:none;display:grid;gap:10px;margin-top:16px;font-size:15px;line-height:22px;color:#3a3a3a}
.b-list li{display:flex;gap:12px}
.b-list li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--blue)}
.card .b-get{margin-top:18px;font-size:15px;line-height:22px;color:var(--ink);font-weight:550}
.b-best{color:var(--blue)}
.b-links{max-width:700px;margin:28px auto 0;text-align:center;font-size:16px;line-height:26px;color:var(--grey)}
.b-links a,.card p a,.b-note a{color:var(--blue)}

/* ---------- year navigation ---------- */
.b-years{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.b-years a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:9999px;background:#f6f6f6;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .15s}
.b-years a:hover{background:#ececec}
.b-years a[aria-current]{background:var(--ink);color:#fff}
.b-nb{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.b-nb .card{align-items:center;text-align:center}
.b-nb img{width:200px;height:auto;margin-bottom:18px}
.b-nb .card__meta{margin-top:6px}

/* ---------- compatibility table ---------- */
.b-find{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;max-width:760px;margin:40px auto 0;border-radius:28px;background:#f6f6f6;padding:24px}
.b-find span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:15px;font-weight:600}
.b-find i{font-style:normal;color:var(--grey)}
.b-find p{flex-basis:100%;text-align:center;font-size:14px;line-height:20px;color:var(--grey)}
.b-ctbl{margin-top:48px}
.b-ctbl th,.b-ctbl td{white-space:normal}
.b-ctbl td{vertical-align:middle}
.b-ctbl .b-m{display:flex;align-items:center;gap:16px;min-width:230px}
.b-ctbl .b-m img{flex:none;width:72px;height:auto}
.b-ctbl .b-m b{display:block;font-size:17px;line-height:22px}
.b-ctbl .b-m b a:hover{color:var(--blue)}
.b-ctbl .b-m em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:18px;color:var(--grey)}
.b-ctbl small{display:block;font-size:13px;line-height:18px;color:var(--grey)}
.b-note{max-width:760px;margin:20px auto 0;text-align:center;font-size:15px;line-height:24px;color:var(--grey)}
.b-vs th:not(:first-child),.b-vs td:not(:first-child){width:28%}
.b-vs td:first-child{color:var(--grey);font-weight:550}

/* ---------- heritage ---------- */
.b-eras{max-width:900px;margin:56px auto 0;display:grid;gap:16px}
.b-era{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center}
.b-era__pic{display:flex;align-items:center;justify-content:center;height:240px;border-radius:28px;background:#f6f6f6;padding:28px}
.b-era__pic img{max-height:184px;width:auto}
.b-era__y{font-size:15px;line-height:20px;font-weight:600;color:var(--grey);font-variant-numeric:tabular-nums}
.b-era h2{margin-top:6px;font-size:30px;line-height:36px;font-weight:650;letter-spacing:-.02em}
.b-era p{margin-top:8px;font-size:17px;line-height:26px;color:var(--grey)}
.b-era--on h2::after{content:"Works with Encore";display:inline-block;vertical-align:middle;margin-left:12px;padding:3px 10px;border-radius:9999px;background:#f6f6f6;font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;color:var(--ink)}

@media (max-width:767px){
  .b-shot{margin-top:24px}
  .b-specs{grid-template-columns:1fr}
  .b-tile{min-height:112px;padding:18px 18px;border-radius:22px}
  .b-tile b{font-size:19px;line-height:24px}
  .b-rows{padding:6px 20px;border-radius:22px}
  .b-row{grid-template-columns:1fr;gap:2px}
  .b-nb{grid-template-columns:1fr 1fr;gap:12px}
  .b-nb .card{padding:20px 14px}
  .b-nb img{width:120px}
  .b-nb h3{font-size:17px;line-height:22px}
  /* the compatibility table turns into one tile per iMac */
  .b-ctbl thead{display:none}
  .b-ctbl,.b-ctbl tbody,.b-ctbl tr,.b-ctbl td{display:block;width:100%}
  .b-ctbl tr{border-radius:22px;background:#f6f6f6;padding:16px 18px;margin-top:12px}
  .b-ctbl tr:hover td{background:transparent}
  .b-ctbl td{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hair);text-align:right}
  .b-ctbl td:last-child{border-bottom:0}
  .b-ctbl td::before{content:attr(data-l);flex:none;max-width:45%;text-align:left;color:var(--grey);font-weight:500}
  .b-ctbl td.b-first{display:block;text-align:left;padding-top:0}
  .b-ctbl td.b-first::before{display:none}
  .b-ctbl small{display:inline}
  .tbl-wrap.b-flat{overflow:visible}
  .b-era{grid-template-columns:1fr;gap:20px}
  .b-era__pic{height:220px}
  .b-era h2{font-size:26px;line-height:32px}
  .b-era--on h2::after{display:table;margin:10px 0 0}
}
.b-in,.b-row a{color:var(--blue)}
.b-ctbl th:first-child{width:34%}
.b-ctbl .b-m{min-width:0}
.b-ctbl .b-m em span{white-space:nowrap}
.b-ctbl td.yes{white-space:nowrap}
.b-nb img{height:160px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:767px){.b-nb img{height:96px;width:auto}}
@media (max-width:767px){
  .b-ctbl td{display:block;overflow:hidden}
  .b-ctbl td::before{float:left;margin-right:16px}
  .b-ctbl small{display:block}
  .b-find{flex-direction:column;gap:8px}
  .b-find i{transform:rotate(90deg);line-height:16px}
}