* { box-sizing: border-box; }
:root { color-scheme: light; --bg:#f7f8f5; --ink:#1b312b; --muted:#67776d; --line:#dce3da; --panel:#fff; --primary:#285c4b; --primary-dark:#1e4d3d; --mint:#e5f1e7; --sand:#f2eee4; --risk:#9d5942; --focus:#4c8a6e; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.app-shell { min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:4.6rem; padding:.8rem clamp(1rem,4vw,4.5rem); border-bottom:1px solid #e3e9e2; background:#fbfcfa; }
.brand { display:inline-flex; align-items:center; gap:.6rem; color:#1d352e; font-family:Georgia,"Times New Roman",serif; font-size:1.45rem; font-weight:700; text-decoration:none; }
.brand-mark { display:inline-flex; width:1.8rem; height:1.8rem; align-items:center; justify-content:center; border-radius:50% 50% 50% 12%; background:var(--primary); color:#fff; transform:rotate(-12deg); }
.brand-mark span { transform:rotate(12deg); font-size:.9rem; }
.demo-note { color:#718177; font-size:.72rem; text-align:right; }
main { width:min(100% - 2rem, 1100px); margin:0 auto; padding:clamp(2rem,6vw,5rem) 0 4rem; }
.eyebrow { margin:0 0 .7rem; color:#5e9178; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3 { margin:0; color:#20372e; font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.025em; }
h1 { max-width:760px; font-size:clamp(2.5rem,7vw,5.3rem); line-height:.98; }
h2 { font-size:clamp(1.8rem,4vw,3rem); line-height:1.05; }
h3 { font-size:1.35rem; }
.lead { max-width:680px; margin:1.25rem 0 0; color:var(--muted); font-size:1.05rem; line-height:1.75; }
.hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr); gap:3rem; align-items:end; }
.hero-panel { border:1px solid #dce7dd; border-radius:16px; background:linear-gradient(135deg,#f1f8f2,#fbfdfb); padding:1.5rem; }
.hero-panel strong { display:block; margin-bottom:.55rem; color:#285c4b; }
.hero-panel p { margin:.4rem 0 0; color:#65756b; font-size:.86rem; }
.actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.btn { display:inline-flex; min-height:2.8rem; align-items:center; justify-content:center; gap:.45rem; border:1px solid transparent; border-radius:10px; padding:.65rem 1rem; font-weight:700; text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(35,83,65,.13); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { border-color:var(--line); background:#fff; color:#355f4d; }
.btn-quiet { border:0; background:transparent; color:#4f7965; padding:.5rem .2rem; }
.boundary { display:inline-flex; margin-top:1.4rem; border:1px solid #ddd3bd; border-radius:7px; background:#fbf7ee; padding:.35rem .55rem; color:#6d5a32; font-size:.74rem; font-weight:700; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.section-head p { max-width:560px; margin:.5rem 0 0; color:var(--muted); font-size:.86rem; }
.panel { overflow:hidden; border:1px solid #e1e8e1; border-radius:16px; background:var(--panel); box-shadow:0 10px 25px rgba(37,64,51,.035); }
.panel-head { display:flex; align-items:start; justify-content:space-between; gap:1rem; border-bottom:1px solid #e8ede7; padding:1.25rem 1.4rem; }
.panel-head p { margin:.25rem 0 0; color:#77867d; font-size:.78rem; }
.profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); }
.fact { background:#fff; padding:1rem 1.1rem; }
.fact dt { color:#7a887f; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.fact dd { margin:.25rem 0 0; color:#2b4238; font-size:.9rem; font-weight:700; overflow-wrap:anywhere; }
.chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.8rem; }
.chip,.badge { display:inline-flex; border-radius:6px; padding:.27rem .5rem; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.64rem; font-weight:600; }
.chip { background:#eef6f0; color:#397257; }
.badge { background:#eef1ed; color:#6e7d73; text-transform:uppercase; }
.badge-strong { background:#e4f2e7; color:#317052; }.badge-partial { background:#f2eee4; color:#8a6d24; }.badge-risk { background:#f6e6df; color:#9d5942; }
.shortlist { display:grid; gap:.55rem; padding:.45rem; }
.match-row { display:grid; grid-template-columns:2.25rem minmax(0,1fr) minmax(8rem,.45fr) auto 1.1rem; gap:.8rem; align-items:center; width:100%; border:0; border-radius:11px; background:transparent; padding:.9rem 1rem; text-align:left; }
.match-row:hover { background:#f3f7f2; }.rank { color:#8ca096; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.68rem; }.match-row b { display:block; overflow:hidden; color:#2b4238; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }.match-row small { display:block; overflow:hidden; margin-top:.15rem; color:#7a887f; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }.match-meta { color:#68796f; font-size:.72rem; }.chevron { color:#7c8c82; font-size:1.1rem; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr); gap:1.4rem; }.detail-copy,.detail-side { padding:1.5rem; }.detail-copy { border-right:1px solid #e8ede7; }.detail-copy p { color:#5f7166; font-size:.9rem; line-height:1.75; }.detail-copy h3 { margin-top:1.6rem; font-size:1.15rem; }.detail-copy ul,.detail-side ul { margin:.7rem 0 0; padding-left:1.2rem; color:#62736a; font-size:.85rem; }.detail-copy li,.detail-side li { margin:.4rem 0; }.evidence { border-radius:11px; background:#f3f7f2; padding:1rem 1.1rem; }.evidence ul { padding-left:1.1rem; }.risks { border-radius:11px; background:#fbf1ec; padding:1rem 1.1rem; }.risks h3 { color:var(--risk); }.side-block + .side-block { margin-top:1.3rem; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:1.5rem; }.step { border-top:2px solid #cfe4d5; padding-top:.7rem; }.step b { display:block; font-size:.82rem; }.step p { margin:.25rem 0 0; color:#75857a; font-size:.75rem; }
.footer { border-top:1px solid #e3e9e2; padding:1.5rem max(1rem,calc((100% - 1100px)/2)); color:#718177; font-size:.75rem; }.footer a { color:#397257; font-weight:700; }
.no-js-shell { width:min(100% - 2rem,700px); margin:0 auto; padding:6rem 0; }.no-js-shell p { color:var(--muted); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:800px) { .hero,.detail-layout { grid-template-columns:1fr; gap:1.5rem; }.detail-copy { border-right:0; border-bottom:1px solid #e8ede7; }.match-row { grid-template-columns:2rem minmax(0,1fr) auto 1rem; }.match-meta { display:none; }.profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { main { width:min(100% - 1.25rem,1100px); padding-top:1.75rem; }.topbar { padding-inline:.75rem; }.demo-note { max-width:125px; font-size:.64rem; }.hero-panel,.detail-copy,.detail-side { padding:1.1rem; }.panel-head { padding:1rem; }.profile-grid { grid-template-columns:1fr; }.match-row { gap:.5rem; padding:.78rem .55rem; }.match-row b { font-size:.8rem; }.steps { grid-template-columns:1fr 1fr; }.actions .btn { width:100%; }.section-head { align-items:start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }