/* PrinterCompare shared styles */
:root {
  --bg: #fafaf7;
  --surface: #fff;
  --text: #2a2825;
  --muted: #7d7871;
  --accent: #d94f00;
  --green: #16803c;
  --red: #c0392b;
  --border: #e8e4de;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; }
.site-badge { text-align:center; padding:1rem; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }
.site-badge a { color:var(--muted); text-decoration:none; }
.hero { max-width:760px; margin:0 auto; padding:4rem 1.5rem 3rem; text-align:center; }
.hero-label { font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:0.75rem; }
.hero h1 { font-family:var(--serif); font-size:clamp(2rem,5vw,3rem); font-weight:700; line-height:1.15; margin-bottom:1rem; }
.hero-sub { font-size:1.05rem; color:var(--muted); max-width:560px; margin:0 auto; }
.hero-date { font-size:0.75rem; color:var(--muted); margin-top:1rem; }
.article { max-width:720px; margin:0 auto; padding:0 1.5rem 5rem; }
.article h2 { font-family:var(--serif); font-size:1.6rem; font-weight:700; margin:3rem 0 1rem; line-height:1.3; }
.article h3 { font-size:1.05rem; font-weight:700; margin:2rem 0 0.5rem; }
.article p { margin-bottom:1.25rem; color:#3a3632; }
.article a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.article ul, .article ol { margin:0 0 1.5rem 1.25rem; }
.article li { margin-bottom:0.4rem; color:#3a3632; }
.article hr { border:none; border-top:1px solid var(--border); margin:2.5rem 0; }
.verdict-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:2rem 0; }
@media(max-width:600px) { .verdict-grid { grid-template-columns:1fr; } }
.verdict-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.5rem; }
.verdict-card h4 { font-size:0.95rem; font-weight:700; margin-bottom:0.75rem; }
.verdict-card .stars { color:#f5a623; font-size:1.2rem; margin:0.5rem 0; }
.verdict-card .review-count { font-size:0.8rem; color:var(--muted); }
.comp-table { width:100%; border-collapse:collapse; margin:2rem 0; font-size:0.9rem; }
.comp-table th { text-align:left; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); padding:0.75rem 1rem; border-bottom:2px solid var(--border); }
.comp-table td { padding:0.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:top; }
.comp-table tr:last-child td { border-bottom:none; }
.comp-table .feature { font-weight:600; color:var(--text); }
.comp-table .win { color:var(--green); font-weight:600; }
.comp-table .lose { color:var(--red); }
.comp-table .neutral { color:var(--muted); }
.review-quote { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:1.25rem 1.5rem; margin:1.5rem 0; font-style:italic; font-size:0.9rem; color:#4a4640; }
.review-quote .source { font-style:normal; font-size:0.75rem; color:var(--muted); margin-top:0.5rem; display:block; }
.cta-box { background:linear-gradient(135deg, #1a1714 0%, #2d2a26 100%); border-radius:16px; padding:2.5rem; text-align:center; margin:3rem 0; }
.cta-box h3 { font-family:var(--serif); color:#fff; font-size:1.4rem; margin-bottom:0.5rem; }
.cta-box p { color:rgba(255,255,255,0.65); font-size:0.9rem; margin-bottom:1.25rem; }
.cta-box a { display:inline-block; background:var(--accent); color:#fff; padding:0.75rem 2rem; border-radius:100px; text-decoration:none; font-weight:700; font-size:0.9rem; }
.tag { display:inline-block; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; padding:0.2rem 0.6rem; border-radius:100px; }
.tag-winner { background:#e8f5ed; color:var(--green); }
.tag-loser { background:#fde8e5; color:var(--red); }
.toc { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem 2rem; margin:2rem 0; }
.toc h4 { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:0.75rem; }
.toc ol { margin:0; padding-left:1.25rem; }
.toc li { margin-bottom:0.3rem; font-size:0.85rem; }
.toc a { color:var(--text); text-decoration:none; }
.toc a:hover { color:var(--accent); }
.callout { background:#fef9f5; border:1px solid #f0d9c4; border-radius:12px; padding:1.25rem 1.5rem; margin:1.5rem 0; font-size:0.9rem; }
.callout strong { color:var(--accent); }
.footer { text-align:center; padding:2rem 1.5rem; font-size:0.7rem; color:var(--muted); border-top:1px solid var(--border); }
.footer a { color:var(--muted); }
/* Homepage cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.25rem; margin:2rem 0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2rem; text-decoration:none; color:var(--text); transition:transform 0.2s, box-shadow 0.2s; display:block; }
.card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,23,20,0.08); }
.card h3 { font-family:var(--serif); font-size:1.15rem; margin-bottom:0.5rem; }
.card p { font-size:0.85rem; color:var(--muted); margin:0; }
.card .card-tag { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); font-weight:700; margin-bottom:0.5rem; }
/* Ranking list */
.rank-item { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.75rem; margin-bottom:1rem; display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
@media(max-width:600px) { .rank-item { grid-template-columns:1fr; } }
.rank-num { font-family:var(--serif); font-size:2.5rem; font-weight:700; color:var(--accent); line-height:1; }
.rank-content h3 { font-family:var(--serif); font-size:1.2rem; margin-bottom:0.25rem; }
.rank-content .rank-meta { font-size:0.8rem; color:var(--muted); margin-bottom:0.5rem; }
.rank-content p { font-size:0.9rem; margin-bottom:0; }