.guide-archive { width: min(var(--content), calc(100% - 2.5rem)); margin: 0 auto; padding-bottom: 5rem; }
.guide-archive-intro { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; padding:0 0 2rem; border-bottom:1px solid var(--line); }
.guide-archive-intro h2 { margin:0; font-size:clamp(1.6rem,2.5vw,2.2rem); line-height:1.12; }
.guide-archive-intro p { max-width:58ch; margin:0; color:var(--muted); }
.guide-section { padding-top:2.2rem; }
.guide-section > h2 { margin:0 0 1rem; font-size:1.35rem; }
.guide-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.guide-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); text-decoration:none; transition:transform 160ms ease, box-shadow 160ms ease; }
.guide-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.guide-card img { display:block; width:100%; height:clamp(150px, 14vw, 210px); object-fit:cover; background:var(--band); }
.guide-card-copy { display:flex; flex:1; flex-direction:column; padding:1rem; }
.guide-card small { color:var(--rust); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.guide-card h3 { margin:.4rem 0; font-size:1.08rem; line-height:1.25; }
.guide-card p { margin:.25rem 0 .9rem; color:var(--muted); font-size:.88rem; }
.guide-card span { margin-top:auto; color:var(--forest); font-size:.85rem; font-weight:750; }
.comparison-photos.official-photo-grid img { aspect-ratio:16 / 9; object-fit:contain; background:#f1f3ef; }
@media(max-width:760px) { .guide-archive-intro { grid-template-columns:1fr; gap:.7rem; } .guide-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:500px) { .guide-card-grid { grid-template-columns:1fr; } .guide-card img { height:150px; } }
@media(prefers-reduced-motion:reduce) { .guide-card { transition:none; } .guide-card:hover { transform:none; } }

/* Three equal product images for the Mac monitor guide. */
.monitor-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.monitor-photo-grid figure { min-width:0; margin:0; }
.monitor-photo-grid img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; border-radius:6px; background:#e8eee5; }
.monitor-photo-grid figcaption { margin-top:.55rem; color:var(--muted); font-size:.82rem; }
@media(max-width:760px) { .monitor-photo-grid { grid-template-columns:1fr; gap:1rem; } .monitor-photo-grid img { aspect-ratio:1.65; } }