/* Shared styles for Compressify content pages. */
:root { --ink:#3a1f33; --muted:#5f5560; --brand:#e8662a; --brand2:#cf5824; --bg:#faf8ff; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
       color:var(--ink); background:var(--bg); line-height:1.7; }
a { color:var(--brand); }
.wrap { max-width:820px; margin:0 auto; padding:0 20px; }

header { background:#fffdf9; border-bottom:1px solid #efe7da; position:sticky; top:0; z-index:5; }
header .wrap { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; max-width:960px; }
.logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.2rem; color:var(--ink); text-decoration:none; }
.logo img { height:32px; width:32px; border-radius:8px; }
.logo .tld { color:var(--brand); }
nav a { color:var(--ink); text-decoration:none; margin-left:16px; font-weight:600; font-size:.92rem; }
nav a:hover { color:var(--brand); }

.article { padding:32px 20px 8px; }
.article h1 { font-size:2rem; line-height:1.25; margin:.2em 0 .1em; }
.article .lead { font-size:1.15rem; color:var(--muted); margin:.4em 0 1.2em; }
.article h2 { font-size:1.5rem; margin:1.6em 0 .4em; }
.article h3 { font-size:1.15rem; margin:1.3em 0 .3em; }
.article p, .article li { font-size:1.03rem; }
.article ul, .article ol { padding-left:1.3em; }
.article table { width:100%; border-collapse:collapse; margin:1em 0; font-size:.98rem; }
.article th, .article td { border:1px solid #e7ddd0; padding:9px 12px; text-align:left; }
.article th { background:#f7f0e3; }
.article .meta { color:var(--muted); font-size:.9rem; }
.article .tip { background:#fff6ee; border-left:4px solid var(--brand); padding:12px 16px; border-radius:6px; margin:1.1em 0; }

.cta { display:inline-block; background:var(--brand); color:#fff; padding:13px 26px; border-radius:10px;
       text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(232,102,42,.28); }
.cta:hover { background:var(--brand2); }
.cta-row { margin:1.4em 0; }

.cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }
.card { background:#fff; border:1px solid #efe7da; border-radius:12px; padding:18px; }
.card h3 { margin-top:0; }
.card a { text-decoration:none; }

.chips { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.chips a { padding:7px 13px; background:#fff; border:1px solid #efe7da; border-radius:22px;
  text-decoration:none; color:var(--ink); font-size:.9rem; font-weight:600; }
.chips a:hover { border-color:var(--brand); color:var(--brand); }

.breadcrumb { font-size:.88rem; color:var(--muted); margin:14px 0 0; }
.breadcrumb a { color:var(--muted); }

footer { background:#fff; border-top:1px solid #eee; color:var(--muted); font-size:.9rem; margin-top:32px; }
footer .wrap { padding:24px 20px; text-align:center; max-width:960px; }
footer a { margin:0 8px; }

@media (max-width:640px){ .article h1{font-size:1.6rem;} .cards{grid-template-columns:1fr;} nav a{margin-left:11px;} }