:root { --ink:#17231f; --muted:#6d7873; --cream:#f5f2ea; --paper:#fffdf8; --green:#b8e36c; --line:#dfe4d9; }
.branding-panel { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }.branding-panel h3 { margin:0; font-size:16px; }.branding-panel > p { color:var(--muted); font-size:13px; margin:7px 0 15px; }.branding-row { display:flex; align-items:center; gap:16px; }.logo-preview { display:grid; place-items:center; width:84px; height:84px; overflow:hidden; border:1px dashed #b8c5b3; border-radius:14px; background:#f1f5eb; color:var(--muted); font-size:11px; text-align:center; }.logo-preview img { width:100%; height:100%; object-fit:contain; }.branding-hint { color:var(--muted); font-size:12px; margin:7px 0 0; }.remove-logo { background:transparent; color:#a33; padding:6px 0; font-size:12px; }.pack-logo { display:block; max-width:220px; max-height:90px; object-fit:contain; object-position:right center; margin:0 0 22px auto; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.shell { max-width:900px; margin:0 auto; padding:30px 24px 42px; } .nav { display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.brand { font-size:20px; letter-spacing:-.04em; display:flex; gap:9px; align-items:center; }.mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--ink); color:var(--green); font-size:15px; }.status { color:var(--muted); font-size:12px; font-weight:600; }
.nav-actions { display:flex; align-items:center; gap:6px; }.saved-link,.account-link { padding:8px 12px; background:transparent; color:var(--ink); font-size:13px; }.saved-link:hover,.account-link:hover { background:#e7eddc; }
.hero { padding:90px 0 35px; max-width:680px; }.eyebrow { color:#718d34; font-weight:800; font-size:11px; letter-spacing:.15em; margin:0 0 18px; }.hero h1 { font-size:clamp(44px,7vw,76px); line-height:.98; letter-spacing:-.075em; margin:0; }.hero h1 em { color:#719230; font-style:normal; }.intro { max-width:500px; margin:25px 0 0; color:var(--muted); font-size:18px; line-height:1.5; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:25px; box-shadow:0 12px 35px #5263440e; }.card label { display:block; font-weight:800; font-size:15px; margin-bottom:14px; }.card textarea { width:100%; min-height:150px; resize:vertical; border:1px solid var(--line); border-radius:14px; padding:16px; font:inherit; font-size:16px; line-height:1.5; color:var(--ink); background:#fff; outline:none; }.card textarea:focus { border-color:#9fc65b; box-shadow:0 0 0 4px #b8e36c35; }.actions { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; }.actions span { color:var(--muted); font-size:13px; } button { border:0; border-radius:12px; padding:13px 18px; background:var(--ink); color:white; font-weight:800; cursor:pointer; } button:hover { background:#2d4037; } button span { color:var(--green); font-size:20px; vertical-align:-2px; margin-left:6px; }
.result { margin-top:24px; background:var(--ink); color:white; border-radius:22px; padding:27px; }.pack-header h2 { margin:8px 0; font-size:30px; letter-spacing:-.04em; }.pack-type { display:inline-block; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.result p { color:#c5d0c9; line-height:1.5; }.pack-section { margin-top:22px; }.result-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:25px; margin-top:10px; }.result h3 { color:var(--green); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }.result ol,.result ul { padding-left:20px; color:#edf3ed; line-height:1.7; }.next { background:#2b3a32; border-radius:14px; padding:15px; color:#eaf6d2; margin-top:25px; }.pack-meta { display:grid; grid-template-columns:1fr 1fr; gap:18px; border-top:1px solid #405047; margin-top:25px; padding-top:4px; }.pack-email { border:1px solid #405047; border-radius:14px; padding:5px 16px 16px; margin-top:20px; }.pack-email p { color:#edf3ed; }.result-actions { margin-top:24px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }.copy-button,.copy-email,.save-button { background:var(--green); color:var(--ink); }.copy-button:hover,.copy-email:hover,.save-button:hover { background:#d4f293; }.hidden { display:none; }.foot { text-align:center; margin:35px 0 0; color:var(--muted); font-size:12px; }.foot span { padding:0 7px; }
.saved-plans { margin-top:24px; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px; }.saved-heading { display:flex; justify-content:space-between; align-items:start; }.saved-heading h2 { margin:0; letter-spacing:-.04em; }.close-saved { background:transparent; color:var(--muted); padding:7px 10px; }.saved-item { margin-top:12px; background:#f3f6ed; border-radius:12px; overflow:hidden; border-left:4px solid transparent; }.saved-item.status-priority { background:#fff4d8; border-left-color:#e0a42b; }.saved-item.status-completed { background:#e7f1e4; border-left-color:#70a56a; }.saved-item.status-on-hold { background:#eeeaf5; border-left-color:#9278b5; }.saved-open { display:flex; flex-direction:column; align-items:flex-start; width:100%; background:transparent; color:var(--ink); text-align:left; }.saved-open:hover { background:#e7eddc; }.saved-item.status-priority .saved-open:hover { background:#ffedbd; }.saved-open span { color:var(--muted); font-size:12px; margin-top:5px; font-weight:500; }.saved-controls { display:flex; align-items:center; gap:8px; padding:0 14px 12px; flex-wrap:wrap; }.saved-controls button { background:transparent; color:var(--muted); padding:5px 0; font-size:12px; }.saved-controls button:hover { color:var(--ink); }.saved-controls .delete-plan:hover { color:#a33; }.plan-status { border:1px solid var(--line); border-radius:7px; padding:4px 7px; color:var(--ink); background:white; font:inherit; font-size:12px; }.empty-saved { color:var(--muted); }
.saved-filters { display:flex; gap:8px; margin-top:18px; }.saved-filters input,.saved-filters select { min-width:0; border:1px solid var(--line); border-radius:9px; padding:10px 11px; color:var(--ink); background:white; font:inherit; font-size:13px; }.saved-filters input { flex:1; }.saved-filters select { width:145px; }
.saved-alert { display:flex; gap:6px; align-items:baseline; margin-top:16px; padding:12px 14px; border:1px solid #e0a42b; border-radius:12px; background:#fff4d8; color:var(--ink); font-size:13px; line-height:1.4; }.saved-alert span { color:#6d6657; }.saved-response-badge { display:block; width:max-content; margin:0 14px 10px; padding:4px 8px; border-radius:7px; font-size:11px; font-weight:800; }.saved-response-badge.approved { background:#dcefd8; color:#356b36; }.saved-response-badge.changes { background:#ffe6b0; color:#805a08; }
.account-panel { margin-top:24px; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px; }.account-panel form { max-width:420px; margin-top:22px; }.account-panel label { display:block; font-weight:800; font-size:13px; margin:14px 0 7px; }.account-panel input { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font:inherit; }.account-panel form button { margin-top:18px; }.switch-account,.signout-account { background:transparent; color:#55731e; padding:12px 0; }.account-hint { color:var(--muted); font-size:13px; }.plan-name { display:flex; align-items:center; gap:10px; flex:1 1 260px; font-size:13px; font-weight:800; }.plan-name input { min-width:180px; flex:1; border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:11px 12px; background:rgba(255,255,255,.08); color:inherit; font:inherit; }
.project-notes { margin-top:24px; border:1px solid #405047; border-radius:16px; padding:18px; }.notes-heading { display:flex; justify-content:space-between; gap:14px; align-items:start; }.notes-heading h3 { margin:0 0 6px; }.notes-heading p { margin:0; font-size:13px; }.notes-count { color:var(--green); font-size:12px; font-weight:800; white-space:nowrap; }.notes-list { margin-top:14px; }.note { border-top:1px solid #405047; padding:13px 0 2px; }.note > div { display:flex; justify-content:space-between; gap:12px; color:#edf3ed; font-size:13px; }.note time { color:#aebbb3; font-size:11px; font-weight:500; }.note p { margin:7px 0 0; color:#edf3ed; font-size:14px; }.notes-empty { font-size:13px; margin:14px 0; }.note-form { display:grid; grid-template-columns:150px 1fr auto; gap:8px; align-items:start; margin-top:14px; }.note-form select,.note-form textarea { border:1px solid #526158; border-radius:9px; padding:10px; background:#26352d; color:white; font:inherit; font-size:13px; }.note-form textarea { min-height:44px; resize:vertical; }.note-form button { padding:10px 13px; white-space:nowrap; }.note-hint { grid-column:1 / -1; margin:0; color:#f3c879 !important; font-size:12px !important; }
.project-files { margin-top:16px; border:1px solid #405047; border-radius:16px; padding:18px; }.file-organise { display:flex; align-items:center; gap:8px; margin-top:14px; color:#aebbb3; font-size:12px; }.file-organise select { border:1px solid #526158; border-radius:9px; padding:8px 10px; background:#26352d; color:#edf3ed; font:inherit; }.file-list { display:grid; gap:8px; margin-top:14px; }.file-item { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; border-top:1px solid #405047; padding:11px 0 2px; }.file-item a { display:grid; grid-template-columns:24px 1fr auto; gap:8px; align-items:center; color:#edf3ed; text-decoration:none; min-width:0; }.file-item a:hover { color:var(--green); }.file-item span { color:var(--green); }.file-item small { color:#aebbb3; font-size:11px; }.file-actions { display:flex; align-items:center; gap:8px; }.file-remove,.file-priority { border:0; background:transparent; color:#aebbb3; padding:5px 0; font:inherit; font-size:11px; cursor:pointer; }.file-remove:hover,.file-priority:hover { color:#f3c879; }.file-priority.is-priority { color:#f3c879; font-weight:800; }.file-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }.file-form input { max-width:100%; color:#c5d0c9; font:inherit; font-size:12px; }.file-form button { padding:10px 13px; }.file-form .note-hint { flex-basis:100%; }.file-category-buttons { display:flex; gap:6px; flex-wrap:wrap; flex-basis:100%; }.file-category-button { display:inline-flex; align-items:center; gap:6px; border:1px solid #526158; border-radius:9px; padding:8px 10px; background:#26352d; color:#c5d0c9; font:inherit; font-size:11px; }.file-category-button:hover,.file-category-button.selected { color:#fff; border-color:var(--green); background:#33483b; }.file-category-button i { width:8px; height:8px; border-radius:50%; background:#aebbb3; }.file-category-button.category-site-photo i,.file-category-tag.category-site-photo { background:#70a56a; color:#dff2d8; }.file-category-button.category-drawing i,.file-category-tag.category-drawing { background:#6ea7d9; color:#d8ebff; }.file-category-button.category-quote i,.file-category-tag.category-quote { background:#e0a42b; color:#fff0c5; }.file-category-button.category-approval i,.file-category-tag.category-approval { background:#9278b5; color:#eadfff; }.file-category-tag { display:inline-block; padding:2px 5px; border-radius:4px; font-weight:700; }.priority-mark { color:#f3c879; }.image-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; margin-top:16px; }.image-card { min-width:0; }.image-card a { display:block; color:#edf3ed; text-decoration:none; }.image-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid #526158; background:#26352d; }.image-card:hover img { border-color:var(--green); box-shadow:0 0 0 2px #b8e36c55; }.image-card span,.image-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px; color:#aebbb3; font-size:11px; }.image-card small { margin-top:2px; color:var(--green); }.image-card .file-actions { margin-top:3px; }
@media (max-width:650px) { .shell { padding:22px 16px 35px; }.hero { padding-top:65px; }.actions,.result-grid,.pack-meta { display:block; }.actions button { margin-top:16px; }.result-grid > div + div { margin-top:24px; }.pack-meta > div + div { margin-top:20px; }.note-form { display:flex; flex-direction:column; }.note-form select,.note-form textarea,.note-form button { width:100%; }.file-item { grid-template-columns:24px 1fr; }.file-item small { grid-column:2; }.saved-filters input,.saved-filters select { width:100%; }.saved-filters input { flex:auto; } }
@media print { body { background:white; }.shell { max-width:none; padding:0; }.nav,.hero,.card,.saved-plans,.foot,.result-actions { display:none !important; }.result { display:block !important; margin:0; border-radius:0; background:white; color:#17231f; padding:0; }.result p,.result ol,.result ul,.pack-email p,.note p { color:#17231f; }.result h3,.pack-type { color:#55731e; }.next { background:#eef5e2; color:#17231f; }.pack-email,.project-notes,.project-files { border-color:#cfd9c7; }.result-grid { gap:28px; }.notes-heading p,.note time,.file-item small { color:#6d7873; } }
.file-category-button.category-general i { background:#7c8982; }.file-category-tag.category-general { background:#7c8982; color:#edf3ed; }
.example-prompts { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; color:var(--muted); font-size:12px; }
.example-prompts button { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#f7fbf2; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.example-prompts button:hover { background:#e7eddc; }
.share-panel { margin-top:16px; border:1px solid #405047; border-radius:16px; padding:18px; }.share-panel h3 { margin:0 0 6px; }.share-response { color:#f3c879; font-size:12px; font-weight:800; white-space:nowrap; }.share-files { display:grid; gap:8px; margin-top:16px; color:#edf3ed; font-size:13px; }.share-files label { display:flex; gap:8px; align-items:center; }.share-files input { accent-color:var(--green); }.share-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }.share-actions button { padding:10px 13px; }.share-actions .quiet-button { background:transparent; color:#aebbb3; border:1px solid #526158; }.share-actions .quiet-button:hover { color:#fff; }.share-link { overflow-wrap:anywhere; margin:13px 0 0; font-size:12px; }.share-link a { color:var(--green); }.shared-view .nav,.shared-view .hero,.shared-view > .shell > .card,.shared-view .saved-plans,.shared-view .account-panel,.shared-view .foot { display:none; }.shared-view .shell { max-width:900px; padding-top:30px; }.shared-view .result { display:block; margin-top:0; }.shared-shell { max-width:820px; margin:0 auto; }.shared-brand { display:flex; align-items:center; gap:9px; color:var(--green); font-weight:800; margin-bottom:35px; }.shared-brand .mark { color:var(--green); }.shared-brand > span:last-child { margin-left:auto; color:#aebbb3; font-size:12px; font-weight:600; }.shared-files-panel,.shared-response-panel { margin-top:24px; border:1px solid #405047; border-radius:16px; padding:18px; }.shared-files-panel h3,.shared-response-panel h3 { margin:0 0 6px; }.shared-files-panel > p,.shared-response-panel > p { margin:0 0 14px; font-size:13px; }.shared-files-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }.shared-file { border-top:1px solid #405047; padding-top:12px; min-width:0; }.shared-file a { display:flex; gap:8px; align-items:center; color:#edf3ed; text-decoration:none; overflow-wrap:anywhere; }.shared-file a:hover { color:var(--green); }.shared-file small { display:block; color:#aebbb3; margin-top:7px; font-size:11px; }.shared-image a { display:block; }.shared-image img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid #526158; border-radius:10px; display:block; margin-bottom:8px; }.shared-image strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.shared-file > .file-category-tag { display:inline-block; margin-top:7px; }.shared-response-panel blockquote { margin:0 0 14px; padding:12px 14px; border-left:3px solid var(--green); background:#2b3a32; color:#edf3ed; }.shared-response-panel textarea { width:100%; min-height:90px; resize:vertical; border:1px solid #526158; border-radius:10px; padding:12px; background:#26352d; color:white; font:inherit; }.shared-response-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }.shared-response-actions .shared-changes { background:#405047; }.shared-response-actions .shared-changes:hover { background:#526158; }.shared-muted { color:#aebbb3 !important; font-size:13px; }
.pricing-link { padding:8px 12px; background:transparent; color:var(--ink); font-size:13px; border:0; }
.pricing-link:hover { background:#e7eddc; }
.pricing-panel { margin-top:24px; padding:30px; background:var(--ink); color:#f7fbf2; border-radius:22px; box-shadow:0 18px 40px rgba(23,35,31,.08); }
.pricing-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.pricing-heading h2 { margin:0 0 10px; color:#fff; }
.pricing-heading p:not(.eyebrow), .pricing-copy p:not(.eyebrow) { color:#d5dfd5; max-width:670px; }
.pricing-heading .close-saved { color:#d5dfd5; }
.product-points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0 28px; }
.product-points div { padding:18px; border:1px solid #3a4a41; border-radius:14px; background:#223129; }
.product-points strong,.product-points span { display:block; }
.product-points strong { color:var(--green); margin-bottom:7px; }
.product-points span { color:#d5dfd5; line-height:1.5; font-size:.92rem; }
.pricing-copy { border-top:1px solid #3a4a41; padding-top:24px; }
.pricing-copy h3 { color:#fff; margin:0 0 8px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.plan-card { background:#f7fbf2; color:var(--ink); border-radius:16px; padding:22px; border:2px solid transparent; }
.plan-card.featured { border-color:var(--green); }
.plan-label { color:#5c7d24; font-weight:800; letter-spacing:.13em; font-size:.72rem; margin:0 0 10px; }
.plan-card h3 { margin:0 0 8px; }
.plan-price { font-size:1.75rem; font-weight:800; margin:12px 0; }
.plan-price span { font-size:.8rem; color:var(--muted); font-weight:600; }
.plan-card ul { margin:0 0 18px; padding-left:18px; min-height:84px; color:#51605a; }
.plan-card li + li { margin-top:7px; }
.plan-action { width:100%; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:12px 15px; font:inherit; font-weight:800; cursor:pointer; }
.plan-card.featured .plan-action { background:#739c2f; }
.plan-card:first-child .plan-action { margin-top:16px; }
.pricing-note { color:#bdcabe; margin:18px 0 0; font-size:.9rem; }
@media (max-width: 700px) { .product-points,.pricing-grid { grid-template-columns:1fr; } .plan-card + .plan-card { margin-top:12px; } .pricing-heading { display:block; } .pricing-heading .close-saved { margin-top:10px; } }
@media print { .pricing-panel { display:none !important; } }