:root {
  --ink: #10211f;
  --muted: #647370;
  --line: #d8e2df;
  --paper: #ffffff;
  --ground: #f4f7f5;
  --teal: #006f68;
  --teal-dark: #005650;
  --mint: #dff2ed;
  --amber: #cb8511;
  --shadow: 0 18px 50px rgba(16, 33, 31, .08);
}
* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% 0, #e8f6f1 0, transparent 28rem), var(--ground); }
button, input, select { font: inherit; }
button { letter-spacing: 0; }
.hidden { display: none !important; }
.app-header { min-height: 78px; padding: 13px clamp(18px, 4vw, 64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--teal); color: var(--teal); font-weight: 900; font-size: 18px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 20px; }.brand small { color: var(--muted); margin-top: 2px; }
.privacy-status { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.privacy-status span { width: 9px; height: 9px; border-radius: 50%; background: #16a676; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:10px; }.header-link { text-decoration:none; display:inline-flex; align-items:center; }
.button { min-height: 48px; border: 1px solid var(--line); border-radius: 7px; padding: 0 22px; font-weight: 800; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }.button:focus-visible, .choice:focus-visible { outline: 3px solid rgba(0,111,104,.22); outline-offset: 2px; }
.button-primary { background: var(--teal); color: white; border-color: var(--teal); }.button-primary:hover:not(:disabled) { background: var(--teal-dark); }
.button-secondary, .button-quiet { background: white; color: var(--ink); }.button:disabled { opacity: .45; cursor: not-allowed; }
.screen { width: min(1500px, 100%); margin: 0 auto; }
.welcome { min-height: calc(100vh - 140px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); align-items: center; gap: clamp(36px, 7vw, 110px); padding: clamp(48px, 8vw, 110px) clamp(22px, 6vw, 90px); }
.eyebrow { color: var(--teal); font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(44px, 6vw, 82px); line-height: 1.02; max-width: 900px; letter-spacing: 0; margin-bottom: 24px; } h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.08; letter-spacing: 0; } h3 { font-size: 22px; }
.lede { font-size: clamp(19px, 2vw, 25px); line-height: 1.55; color: #40504d; max-width: 760px; }
.welcome-actions, .result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }.time-note { color: var(--muted); margin-top: 16px; }
.method-card { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 34px; }
.method-card ol { list-style: none; margin: 0; padding: 0; counter-reset: steps; }.method-card li { counter-increment: steps; display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }.method-card li:last-child { border-bottom: 0; }
.method-card li::before { content: counter(steps); width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: var(--teal); display: grid; place-items: center; font-weight: 900; }.method-card strong, .method-card span { display:block; }.method-card span { color: var(--muted); line-height: 1.5; margin-top: 4px; }
.assessment { display: grid; grid-template-columns: 270px minmax(420px, 1fr) 320px; min-height: calc(100vh - 132px); background: white; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.progress-panel, .evidence-panel { padding: 38px 30px; background: #fbfcfb; }.progress-panel { border-right: 1px solid var(--line); }.evidence-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 32px; }
.progress-number { display:flex; align-items: baseline; gap: 8px; }.progress-number strong { font-size: 58px; line-height: 1; }.progress-number span { color: var(--muted); }
.progress-track { height: 8px; background: #e4ebe9; border-radius: 10px; margin: 20px 0 42px; overflow:hidden; }.progress-track span { display:block; height:100%; width:0; background:var(--teal); transition: width .25s ease; }
.phase { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; opacity: .46; padding: 14px 0; }.phase.active, .phase.complete { opacity: 1; }.phase > span { width:32px; height:32px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-weight:800; }.phase.active > span { background:var(--teal); color:#fff; border-color:var(--teal); }.phase.complete > span { background:var(--mint); color:var(--teal); }.phase p, .phase small { margin:0; display:block; }.phase small { color:var(--muted); margin-top:3px; }
.question-panel { padding: clamp(38px, 6vw, 88px); display:flex; flex-direction:column; min-width:0; }.question-meta { display:flex; justify-content:space-between; gap:20px; color:var(--teal); font-weight:800; font-size:14px; margin-bottom:50px; }.question-panel h2 { max-width:850px; margin-bottom:18px; }.question-help { color:var(--muted); font-size:16px; }
.choices { display:grid; gap:14px; margin-top:22px; }.choice { width:100%; min-height:72px; padding:18px 22px; display:grid; grid-template-columns:1fr 26px; align-items:center; gap:18px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:18px; color:var(--ink); cursor:pointer; }.choice:hover { border-color:#88aaa4; background:#fbfdfc; }.choice.selected { border:2px solid var(--teal); background:#f1faf7; padding:17px 21px; }.choice-indicator { width:24px; height:24px; border:1px solid #9eb3af; border-radius:50%; }.choice.selected .choice-indicator { border:7px solid var(--teal); }
.question-actions { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:36px; }
.evidence-panel h3 { line-height:1.25; }.evidence-panel p { color:var(--muted); line-height:1.55; }.signal-list { display:grid; gap:18px; }.signal { display:grid; grid-template-columns:92px 1fr 42px; align-items:center; gap:10px; font-size:14px; }.signal-track { height:8px; background:#e4ebe9; border-radius:10px; overflow:hidden; }.signal-track span { display:block; height:100%; background:var(--teal); width:0; transition:width .3s ease; }.signal-value { text-align:right; color:var(--muted); }.evidence-note { margin-top:auto; font-size:13px; }
.results { padding: clamp(50px, 8vw, 110px) clamp(22px, 6vw, 90px); }.result-hero { padding-bottom:50px; border-bottom:1px solid var(--line); }.result-hero h1 { margin-bottom:18px; }.result-signal { display:inline-block; padding:8px 12px; border-radius:4px; background:var(--mint); color:var(--teal); font-weight:900; margin-bottom:18px; }.result-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; margin-top:32px; }.ranked-card,.reflection-card { background:white; border:1px solid var(--line); padding:32px; box-shadow:var(--shadow); }.rank-item { display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:center; padding:22px 0; border-top:1px solid var(--line); }.rank-number { width:40px; height:40px; border-radius:50%; background:var(--mint); color:var(--teal); display:grid; place-items:center; font-weight:900; }.rank-item h3,.rank-item p { margin:0; }.rank-item p { color:var(--muted); margin-top:5px; }.rank-score { font-weight:900; color:var(--teal); }.reflection-card p { color:#40504d; line-height:1.65; }.disclaimer { color:var(--muted); font-size:13px; margin-top:34px; max-width:900px; line-height:1.55; }
footer { min-height:60px; padding:20px clamp(18px,4vw,64px); display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; } footer a { color:var(--teal); }
.group-entry { margin-top:32px; padding:26px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }.group-entry h2 { font-size:30px; margin-bottom:8px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }.stack-form { display:grid; gap:17px; }.stack-form label,.form-grid label,.company-picker { display:grid; gap:7px; font-weight:800; }.stack-form input,.form-grid input,.inline-form input,.company-picker select { width:100%; min-height:48px; padding:10px 12px; border:1px solid #aebfbb; border-radius:7px; background:#fff; color:var(--ink); }.consent-row { display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; margin-top:18px; color:#40504d; line-height:1.45; }.consent-row input { width:18px; height:18px; margin-top:2px; }.form-error { color:#a32920; font-weight:800; margin:12px 0 0; }.submission-status { margin-top:24px; padding:16px 18px; border-left:4px solid var(--teal); background:var(--mint); font-weight:800; }.submission-status.error { border-color:#b54036; background:#fff1ef; color:#8e2922; }
.account-page,.dashboard-page { min-height:100vh; }.account-header { grid-template-columns:1fr; }.account-shell { min-height:calc(100vh - 78px); display:grid; place-items:center; padding:32px 18px; }.account-card { width:min(520px,100%); padding:clamp(28px,5vw,48px); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }.account-card h1 { font-size:46px; margin-bottom:10px; }.account-lede,.account-footnote { color:var(--muted); line-height:1.55; }.account-footnote { margin:24px 0 0; font-size:13px; }.stack-form small { color:var(--muted); font-weight:500; }
.dashboard-header { grid-template-columns:1fr auto; }.dashboard-user { display:flex; align-items:center; justify-content:flex-end; gap:14px; color:var(--muted); }.dashboard-shell { width:min(1480px,100%); margin:0 auto; padding:42px clamp(18px,4vw,58px) 70px; }.dashboard-top { display:grid; grid-template-columns:1fr minmax(240px,320px); gap:40px; align-items:end; }.dashboard-top h1 { font-size:clamp(42px,6vw,70px); margin-bottom:12px; }.dashboard-intro { max-width:760px; color:var(--muted); font-size:19px; line-height:1.5; }.company-picker select { min-width:240px; }.owner-panel,.password-gate,.dashboard-card { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); padding:28px; }.owner-panel { margin-top:28px; }.owner-panel h2,.dashboard-card h2 { font-size:30px; margin-bottom:0; }.inline-form { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }.inline-form input { flex:1 1 260px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px; }.dashboard-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }.dashboard-metrics div { padding:24px; border:1px solid var(--line); background:#f9fbfa; }.dashboard-metrics strong,.dashboard-metrics span { display:block; }.dashboard-metrics strong { font-size:36px; }.dashboard-metrics span { color:var(--muted); margin-top:4px; }.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.compact-form { grid-template-columns:repeat(3,1fr) auto; align-items:end; }.record-list { display:grid; gap:10px; margin-top:22px; }.record { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--line); background:#fbfcfb; }.record strong,.record small { display:block; }.record small { color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }.results-card { margin-top:24px; }.results-heading { align-items:center; }.dashboard-note { color:#6b4a10; background:#fff6df; border-left:4px solid var(--amber); padding:14px; line-height:1.5; }.table-wrap { overflow-x:auto; }.results-card table { width:100%; border-collapse:collapse; min-width:820px; }.results-card th,.results-card td { text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top; }.results-card th { color:var(--muted); font-size:13px; text-transform:uppercase; }.results-card td small { display:block; color:var(--muted); margin-top:4px; }.empty-state { color:var(--muted); padding:18px 0; }.password-gate { margin-bottom:28px; border-top:5px solid var(--amber); }.password-gate h1 { font-size:36px; margin-bottom:8px; }.locked { opacity:.35; pointer-events:none; }
@media (max-width: 1100px) { .assessment { grid-template-columns:220px 1fr; }.evidence-panel { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; }.evidence-note { grid-column:1/-1; }.result-grid { grid-template-columns:1fr; } }
@media (max-width: 900px) { .dashboard-grid,.dashboard-top { grid-template-columns:1fr; }.compact-form { grid-template-columns:1fr 1fr; }.company-picker select { min-width:0; }.dashboard-user #userLabel { display:none; } }
@media (max-width: 760px) { .app-header { grid-template-columns:1fr auto; }.privacy-status { display:none; }.brand small { display:none; }.header-link { display:none; }.welcome { grid-template-columns:1fr; padding-top:52px; }.form-grid { grid-template-columns:1fr; }.assessment { display:block; }.progress-panel { padding:18px; border-right:0; border-bottom:1px solid var(--line); }.progress-panel .eyebrow,.progress-number,.phase-list { display:none; }.progress-track { margin:0; }.question-panel { min-height:calc(100vh - 157px); padding:28px 18px; }.question-meta { margin-bottom:32px; }.question-panel h2 { font-size:34px; }.choice { min-height:66px; font-size:16px; }.evidence-panel { display:none; }.results { padding-top:45px; }.ranked-card,.reflection-card { padding:22px; }.rank-item { grid-template-columns:42px 1fr; }.rank-score { grid-column:2; }.app-header { min-height:68px; }.brand-mark { width:40px;height:40px; } footer { flex-direction:column; }.dashboard-shell { padding-top:28px; }.dashboard-metrics { grid-template-columns:1fr; }.compact-form { grid-template-columns:1fr; }.dashboard-card,.owner-panel { padding:20px; }.results-heading { align-items:flex-start; flex-direction:column; }.record { align-items:flex-start; flex-direction:column; }.record .button { width:100%; }.dashboard-user .button { min-height:42px; padding:0 14px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; transition:none!important; } }