:root {
  --bg: #fff4ed; --surface: #fffaf6; --card: #ffffff; --primary: #b42318; --accent: #f7c948; --text: #261712; --muted: #715d55; --border: #edd4c7;
  --shadow: 0 24px 80px rgba(15, 23, 42, .14); --radius: 28px; --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background:
  radial-gradient(circle at 80% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 34rem),
  radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 28rem), var(--bg); line-height:1.55; }
a { color: inherit; }
.skip { position:absolute; left:-9999px; top:auto; } .skip:focus { left:1rem; top:1rem; z-index:999; background:var(--card); padding:.75rem 1rem; border-radius:1rem; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1.2rem; padding:1rem clamp(1rem,4vw,3rem); backdrop-filter: blur(18px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.brand img { width:210px; max-width:42vw; display:block; }
.nav { display:flex; gap:.35rem; flex:1; justify-content:center; flex-wrap:wrap; }
.nav a, .footer-links a { text-decoration:none; color:var(--muted); font-weight:750; padding:.65rem .8rem; border-radius:999px; }
.nav a:hover, .footer-links a:hover { background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--text); }
.header-cta, .button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; border-radius:999px; font-weight:850; border:1px solid var(--border); transition:.18s transform ease, .18s box-shadow ease, .18s background ease; }
.header-cta { padding:.75rem 1rem; background:var(--text); color:var(--bg); white-space:nowrap; }
.button { padding:1rem 1.25rem; } .button:hover, .header-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.button.primary { background:linear-gradient(135deg,var(--primary),var(--accent)); color:#ffffff; border:0; }
.button.ghost { background:color-mix(in srgb, var(--card) 75%, transparent); color:var(--text); }
.nav-toggle { display:none; margin-left:auto; border:1px solid var(--border); background:var(--card); border-radius:12px; padding:.55rem .75rem; color:var(--text); }
main { width:min(var(--max), calc(100% - 2rem)); margin:0 auto; }
.notice { margin:1rem 0 0; padding:.9rem 1rem; background:color-mix(in srgb, var(--accent) 16%, var(--card)); border:1px solid var(--border); border-radius:18px; color:var(--text); }
.hero { min-height:76vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.82fr); align-items:center; gap:clamp(2rem,5vw,5rem); padding:clamp(3rem,8vw,6.5rem) 0 4rem; }
.hero h1, .page-hero h1, .social-hero h1 { font-size:clamp(2.55rem,7vw,5.9rem); line-height:.94; letter-spacing:-.065em; margin:.35rem 0 1rem; }
.lede { font-size:clamp(1.08rem,2vw,1.35rem); color:var(--muted); max-width:760px; }
.eyebrow { color:var(--primary); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:900; margin:0 0 .75rem; }
.hero-actions, .cta-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.proof-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; color:var(--muted); }
.proof-row span, .keyword-strip span, .tag-cloud a { border:1px solid var(--border); background:color-mix(in srgb, var(--card) 70%, transparent); padding:.55rem .75rem; border-radius:999px; text-decoration:none; font-weight:750; }
.hero-art img { width:100%; filter: drop-shadow(0 30px 70px rgba(0,0,0,.18)); }
.section, .split, .cta-panel, .page-hero, .social-hero { margin:clamp(2.5rem,6vw,5.5rem) 0; }
.section-head { max-width:780px; margin-bottom:1.5rem; }
.section-head h2, .split h2, .cta-panel h2 { font-size:clamp(2rem,4.5vw,3.7rem); line-height:1; letter-spacing:-.045em; margin:.2rem 0 .8rem; }
.grid { display:grid; gap:1rem; } .features { grid-template-columns:repeat(3,minmax(0,1fr)); } .pricing { grid-template-columns:repeat(3,minmax(0,1fr)); } .manual, .prompt-grid, .resource-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature-card, .price-card, .manual-card, .resource-tile, .copy-card, .legal-card, .tool-card { background:color-mix(in srgb, var(--card) 90%, transparent); border:1px solid var(--border); border-radius:var(--radius); padding:1.35rem; box-shadow:0 14px 50px rgba(15,23,42,.06); }
.feature-card h3, .price-card h3, .manual-card h3, .resource-tile h3 { margin:.2rem 0 .55rem; font-size:1.15rem; }
.card-icon { width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:1rem; background:color-mix(in srgb, var(--primary) 18%, var(--card)); color:var(--primary); font-weight:900; margin-bottom:.8rem; }
.alt { background:linear-gradient(135deg, color-mix(in srgb, var(--card) 78%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); border:1px solid var(--border); border-radius:calc(var(--radius) + 8px); padding:clamp(1.2rem,4vw,2.3rem); }
.split { display:grid; grid-template-columns:.72fr 1fr; gap:2rem; align-items:start; }
.steps, .checklist { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.steps li, .checklist li { display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; padding:1rem; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 75%, transparent); }
.steps li strong { display:block; } .steps li span:first-child, .checklist.big span { font-weight:900; color:var(--primary); }
.resources-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.resource-card { text-decoration:none; display:grid; gap:.4rem; padding:1.15rem; background:color-mix(in srgb, var(--card) 90%, transparent); border:1px solid var(--border); border-radius:24px; min-height:130px; } .resource-card strong { font-size:1.1rem; } .resource-card span, .resource-tile p, .feature-card p, .manual-card p, .price-card p { color:var(--muted); }
.keyword-strip, .tag-cloud, .mini-products, .asset-grid, .related-links, .swatches { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem; }
.tag-cloud a { color:var(--text); }
.prompt-box { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { white-space:pre-wrap; margin:0; color:var(--text); } .copy-btn { margin-top:1rem; border:0; border-radius:999px; padding:.75rem 1rem; background:var(--text); color:var(--bg); font-weight:850; cursor:pointer; }
.cta-panel { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:clamp(1.5rem,5vw,3rem); border-radius:calc(var(--radius) + 14px); background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--card)), color-mix(in srgb, var(--accent) 22%, var(--card))); border:1px solid var(--border); box-shadow:var(--shadow); }
.page-hero { padding:clamp(2rem,6vw,5rem) 0 1rem; } .page-hero h1 { max-width:900px; } .crumbs { margin-top:1.5rem; display:flex; gap:.55rem; color:var(--muted); } .crumbs a { color:var(--primary); text-decoration:none; font-weight:800; }
.faq-list { display:grid; gap:.75rem; } details { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:1rem; } summary { font-weight:900; cursor:pointer; }
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:24px; background:var(--card); } table { border-collapse:collapse; width:100%; min-width:760px; } th, td { padding:1rem; border-bottom:1px solid var(--border); text-align:left; } th { color:var(--primary); }
.price { font-size:2rem; font-weight:950; letter-spacing:-.04em; color:var(--primary); }
.tool-card { display:grid; grid-template-columns:.75fr 1fr; gap:1.5rem; } form { display:grid; gap:1rem; } label { display:grid; gap:.45rem; font-weight:850; } input, select, textarea { width:100%; padding:1rem; border-radius:16px; border:1px solid var(--border); background:var(--surface); color:var(--text); } .tool-output { padding:1.25rem; border-radius:24px; background:color-mix(in srgb, var(--primary) 9%, var(--card)); border:1px dashed var(--primary); }
.social-hero { display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:center; } .social-hero img { width:100%; border-radius:32px; box-shadow:var(--shadow); }
.asset-link { padding:1rem; border-radius:20px; background:var(--card); border:1px solid var(--border); text-decoration:none; font-weight:850; }
.swatch { min-width:160px; padding:1rem; border-radius:20px; background:var(--card); border:1px solid var(--border); display:grid; gap:.4rem; } .swatch span { height:54px; border-radius:14px; border:1px solid var(--border); } .logo-preview { width:min(100%, 500px); background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:1rem; }
.footer { width:min(var(--max), calc(100% - 2rem)); margin:4rem auto 0; padding:2rem 0 3rem; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr auto; gap:1rem; color:var(--muted); } .footer-logo { width:200px; } .footer-links { display:flex; flex-wrap:wrap; gap:.3rem; align-content:start; justify-content:end; }
@media (max-width: 920px) { .hero, .split, .tool-card, .social-hero, .cta-panel, .footer { grid-template-columns:1fr; } .features, .pricing, .manual, .prompt-grid, .resource-tiles, .resources-grid { grid-template-columns:1fr; } .header-cta { display:none; } .nav-toggle { display:block; } .nav { display:none; position:absolute; left:1rem; right:1rem; top:72px; padding:1rem; background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); } .nav.open { display:grid; } .site-header { flex-wrap:wrap; } .hero { min-height:auto; } }