/* ============================================================
   Rusty Suite — shared stylesheet
   Palette + components extracted from RUSTY-UI-THEME.md (v1 LOCKED).
   Every page links this file. Edit here to restyle the whole site.
   ============================================================ */

:root{
  /* surfaces (darkest -> lightest) */
  --bg:#161311; --panel:#1e1a15; --panel2:#282018; --edge:#3d342a; --void:#0d0b09;
  /* text */
  --ink:#f0e9e1; --muted:#a99786; --ink-strong:#ffffff;
  /* brand + state */
  --accent:#e6862f; --accent2:#b1521a; --danger:#e8574e; --ok:#6bb464;
  /* accents-on-surface */
  --code-ink:#f0b070; --sel:#3a2c1c; --sel-match:#332619;
  --shadow:0 4px 14px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.5 "Segoe UI", system-ui, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:#f2953b}
.spacer{flex:1}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:10px 22px;
  background:linear-gradient(180deg,#241e18,var(--panel));
  border-bottom:1px solid var(--edge);
}
.brand{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; letter-spacing:.3px; color:var(--ink)}
.brand img{width:22px; height:22px; display:block}
.brand b{color:var(--accent); font-weight:600}
.sub{color:var(--muted); font-size:12px}
nav a{color:var(--muted); margin-left:18px; font-size:13px}
nav a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; cursor:pointer;
  border-radius:8px; padding:11px 20px;
  background:var(--panel2); color:var(--ink);
  border:1px solid var(--edge); font:inherit; font-weight:600; transition:.12s;
}
.btn:hover{border-color:var(--accent); background:#312820; color:var(--ink)}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#1a1206; font-weight:700; border-color:var(--accent2);
}
.btn.primary:hover{background:linear-gradient(180deg,#f2953b,var(--accent)); color:#1a1206}
.btn.big{padding:14px 26px; font-size:15px}

/* ---------- layout ---------- */
main{max-width:1080px; margin:0 auto; padding:0 22px}
section{padding:64px 0; border-bottom:1px solid var(--edge)}
section:last-child{border-bottom:0}
h2{font-size:26px; font-weight:700; margin:0 0 8px}
.lead{color:var(--muted); font-size:16px; margin:0 0 28px}

/* ---------- home hero ---------- */
.hero-home{text-align:center; padding:88px 0 72px}
.hero-home h1{font-size:64px; line-height:1.05; font-weight:700; letter-spacing:.3px; margin:0 0 14px}
.hero-home h1 b{color:var(--accent); font-weight:700}
.hero-home .tag{font-size:22px; color:var(--ink-strong); font-weight:600; margin:0 0 22px}
.hero-home p{color:var(--muted); font-size:16px; max-width:560px; margin:0 auto 34px}
.cta{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}
.cta.left{justify-content:flex-start}
.cta .or{color:var(--muted); font-size:13px}

/* ---------- pitch cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--panel); border:1px solid var(--edge); border-radius:12px; box-shadow:var(--shadow); padding:24px}
.card .ic{font-size:28px; margin-bottom:10px}
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14px}

/* ---------- tool list (home) ---------- */
.tools{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
.tool{display:flex; align-items:baseline; gap:10px; background:var(--panel); border:1px solid var(--edge); border-radius:12px; padding:16px 18px}
.tool .name{font-weight:700; font-size:15px; white-space:nowrap}
.tool .name b{color:var(--accent); font-weight:700}
.tool .desc{color:var(--muted); font-size:13px}
.tool a.name{color:var(--ink)}
.tool a.name:hover b, .tool a.name:hover{color:#f2953b}
.price-note{color:var(--muted); font-size:14px; margin:20px 0 26px; font-style:italic}

/* ---------- pills / badges ---------- */
.pill{display:inline-block; border-radius:20px; padding:3px 12px; font-size:11px; background:rgba(0,0,0,.55); border:1px solid var(--edge); color:var(--muted); vertical-align:middle; margin-left:2px}
.pill.free{color:var(--ok); border-color:#33502f}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badges.center{justify-content:center}
.badge{border-radius:20px; padding:6px 14px; font-size:12px; background:var(--panel2); border:1px solid var(--edge); color:var(--muted)}

/* ---------- footer ---------- */
footer{max-width:1080px; margin:0 auto; padding:40px 22px 70px; color:var(--muted); font-size:13px}
footer .meta{max-width:640px; line-height:1.7}
footer .meta strong{color:var(--ink)}
footer .badges{margin-top:26px; justify-content:center}

/* ============================================================
   Tool-page layout (RustyPDF / Draft / RGB / MD / CSV / DXF)
   ============================================================ */
.hero-tool{padding:72px 0 40px}
.crumb{color:var(--muted); font-size:12px; margin-bottom:18px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--ink)}
.hero-tool h1{font-size:52px; line-height:1.05; font-weight:700; letter-spacing:.3px; margin:0 0 12px}
.hero-tool h1 b{color:var(--accent); font-weight:700}
.hero-tool .tag{font-size:20px; color:var(--ink-strong); font-weight:600; margin:0 0 18px}
.hero-tool p{color:var(--muted); font-size:16px; max-width:600px; margin:0 0 30px}

.split{display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:center; padding:48px 0; border-top:1px solid var(--edge)}
.feat{list-style:none; margin:0; padding:0}
.feat li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--edge); font-size:15px}
.feat li:last-child{border-bottom:0}
.feat .k{color:var(--accent); font-weight:700}

.buybar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:34px 0 72px; border-top:1px solid var(--edge); margin-top:8px}
.buybar .price{font-size:15px; color:var(--muted)}
.buybar .price b{color:var(--ink-strong); font-size:18px}

/* ============================================================
   Mock app windows (rusted-steel). Faked previews until real
   screenshots exist — drop those in assets/screenshots/.
   ============================================================ */
.mock{background:var(--panel); border:1px solid var(--edge); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.mock .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:linear-gradient(180deg,#241e18,var(--panel)); border-bottom:1px solid var(--edge)}
.mock .bar .t{font-size:13px; font-weight:600; letter-spacing:.3px}
.mock .bar .t b{color:var(--accent); font-weight:600}
.mock .bar .flex{flex:1}
.mock .bar .b{font-size:11px; padding:5px 10px; border-radius:8px; border:1px solid var(--edge); background:var(--panel2); color:var(--muted)}
.mock .bar .b.pri{background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#1a1206; border-color:var(--accent2); font-weight:700}
.mock .stage{background:var(--void); min-height:210px; padding:16px; display:flex; flex-direction:column; gap:10px}
.mock .stage.pad0{padding:0}

/* PDF: page rows */
.mock .page{background:#efe9e0; color:#3a332c; border-radius:4px; height:52px; display:flex; align-items:center; padding:0 14px; font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mock .page .n{margin-left:auto; color:#9a8f80; font-size:11px}

/* RGB: channel swatches */
.chan{display:flex; align-items:center; gap:12px; background:var(--panel2); border:1px solid var(--edge); border-radius:8px; padding:10px 12px}
.chan .sw{width:26px; height:26px; border-radius:6px; flex:0 0 auto}
.chan .lb{font-size:13px; color:var(--ink)}
.chan .val{margin-left:auto; font:12px Consolas,monospace; color:var(--muted)}

/* MD: editor + preview columns */
.mdcols{display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:100%}
.mdcols .col{padding:14px 16px; font:13px/1.6 Consolas,"Cascadia Mono",monospace}
.mdcols .col.edit{color:var(--muted); border-right:1px solid var(--edge)}
.mdcols .col.prev{color:var(--ink)}
.mdcols .col.prev h4{margin:0 0 6px; color:var(--ink-strong); font:600 16px "Segoe UI",sans-serif}
.mdcols .tok{color:var(--code-ink,#f0b070)}
.mdcols .col.prev p{margin:0 0 8px}

/* CSV: data table */
.csvtable{width:100%; border-collapse:collapse; font:12px Consolas,monospace}
.csvtable th,.csvtable td{border:1px solid var(--edge); padding:7px 10px; text-align:left}
.csvtable th{background:var(--panel2); color:var(--muted); font-weight:700}
.csvtable td{color:var(--ink)}
.csvtable tr:nth-child(even) td{background:rgba(230,134,47,0.04)}

/* SVG mock strokes (Draft / DXF) */
.mock svg{display:block; width:100%; height:auto}

@media(max-width:820px){
  .cards{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .hero-home h1{font-size:44px}
  .split{grid-template-columns:1fr}
  .hero-tool h1{font-size:38px}
  .mdcols{grid-template-columns:1fr}
}

/* ============================================================
   Not-yet-live CTA. Used where a buy/download flow doesn't
   exist yet — reads as deliberate, not as a broken link.
   ============================================================ */
.btn.soon{
  background:transparent; border:1px dashed var(--edge);
  color:var(--muted); font-weight:600; cursor:default;
}
.btn.soon:hover{background:transparent; border-color:var(--edge); color:var(--muted)}

/* ============================================================
   Long-form prose (privacy policy, terms). Dark only, same as
   everything else — RUSTY-UI-THEME.md, palette is dark-only.
   ============================================================ */
.prose{max-width:720px; padding:56px 0 40px}
.prose h1{font-size:38px; line-height:1.15; font-weight:700; letter-spacing:.3px; margin:0 0 10px}
.prose h1 b{color:var(--accent); font-weight:700}
.prose .eff{color:var(--muted); font-size:12px; margin:0 0 32px}
.prose h2{font-size:19px; font-weight:700; margin:38px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--edge)}
.prose p{font-size:15px; line-height:1.75; color:var(--ink); margin:0 0 14px}
.prose strong{color:var(--ink-strong)}
.prose .callout{background:var(--panel); border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:12px; padding:18px 20px; margin:0 0 8px}
.prose .callout p{margin:0}