:root { --ink:#172029; --muted:#5c6975; --paper:#f7f8f5; --surface:#fff; --line:#dce2de; --primary:#0d6854; --primary-dark:#074838; --accent:#e8b856; --danger:#b74236; --warning:#ae761c; --shadow:0 16px 45px rgba(19,39,32,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; line-height:1.5; } button,input,select { font:inherit; } button { cursor:pointer; } .site-header { width:min(1160px,calc(100% - 40px)); margin:auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand { color:var(--ink); text-decoration:none; letter-spacing:.08em; font-weight:800; font-size:1.1rem; } .brand span { color:var(--primary); } .text-link { color:var(--primary); font-weight:700; text-decoration:none; } main { width:min(1040px,calc(100% - 40px)); margin:0 auto 72px; } .hero { padding:84px 0 55px; max-width:770px; } .eyebrow { color:var(--primary); font-weight:800; text-transform:uppercase; letter-spacing:.11em; font-size:.75rem; margin:0 0 12px; } h1,h2,h3,h4,p { margin-top:0; } h1 { font-size:clamp(2.25rem,5vw,4.4rem); letter-spacing:-.055em; line-height:1.03; margin-bottom:20px; } h2 { font-size:clamp(1.6rem,3vw,2.25rem); letter-spacing:-.035em; line-height:1.12; margin-bottom:12px; } h3 { letter-spacing:-.02em; } .lead { font-size:1.2rem; color:var(--muted); max-width:680px; } .trust-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; color:var(--primary-dark); font-size:.9rem; font-weight:700; } .assessment-card,.result-card,.upload-card,.table-card,.chart-card,.admin-card,.auth-card,.must-change { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,5vw,48px); box-shadow:var(--shadow); } .section-heading { max-width:650px; margin-bottom:28px; } fieldset { padding:25px 0; border:0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } legend { font-weight:800; padding:0 0 12px; grid-column:1/-1; } label { font-size:.92rem; font-weight:650; display:grid; gap:8px; color:#2b3944; } input,select { width:100%; border:1px solid #bdc9c3; background:#fff; border-radius:9px; padding:12px; color:var(--ink); } input:focus,select:focus { outline:3px solid rgba(13,104,84,.17); border-color:var(--primary); } .button { border:0; border-radius:10px; padding:12px 18px; font-weight:800; display:inline-flex; justify-content:center; align-items:center; text-decoration:none; } .primary { color:#fff; background:var(--primary); } .primary:hover { background:var(--primary-dark); } .secondary { color:var(--primary-dark); background:#e2f0eb; } .subtle { background:transparent; color:var(--primary); padding:8px; } .form-note { font-size:.82rem; color:var(--muted); margin:14px 0 0; } .form-error { color:var(--danger); min-height:1.4em; margin:12px 0 0; font-size:.9rem; } .form-error.success { color:var(--primary); font-weight:700; } .hidden { display:none !important; } .result-card { margin-top:30px; } .score-layout { display:flex; gap:25px; align-items:center; margin:25px 0 36px; } .score-ring { width:122px; height:122px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; border:12px solid #d9eee6; background:#f3faf7; color:var(--primary-dark); flex:0 0 auto; } .score-ring strong { font-size:2.5rem; line-height:1; } .score-ring span { font-size:.78rem; color:var(--muted); } .dimension-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:40px; } .dimension-grid article { background:#f8faf9; padding:15px; border-radius:12px; min-width:0; } .dimension-grid span { display:block; font-size:.78rem; min-height:38px; color:var(--muted); } .dimension-grid strong { font-size:1.6rem; display:block; } .dimension-grid small { font-size:.72rem; color:var(--muted); } .meter { height:6px; border-radius:8px; background:#dbe5e0; overflow:hidden; margin-top:9px; } .meter i { display:block; height:100%; background:var(--primary); border-radius:8px; } .priority-list { display:grid; gap:13px; } .priority-list article { padding:20px; border:1px solid var(--line); border-radius:14px; display:flex; gap:18px; } .priority-list h4 { margin:0 0 6px; font-size:1.05rem; } .priority-list p { margin:4px 0; color:var(--muted); font-size:.92rem; } .priority-number { width:35px; height:35px; flex:0 0 auto; border-radius:50%; background:#e1efe9; color:var(--primary-dark); font-weight:800; display:grid; place-items:center; } .callout { background:#edf6f2; margin-top:35px; padding:25px; border-radius:14px; } .callout h3 { margin-bottom:6px; } .lead-form { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin-top:20px; } .lead-form .checkbox { grid-column:1/-1; grid-template-columns:auto 1fr; align-items:start; font-size:.82rem; font-weight:500; } .lead-form .checkbox input { width:auto; margin-top:3px; } footer { padding:26px 20px; color:var(--muted); text-align:center; font-size:.8rem; }
.auth-page { min-height:100vh; } .auth-main { display:grid; place-items:center; min-height:calc(100vh - 76px); margin-bottom:0; } .auth-card { width:min(460px,100%); } .auth-card h1 { font-size:2.2rem; } .auth-card form,.must-change form { display:grid; gap:17px; margin-top:24px; }
.portal-main { width:min(1180px,calc(100% - 40px)); } .header-actions { display:flex; align-items:center; gap:16px; font-size:.88rem; color:var(--muted); } .portal-welcome { padding:52px 0 31px; display:flex; align-items:end; justify-content:space-between; gap:24px; } .portal-welcome h1 { font-size:clamp(2.1rem,4vw,3.5rem); margin-bottom:8px; } .portal-welcome p:not(.eyebrow) { color:var(--muted); max-width:620px; } .must-change { margin-bottom:25px; } .upload-card { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:26px; } .upload-card > div { max-width:600px; } .upload-card h2 { font-size:1.6rem; } .upload-card p:not(.eyebrow) { color:var(--muted); } .upload-card form { display:grid; gap:12px; min-width:270px; } .file-label { background:#f5f8f6; padding:12px; border-radius:10px; } .file-label input { border:0; background:transparent; padding:7px 0 0; font-size:.8rem; } .forecast-section { padding:26px 0; } .forecast-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:18px; } .forecast-heading h2 { margin-bottom:6px; } .forecast-heading p:not(.eyebrow) { color:var(--muted); margin-bottom:0; font-size:.88rem; } .scenario-buttons { display:flex; background:#e5ece8; border-radius:10px; padding:4px; gap:3px; } .scenario-buttons button { padding:8px 12px; border:0; background:transparent; border-radius:7px; font-weight:750; color:#53645d; } .scenario-buttons button.active { background:#fff; color:var(--primary-dark); box-shadow:0 1px 4px rgba(0,0,0,.08); } .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } .kpi-grid article { background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px; } .kpi-grid span,.kpi-grid small { display:block; color:var(--muted); font-size:.78rem; } .kpi-grid strong { display:block; font-size:1.35rem; letter-spacing:-.04em; margin:7px 0; } .chart-card,.table-card { padding:23px; margin-bottom:18px; box-shadow:none; } .chart-legend { display:flex; justify-content:space-between; gap:10px; align-items:baseline; } .chart-legend h3 { margin-bottom:0; } .chart-legend span { color:var(--muted); font-size:.8rem; } .bar-chart { height:230px; margin-top:20px; display:flex; align-items:end; gap:10px; border-bottom:1px solid var(--line); padding:0 6px; } .bar-item { flex:1; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:6px; min-width:0; } .bar { width:min(32px,100%); border-radius:6px 6px 0 0; background:var(--primary); min-height:4px; } .bar.negative { background:var(--danger); } .bar-item small { font-size:.7rem; color:var(--muted); } .alerts { display:grid; gap:11px; margin-bottom:18px; } .alert { display:flex; gap:13px; background:#fffaf0; border:1px solid #f0dbac; border-radius:12px; padding:18px; } .alert.critical { background:#fff3f2; border-color:#f3cac5; } .alert.positive { background:#eef8f3; border-color:#cae8d8; } .alert > span { font-weight:900; color:var(--warning); background:#fff; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; } .alert.critical > span { color:var(--danger); } .alert.positive > span { color:var(--primary); } .alert h3 { margin:0 0 4px; font-size:1rem; } .alert p { color:var(--muted); margin:3px 0; font-size:.9rem; } .table-scroll { overflow:auto; } table { border-collapse:collapse; width:100%; min-width:760px; font-size:.88rem; } th,td { text-align:right; padding:12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; } th:first-child,td:first-child { text-align:left; } th { color:var(--muted); font-weight:700; font-size:.76rem; } .negative { color:var(--danger); font-weight:750; } .admin-card { margin:26px 0; box-shadow:none; } .invite-form { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:13px; align-items:end; } .invite-form .form-error { grid-column:1/-1; }
@media (max-width:760px) { .site-header,main,.portal-main { width:min(100% - 28px,1040px); } .hero { padding:52px 0 34px; } fieldset,.lead-form,.invite-form { grid-template-columns:1fr; } .dimension-grid { grid-template-columns:repeat(2,1fr); } .dimension-grid article:last-child { grid-column:span 2; } .upload-card,.portal-welcome,.forecast-heading { align-items:stretch; flex-direction:column; } .upload-card form { min-width:0; } .kpi-grid { grid-template-columns:repeat(2,1fr); } .header-actions #user-email { display:none; } }

footer a,.checkbox a { color:var(--primary); }
.legal { max-width:820px; margin:45px auto; } .legal h1 { font-size:clamp(2rem,4vw,3.3rem); } .legal h2 { font-size:1.2rem; margin-top:28px; } .legal p { color:#40505a; }