/* Shared styles for inboice.artifition.com — same palette as the app.
   No external fonts or CDNs: nothing here can break from a third party. */
:root{
  --ink:#111a22; --soft:#33414d; --muted:#667684; --edge:#e6eaed;
  --bg:#f4f6f7; --surface:#fff;
  --accent:#bc5a38; --accent-ink:#8f3d1f; --accent-tint:#f6ece6;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef2f5; --soft:#c3ccd4; --muted:#96a3ad; --edge:#2b343c;
    --bg:#12171b; --surface:#1a2026;
    --accent:#e08a63; --accent-ink:#f0b394; --accent-tint:#2a1f19;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
main{max-width:720px; margin:0 auto; padding:44px 22px 72px}
a{color:var(--accent-ink)}

/* Brand row: the mark is inline SVG, so there's no image request. */
.brand{display:flex; align-items:center; gap:12px; margin-bottom:28px}
.brand svg{width:34px; height:auto; display:block}
.brand b{font-size:21px; font-weight:800; letter-spacing:-.5px}
.brand a{color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px}

h1{font-size:30px; letter-spacing:-.6px; margin:0 0 6px; font-weight:800}
.eff{color:var(--muted); font-size:14px; margin:0 0 30px}
h2{
  font-size:19px; letter-spacing:-.2px; font-weight:700;
  margin:36px 0 12px; padding-top:24px; border-top:1px solid var(--edge);
}
h2.first{border-top:none; padding-top:0}
p,li{color:var(--soft)}
ul{padding-left:20px}
li{margin:7px 0}
strong{color:var(--ink)}

.lede{background:var(--accent-tint); color:var(--accent-ink); border-radius:14px; padding:18px 20px}
.lede p{color:inherit; margin:0}
.lede p + p{margin-top:10px}

.tagline{font-size:19px; color:var(--soft); margin:0 0 26px; line-height:1.55}
.cards{display:grid; gap:14px; margin:0 0 30px}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:var(--surface); border-radius:16px; padding:20px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px -8px rgba(16,24,40,.12);
}
.card h3{margin:0 0 6px; font-size:16px; color:var(--ink)}
.card p{margin:0; font-size:14.5px}

footer{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--edge);
  color:var(--muted); font-size:13.5px;
}
footer a{margin-right:14px}