:root { --ink:#141414; --muted:#6b6b6b; --line:#e6e2da; --paper:#fbfaf7; --accent:#b8892b; --accent-ink:#fff; --err:#b3261e; --max:980px; }
* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; font:16px/1.5 -apple-system,"Segoe UI",Inter,system-ui,sans-serif; color:var(--ink); background:#fff }
a { color:inherit } main { max-width:var(--max); margin:0 auto; padding:0 20px }
.top { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line) }
.brand { font-weight:700; letter-spacing:.02em } .brand span { color:var(--accent) } .brand small { color:var(--muted); font-weight:400; margin-left:6px }
nav a { margin-left:16px; text-decoration:none; color:var(--muted) } nav a[hidden] { display:none }
.hero { padding:48px 0 24px } h1 { font-size:clamp(28px,4.5vw,44px); line-height:1.1; margin:0 0 12px; letter-spacing:-.01em }
.sub { font-size:18px; max-width:720px; margin:0 0 8px } .cred { color:var(--muted); margin:0 0 24px }
.gen { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px }
textarea { width:100%; font:inherit; padding:12px; border:1px solid var(--line); border-radius:8px; resize:vertical; background:#fff; color:var(--ink) }
details.form { margin:10px 0 } details summary { cursor:pointer; color:var(--muted) }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:10px } label { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--muted) }
input, select { font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink) }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px }
button, .primary, .ghost { font:inherit; padding:10px 16px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block }
.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600 } .ghost { background:transparent } .small { padding:4px 8px; font-size:13px }
button:disabled { opacity:.6; cursor:wait } .muted { color:var(--muted) } .status { margin:10px 0 0; color:var(--muted) } .status.err { color:var(--err) }
.locked::after { content:" 🔒"; font-size:.85em }
.toolbar { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:28px 0 12px } .views button.active { border-color:var(--ink); font-weight:600 }
.sheet { position:relative; background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; box-shadow:0 2px 12px rgba(0,0,0,.05); overflow:hidden }
.sheet.watermark::after { content:"PREVIEW — BEO Studio"; position:absolute; inset:0; display:grid; place-items:center; font-size:64px; font-weight:800; color:rgba(0,0,0,.07); transform:rotate(-24deg); pointer-events:none; white-space:nowrap }
.sheet-head { display:grid; grid-template-columns:1fr 2fr 1fr; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:16px; align-items:center }
.sheet-head .venue img { max-height:48px; display:block; margin-bottom:4px } .sheet-head h2 { margin:0; font-size:22px } .meta { color:var(--muted); font-size:14px } .doc { text-align:right; font-weight:700; letter-spacing:.08em; font-size:13px } .doc small { color:var(--muted); font-weight:400; letter-spacing:0; text-transform:capitalize }
.blk { margin:0 0 18px } .blk h3 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px } .blk ul { margin:4px 0; padding-left:18px }
table { width:100%; border-collapse:collapse; font-size:15px } td { padding:5px 8px 5px 0; border-bottom:1px solid var(--line); vertical-align:top } .tl td:first-child { width:64px; font-variant-numeric:tabular-nums; font-weight:600 } tr.client td { background:#fff8e6 }
.check { list-style:none; padding:0 !important; columns:2; gap:20px } .check li { break-inside:avoid } .verbatim p { white-space:pre-wrap; color:var(--muted); font-size:14px }
.sign { display:flex; justify-content:space-between; margin-top:28px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; flex-wrap:wrap; gap:10px }
.pricing { margin:40px 0; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--paper) } .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:16px 0 }
.plan { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; position:relative } .plan.founder { border-color:var(--accent) } .tag { position:absolute; top:-12px; left:16px; background:var(--accent); color:#fff; font-size:12px; padding:3px 10px; border-radius:99px; font-weight:600 }
.price { font-size:36px; font-weight:800; margin:6px 0 } .price span { font-size:16px; font-weight:400; color:var(--muted) }
.license { display:flex; gap:10px; align-items:end; flex-wrap:wrap } .license label { flex:1; min-width:260px } .small { font-size:13px }
.how { margin:40px 0 } .how li { margin-bottom:8px }
#saved ul { list-style:none; padding:0 } #saved li { padding:8px 0; border-bottom:1px solid var(--line) }
footer { border-top:1px solid var(--line); padding:20px; text-align:center; color:var(--muted); font-size:14px; margin-top:40px }
.cookie { margin-top:10px } .cookie[hidden] { display:none }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:grid; place-items:center; z-index:10 } .modal[hidden] { display:none } .modal .box { background:#fff; padding:20px; border-radius:10px; width:min(420px,92vw); display:grid; gap:10px }
@media (max-width:640px) { .sheet-head { grid-template-columns:1fr } .doc { text-align:left } .check { columns:1 } .sheet { padding:16px } .sheet.watermark::after { font-size:36px } }