:root { --ink:#24201d; --muted:#7f7670; --paper:#f8f5f1; --card:#fff; --line:#e6ded7; --rust:#a75137; --rose:#f5e8e2; --sage:#e5efe7; --green:#3d7257; }
:root { --muted:#665e58; }
[hidden] { display:none !important; }
.beta-banner,.notice { padding:14px 18px; border-radius:12px; background:var(--rose); font-size:.86rem; line-height:1.55; }
.notice:empty { display:none; }
.notice.error { background:#fff0ef; color:#822b26; border:1px solid #d89891; }
.exchange-panel,.owner-tools { margin:24px 0; }
.exchange-panel p,.owner-tools p,.privacy-section p { line-height:1.65; }
.exchange-panel h3 { margin-top:24px; }
.scope-meta { margin-top:24px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.small-button,.add-change-button,summary { min-height:44px; padding:10px 12px; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid var(--rust); outline-offset:3px; }
.link-box { padding:18px; background:var(--paper); border-radius:12px; margin:18px 0; }
.link-box textarea { font-size:.8rem; overflow-wrap:anywhere; }
.privacy-section { max-width:850px; margin-top:40px; font-size:.85rem; color:var(--muted); }
.privacy-section h2 { font-size:1.2rem; }
a { color:var(--rust); }
details { margin-top:18px; }
summary { cursor:pointer; font-size:.85rem; }
.deliverable,.change-detail { white-space:pre-wrap; }
.change-card,.exchange-panel,.scope-heading,h2 { overflow-wrap:anywhere; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .site-header { max-width:1180px; margin:auto; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; } .brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:1.1rem; font-weight:800; letter-spacing:-.05em; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:var(--rust); font-size:.85rem; } .header-note { color:var(--muted); font-size:.8rem; } .page-shell { max-width:1180px; margin:auto; padding:35px 32px 65px; } .hero { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; padding:28px 0 50px; } .eyebrow { margin:0 0 13px; color:var(--rust); font-size:.68rem; font-weight:800; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1 { max-width:760px; margin-bottom:20px; font-size:clamp(2.6rem,6vw,5rem); line-height:.98; letter-spacing:-.08em; } h1 em { color:var(--rust); font-style:normal; } .hero-copy { max-width:590px; color:var(--muted); line-height:1.65; } .hero-note { display:flex; flex-direction:column; align-items:center; gap:5px; padding:17px 14px; border:1px solid var(--rust); color:var(--rust); border-radius:60px 60px 15px 15px; transform:rotate(-5deg); font-family:Georgia, serif; } .hero-note span { font-size:.85rem; } .hero-note strong { font-size:1.7rem; font-weight:400; } .workspace { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; align-items:start; } .panel { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:27px; box-shadow:0 15px 45px rgba(80,45,30,.05); } .panel-heading,.scope-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:24px; } h2 { margin-bottom:0; font-size:1.45rem; letter-spacing:-.06em; } .step-pill { padding:7px 10px; border-radius:99px; color:var(--rust); background:var(--rose); font-size:.68rem; white-space:nowrap; } label { display:block; margin-bottom:16px; color:var(--muted); font-size:.76rem; font-weight:700; } input,textarea { display:block; width:100%; margin-top:8px; padding:12px 13px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fdfcfa; font:inherit; outline:none; } input:focus,textarea:focus { border-color:var(--rust); box-shadow:0 0 0 3px rgba(167,81,55,.12); } .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .primary-button { width:100%; display:flex; justify-content:space-between; padding:14px 16px; border:0; border-radius:11px; color:#fff; background:var(--rust); font:inherit; font-weight:800; cursor:pointer; } .primary-button:hover { background:#8b432e; } .micro-copy { margin:13px 0 0; color:#9a918b; text-align:center; font-size:.68rem; line-height:1.5; } .scope-panel { min-height:475px; } .empty-state { display:grid; place-items:center; align-content:center; min-height:390px; text-align:center; color:var(--muted); } .empty-icon { display:grid; place-items:center; width:47px; height:47px; margin-bottom:14px; border-radius:14px; color:var(--rust); background:var(--rose); font-size:1.3rem; } .empty-state h3 { margin-bottom:8px; color:var(--ink); font-size:1.05rem; } .empty-state p { max-width:250px; font-size:.8rem; line-height:1.55; } .scope-heading h2 { font-size:1.7rem; } .scope-status { padding:7px 10px; border-radius:99px; background:var(--sage); color:var(--green); font-size:.68rem; font-weight:800; } .scope-meta { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin-bottom:22px; } .meta-card { padding:12px; background:var(--paper); border-radius:10px; } .meta-card small { display:block; color:var(--muted); font-size:.65rem; } .meta-card strong { display:block; margin-top:5px; font-size:.85rem; } .deliverable { padding:14px; margin-bottom:22px; border-left:3px solid var(--rust); background:#fffaf8; color:#645d58; line-height:1.5; font-size:.82rem; } .changes-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; } .changes-heading h3 { margin:0; font-size:.9rem; } .add-change-button,.small-button { border:0; background:none; color:var(--rust); font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; } .change-card { padding:14px; margin:8px 0; border:1px solid var(--line); border-radius:12px; } .change-top { display:flex; justify-content:space-between; gap:10px; } .change-top strong { font-size:.83rem; } .change-price { color:var(--rust); font-size:.78rem; font-weight:800; } .change-detail { margin:8px 0 11px; color:var(--muted); font-size:.74rem; line-height:1.4; } .change-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; } .change-date { color:var(--muted); font-size:.65rem; } .status-pill { padding:5px 8px; border-radius:99px; color:#9c6725; background:#fff3de; font-size:.62rem; font-weight:800; } .status-pill.approved { color:var(--green); background:var(--sage); } .status-pill.declined { color:#8a5d5d; background:#f3e4e4; } .total-row { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:17px; border-top:1px solid var(--line); } .total-row span { color:var(--muted); font-size:.78rem; } .total-row strong { color:var(--rust); font-size:1.4rem; letter-spacing:-.05em; } .approval-box { margin-top:17px; padding:15px; background:var(--rose); border-radius:12px; } .approval-box p { margin-bottom:9px; color:#7e5347; font-size:.75rem; line-height:1.45; } .approval-row { display:flex; gap:8px; } .approval-row input { margin:0; background:#fff; } .approval-row button { flex:none; border:0; border-radius:9px; color:#fff; background:var(--rust); padding:0 14px; font-weight:800; cursor:pointer; } footer { max-width:1180px; margin:auto; padding:23px 32px 35px; display:flex; justify-content:space-between; color:#9a918b; font-size:.7rem; } @media (max-width:800px) { .site-header,.page-shell,footer { padding-left:20px; padding-right:20px; } .hero { align-items:flex-start; } .hero-note { display:none; } .workspace { grid-template-columns:1fr; } } @media (max-width:520px) { .header-note { display:none; } .field-grid,.scope-meta { grid-template-columns:1fr; gap:0; } .panel { padding:21px; } .scope-panel { min-height:400px; } }