:root {
  --bg: #000000;
  --card: #111111;
  --text: #f3efe6;
  --muted: #a8a196;
  --accent: #e2b33c;
  --gold-2: #f5d46b;
  --ok: #3dd68c;
  --warn: #f5a524;
  --border: #2a2418;
  --radius: 14px;
  font-family: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: radial-gradient(1000px 520px at 50% -10%, #1d1708, var(--bg));
  color: var(--text); line-height: 1.55;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 920px; margin: 0 auto; padding: 32px 20px 80px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 48px; }
.logo { font-weight: 700; letter-spacing: -0.02em; }
nav a { margin-left: 16px; color: var(--muted); font-size: 0.95rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.03em; }
.hero p { color: var(--muted); font-size: 1.15rem; max-width: 40rem; }
.price {
  display: inline-flex; align-items: baseline; gap: 8px; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; margin: 24px 0;
}
.price strong { font-size: 1.6rem; }
.price span { color: var(--muted); }
.btn {
  display: inline-block; background: var(--accent); color: #fff; font-weight: 600;
  padding: 14px 22px; border-radius: 10px; border: none; cursor: pointer;
}
.btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 36px 0; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
}
.card h3 { margin-top: 0; }
.muted { color: var(--muted); }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding: 14px 14px 14px 52px;
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--card);
}
.steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #0a1018;
  border-radius: 8px;
}
code { padding: 2px 6px; font-size: 0.9em; }
pre { padding: 14px; overflow: auto; border: 1px solid var(--border); }
.disclaimer {
  margin-top: 48px; padding: 16px; border-left: 3px solid var(--warn); background: #1a160c; color: var(--muted);
  font-size: 0.92rem;
}
footer { margin-top: 64px; color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--border); padding-top: 20px; }
.badge { display: inline-block; background: #2a2009; color: var(--gold-2); padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }

/* Brand: black & gold */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.logo:hover { text-decoration: none; }
.logo img { border-radius: 8px; }
.logo b { color: var(--accent); }
.hero { text-align: center; }
.hero p { margin-left: auto; margin-right: auto; }
.hero-logo img { width: min(440px, 80vw); height: auto; display: block; margin: 0 auto 8px; }
.btn { background: linear-gradient(180deg, var(--gold-2), var(--accent)) !important; color: #111 !important; border: 0 !important; font-weight: 700; }
.btn.secondary { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; }
h2 { color: var(--accent); }
.card { border-color: var(--border); }

.req { margin: 14px auto 0; color: var(--text); }
.req a, .ack a { color: var(--gold-2); text-decoration: underline; }
.ack label { cursor: pointer; }
.ack label.need { color: var(--gold-2); font-weight: 700; }
.btn.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* hero lede + before/after mock */
.lede{font-size:1.2rem;max-width:44rem}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;max-width:640px}
.ba-pane{position:relative;aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(160deg,#1c2a3a,#0f1822);overflow:hidden;padding:28px 10px 10px}
.ba-label{position:absolute;top:6px;left:10px;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;opacity:.8}
.ba-icons{display:flex;flex-wrap:wrap;gap:6px;transform:rotate(-2deg)}
.ba-icons i{width:18px;height:22px;border-radius:3px;background:#d8d2c4;opacity:.85}
.ba-icons i:nth-child(3n){background:#9fc3e6;transform:rotate(8deg)} .ba-icons i:nth-child(4n){background:#e6c07a;transform:translateY(4px)}
.ba-folders{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ba-folders b{font-weight:500;font-size:.78rem;padding:3px 8px 3px 22px;border-radius:4px;background:#2b3d52 linear-gradient(#6aa8e8,#6aa8e8) 6px 50%/10px 8px no-repeat}
.beforeafter figcaption{grid-column:1/-1;font-size:.85rem}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cta-note{margin-top:4px}