:root { --ink:#12312d; --muted:#5e756f; --brand:#17453f; --brand-2:#23695f; --accent:#f2b35d; --soft:#fff7e9; --panel:#ffffff; --line:#d8e5df; --ok:#176c4f; --warn:#9d5a00; --danger:#a23c3c; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#f8fbf8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top left,#fff4de 0,#f8fbf8 34rem),linear-gradient(180deg,#f8fbf8,#eef7f2); }
body > header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem clamp(1.1rem,4vw,3rem); border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); position:sticky; top:0; backdrop-filter:blur(14px); z-index:5; }
.brand { display:flex; align-items:center; gap:.8rem; color:var(--brand); font-weight:900; text-decoration:none; }
.brand img { width:172px; max-width:46vw; height:auto; }
nav { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; }
nav button,button { border:0; border-radius:999px; padding:.78rem 1.05rem; background:var(--brand); color:white; font-weight:850; cursor:pointer; box-shadow:0 10px 24px rgba(23,69,63,.18); }
button.secondary { background:#fff; color:var(--brand); border:1px solid var(--line); box-shadow:none; }
main { width:min(1220px,calc(100% - 2rem)); margin:0 auto; padding:2rem 0 3rem; }
.hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); gap:1.2rem; align-items:stretch; margin-bottom:1.1rem; }
.hero > div,.hero-card,.panel,.metric,.item { border:1px solid var(--line); background:rgba(255,255,255,.92); border-radius:24px; box-shadow:0 18px 50px rgba(23,69,63,.08); }
.hero > div { padding:clamp(1.35rem,4vw,2.4rem); }
.hero-card { padding:1rem; display:grid; gap:.75rem; }
h1 { margin:.35rem 0 .7rem; font-size:clamp(2.2rem,5vw,4.8rem); line-height:.98; letter-spacing:-.06em; color:var(--brand); }
h2 { margin:.25rem 0 .7rem; color:var(--brand); }
p { line-height:1.6; color:var(--muted); }
.eyebrow { display:inline-block; color:#9a5a08; font-weight:950; letter-spacing:.14em; text-transform:uppercase; font-size:.76rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:1rem 0; }
.wizard-shell { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr); gap:1rem; align-items:start; }
.panel,.metric,.item { padding:1rem; }
.metric { display:grid; gap:.25rem; }
.metric span { color:var(--muted); font-weight:750; }
.metric strong { color:var(--brand); font-size:1.45rem; }
.item { display:grid; gap:.55rem; box-shadow:none; }
.item header { display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.28rem .6rem; background:#e9f4ef; color:var(--ok); font-size:.78rem; font-weight:900; white-space:nowrap; }
.pill.warn { color:var(--warn); background:#fff1d8; }
.pill.danger { color:var(--danger); background:#ffe7e2; }
.progress { height:10px; border-radius:99px; background:#e8f0ec; overflow:hidden; }
.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),var(--accent)); }
form,.list { display:grid; gap:.78rem; }
label { display:grid; gap:.35rem; font-weight:800; color:var(--ink); }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:13px; padding:.78rem; color:var(--ink); background:#fff; font:inherit; }
textarea { min-height:98px; resize:vertical; }
fieldset { display:grid; gap:.7rem; border:1px solid var(--line); border-radius:18px; padding:1rem; }
legend { padding:0 .45rem; color:var(--brand); font-weight:950; }
.wizard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.wizard-grid button { grid-column:1/-1; }
.brand-preview { display:grid; gap:1rem; }
.brand-band { min-height:180px; border-radius:24px; color:white; padding:1.25rem; display:grid; align-content:end; gap:.35rem; background:linear-gradient(135deg,var(--tenant-primary),var(--tenant-secondary)); position:relative; overflow:hidden; box-shadow:0 24px 55px rgba(23,69,63,.18); }
.brand-band::after { content:""; position:absolute; width:190px; height:190px; border-radius:999px; right:-70px; top:-80px; background:var(--tenant-accent); opacity:.95; }
.brand-band strong,.brand-band small { position:relative; z-index:1; }
.brand-band strong { font-size:1.45rem; }
.footer-note { font-size:.9rem; margin:.2rem 0 0; }
.tenant-card button { justify-self:start; }
@media (max-width:820px) { .hero,.wizard-shell { grid-template-columns:1fr; } body > header { align-items:flex-start; flex-direction:column; } nav { justify-content:flex-start; } }