/* ===== DESIGN GUIDE PAGE ===== */
/* Loaded only by design-guide.html. */
.guide-section { padding:64px 0; }
.guide-section + .guide-section { border-top:1px solid var(--border); padding-top:64px; }
.guide-icon-block { width:64px; height:64px; border-radius:var(--radius-lg); background:#e8f4fd; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.guide-icon-block svg { width:32px; height:32px; color:var(--accent); }
.format-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.format-card { background:var(--white); border:none; box-shadow:var(--shadow-sm); border-radius:var(--radius); padding:18px; text-align:center; }
.format-card .format-ext { font-size:1.3rem; font-weight:800; color:var(--primary); display:block; margin-bottom:6px; }
.format-card .format-type { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.format-card .format-type.vector { color:var(--success); }
.format-card .format-type.raster { color:#d97706; }
.format-card p { font-size:.8rem; color:var(--dark-grey); margin:0; }
.colour-swatch-row { display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; }
.colour-swatch { display:flex; flex-direction:column; align-items:center; gap:8px; }
.colour-swatch .swatch { width:64px; height:64px; border-radius:var(--radius); border:1px solid var(--border); }
.colour-swatch span { font-size:.78rem; font-weight:600; color:var(--dark-grey); }
.tech-dec-card { background:var(--white); border:none; box-shadow:var(--shadow-sm); border-radius:var(--radius-lg); padding:24px; }
.tech-dec-card h3 { font-size:1rem; margin-bottom:12px; }
.tech-dec-card ul { display:flex; flex-direction:column; gap:7px; }
.tech-dec-card ul li { font-size:.85rem; color:var(--dark-grey); position:relative; padding-left:1.4em; }
.tech-dec-card ul li::before { content:'→'; color:var(--accent); position:absolute; left:0; top:.1em; }