:root{--bg:#121212;--muted:#1b1b1b;--text:#f3f3f3;--sub:#b7b7b7;--yellow:#FFD200;--blue:#0057B7;--red:#E10600;--tap:48px}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{margin:0;background:var(--bg);color:var(--text);font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.container{width:min(1280px,94%);margin:0 auto}
a{color:var(--text);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;background:#222;border:1px solid #333;min-height:var(--tap);font-weight:700;cursor:pointer}
.btn-cta{background:var(--yellow);color:#000}
.btn-ghost{background:#191919;border:1px solid #2a2a2a;color:#fff}
.btn-muted{background:#171717;border:1px dashed #3a3a3a;color:#ddd}
.badge{display:inline-block;background:#191919;border:1px solid #2a2a2a;border-radius:999px;padding:6px 12px;color:#ddd}
h1,h2,h3{margin:0 0 10px}
.site-header{position:sticky;top:0;background:rgba(18,18,18,.96);border-bottom:1px solid #222;z-index:100}
.header-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;flex-wrap:wrap}
.logo-img{height:38px}
.nav{display:flex;flex-wrap:wrap;gap:10px}
.section{padding:52px 0}
/* Landing */
.choice-landing{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.choice-landing .card{position:relative;background:#1a1a1a;border:1px solid #232323;border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.choice-landing .subchoice{display:flex;gap:10px;flex-wrap:wrap}
.choice-landing .btn{pointer-events:auto}
/* Builder */
.builder{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start;margin-top:24px}
.canvas-box{background:#0f0f0f;border:1px solid #222;border-radius:16px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.canvas-pane{background:#0c0c0c;border:1px solid #222;border-radius:12px;display:grid;place-items:center;min-height:360px;position:relative;overflow:hidden}
.controls{background:var(--muted);border:1px solid #222;border-radius:16px;padding:16px}
label{display:block;margin-bottom:6px;color:#ddd}
input,select,textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #333;background:#161616;color:#eaeaea;min-height:var(--tap);font-size:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.item{border:1px dashed #2a2a2a;border-radius:12px;padding:12px;margin:10px 0;background:#151515}
.item .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hidden{display:none!important}
/* Sticky recap */
.recap{position:sticky;top:88px;background:#161616;border:1px solid #222;border-radius:16px;padding:14px;max-height:calc(100vh - 120px);overflow:auto;z-index:2}
.recap h3{margin:0 0 6px}
.line{display:flex;justify-content:space-between;gap:10px;margin:6px 0}
.total{border-top:1px solid #2a2a2a;margin-top:8px;padding-top:10px}
.recap-toggle{position:fixed;right:14px;bottom:14px;z-index:200}
/* Guides legend */
.guides{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.legend{display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:14px;height:3px;border-radius:2px}
.sw.bleed{background:#ff6b6b}
.sw.safe{background:#60d394}
.sw.cut{background:#4da3ff}
/* Mobile */
@media (max-width:980px){.choice-landing{grid-template-columns:1fr}.builder{grid-template-columns:1fr}.canvas-box{grid-template-columns:1fr}.recap{position:fixed;right:14px;left:14px;bottom:14px;top:auto;max-height:50vh;display:none}.recap.open{display:block}}