/* HealthPredict - bespoke editorial-medical design system Warm paper + deep pine-green + clay risk tones; serif display headings. Light/dark via [data-theme] on . */ :root{ --bg:#f3f0e8; --surface:#fbfaf6; --surface-2:#f7f4ec; --ink:#1b2a26; --muted:#5d6b63; --line:#e4ddcf; --line-strong:#d6cdba; --primary:#0f5f54; --primary-ink:#0b463e; --primary-soft:#dbe8e3; --accent:#b25c39; --low:#2f8f6b; --low-soft:#dcefe4; --mod:#b6852f; --mod-soft:#f3e7c8; --high:#b14a3a; --high-soft:#f3dcd6; --shadow:0 1px 2px rgba(27,42,38,.04), 0 8px 24px -16px rgba(27,42,38,.18); --radius:11px; --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } html[data-theme="dark"]{ --bg:#121714; --surface:#19201c; --surface-2:#1e2621; --ink:#ece7da; --muted:#9aa79e; --line:#28312b; --line-strong:#333e37; --primary:#54b6a2; --primary-ink:#7ccbba; --primary-soft:#1b2a26; --accent:#d98a64; --low:#54b98c; --low-soft:#16271f; --mod:#d6a44e; --mod-soft:#2b2516; --high:#d2705c; --high-soft:#2e1c18; --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 30px -18px rgba(0,0,0,.6); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;transition:background .25s,color .25s} h1,h2,h3,h4{font-family:var(--serif);font-weight:560;line-height:1.12;letter-spacing:-.01em;margin:0} a{color:inherit;text-decoration:none} .container{max-width:1120px;margin:0 auto;padding:0 26px} .muted{color:var(--muted)} .serif{font-family:var(--serif)} /* header */ .site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)} .site-head .container{display:flex;align-items:center;gap:22px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.02em} .brand .mark{width:26px;height:26px;flex:0 0 auto} .nav{display:flex;align-items:center;gap:22px;margin-left:auto} .nav a{color:var(--muted);font-size:14.5px;font-weight:500} .nav a:hover,.nav a.active{color:var(--ink)} .iconbtn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-strong); border-radius:8px;background:var(--surface);cursor:pointer;color:var(--ink)} .iconbtn:hover{border-color:var(--primary)} /* buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14.5px;font-weight:600; padding:10px 18px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:.15s} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-ink)} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{border-color:var(--primary);color:var(--primary)} .btn-lg{padding:13px 24px;font-size:15.5px} /* cards */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .pad{padding:24px} /* hero */ .hero{padding:78px 0 56px;position:relative} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--primary);background:var(--primary-soft);padding:6px 12px;border-radius:999px} .hero h1{font-size:clamp(38px,5.4vw,62px);margin:22px 0 0;max-width:14ch} .hero h1 em{font-style:italic;color:var(--primary)} .hero p.lead{font-size:19px;color:var(--muted);max-width:54ch;margin:20px 0 30px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .hero-figure{margin-top:14px} /* condition grid */ .section{padding:54px 0} .section-title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;font-family:var(--sans)} .grid{display:grid;gap:18px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} @media(max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr}} .cond{display:flex;flex-direction:column;gap:10px;padding:22px;transition:.18s;border:1px solid var(--line)} .cond:hover{border-color:var(--primary);transform:translateY(-2px)} .cond .ic{width:38px;height:38px;border-radius:9px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary)} .cond h3{font-size:21px} .cond .blurb{color:var(--muted);font-size:14.5px;flex:1} .cond .go{color:var(--primary);font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:880px){.steps{grid-template-columns:1fr}} .step .n{font-family:var(--serif);font-size:30px;color:var(--primary);line-height:1} .step h4{font-size:18px;margin:10px 0 6px} .step p{color:var(--muted);font-size:14.5px;margin:0} /* forms */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px} @media(max-width:680px){.form-grid{grid-template-columns:1fr}} .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px} .field .hint{font-size:12px;color:var(--muted);font-weight:500} .field input[type=number],.field input[type=email],.field input[type=password],.field input[type=text]{ width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2); color:var(--ink);font:inherit;font-size:15px;transition:.15s} .field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)} .unit{position:relative} .unit .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--muted)} .check{display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);cursor:pointer} .check input{width:18px;height:18px;accent-color:var(--primary)} /* result */ .result-head{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .gauge{position:relative;width:188px;height:108px;flex:0 0 auto} .gauge .val{position:absolute;left:0;right:0;bottom:2px;text-align:center} .gauge .val .pct{font-family:var(--serif);font-size:38px;line-height:1} .gauge .val .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .band-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;font-weight:600;font-size:13.5px} .band-low{background:var(--low-soft);color:var(--low)} .band-moderate{background:var(--mod-soft);color:var(--mod)} .band-high{background:var(--high-soft);color:var(--high)} .dot{width:8px;height:8px;border-radius:50%;background:currentColor} .factor{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:11px 0;border-bottom:1px solid var(--line)} .factor:last-child{border-bottom:none} .factor .fl{font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px} .factor .fv{font-size:13px;color:var(--muted);text-align:right} .bar{grid-column:1/-1;height:6px;border-radius:4px;background:var(--line);overflow:hidden} .bar i{display:block;height:100%;border-radius:4px} .bar.up i{background:var(--high)} .bar.down i{background:var(--low)} .tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px} .tag.abn{background:var(--high-soft);color:var(--high)} .tag.ok{background:var(--low-soft);color:var(--low)} .modelbits{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .modelbits .mb{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:6px 10px} .modelbits .mb b{color:var(--ink);font-weight:600} /* stats */ .stat{padding:20px 22px} .stat .k{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600} .stat .v{font-family:var(--serif);font-size:34px;margin-top:6px} .table{width:100%;border-collapse:collapse} .table th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted); font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line-strong)} .table td{padding:12px;border-bottom:1px solid var(--line);font-size:14px} .table tr:last-child td{border-bottom:none} /* misc */ .flash{padding:12px 16px;border-radius:9px;margin-bottom:16px;font-size:14px;border:1px solid} .flash.error{background:var(--high-soft);color:var(--high);border-color:transparent} .disclaimer{font-size:12.5px;color:var(--muted);border-left:3px solid var(--line-strong);padding:6px 0 6px 14px;margin-top:18px} .page-head{padding:38px 0 18px} .page-head h1{font-size:34px} .sidebar a{display:block;padding:9px 13px;border-radius:8px;color:var(--muted);font-size:14.5px;font-weight:500} .sidebar a:hover{background:var(--surface-2);color:var(--ink)} .sidebar a.active{background:var(--primary-soft);color:var(--primary-ink);font-weight:600} .footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13.5px;margin-top:50px} .split{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start} @media(max-width:820px){.split{grid-template-columns:1fr}} svg .axis{stroke:var(--line-strong)} svg text{fill:var(--muted);font-size:11px;font-family:var(--sans)}