:root { --ink:#132a28; --muted:#637370; --cream:#f5f2ea; --paper:#fffdf8; --mint:#dcebe3; --green:#2f6d5c; --lime:#cce57b; --coral:#ea785f; --line:#d9ddd6; --shadow:0 24px 70px rgba(24,48,43,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',system-ui,sans-serif; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.site-header { height:76px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(19,42,40,.1); background:rgba(255,253,248,.9); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-.5px; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50% 50% 50% 12%; color:white; background:var(--ink); font-family:Georgia,serif; }
nav { display:flex; gap:28px; } nav a,footer a { font-size:14px; text-decoration:none; } nav a:hover,footer a:hover { text-decoration:underline; }
.dataset-pill { padding:7px 12px; border:1px solid #d7b96a; border-radius:999px; background:#fff8d8; color:#795e14; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.hero { min-height:680px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:8vw; padding:90px clamp(24px,8vw,130px) 110px; overflow:hidden; background:radial-gradient(circle at 80% 18%,#edf5d9 0,transparent 26%),linear-gradient(145deg,#fffdf8 60%,#f0f5eb); }
.eyebrow { margin:0 0 18px; color:var(--green); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:25px; font-size:clamp(52px,6.3vw,92px); line-height:.98; letter-spacing:-.055em; font-weight:600; } h1 em { color:var(--green); font-family:'Playfair Display',Georgia,serif; font-weight:600; }
.hero-lede { max-width:610px; color:var(--muted); font-size:19px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:34px; }.button { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:22px; border:1px solid transparent; border-radius:8px; cursor:pointer; text-decoration:none; font-weight:700; transition:.2s ease; }.button.primary { color:#fff; background:var(--ink); box-shadow:0 10px 25px rgba(19,42,40,.18); }.button.primary:hover { transform:translateY(-2px); background:#204842; }.button.secondary { border-color:var(--line); color:var(--ink); background:transparent; }.button.secondary:hover { background:var(--cream); }.text-link { font-weight:700; text-underline-offset:5px; }.microcopy { margin:18px 0 0; color:#7a8986; font-size:12px; }
.hero-visual { min-height:470px; position:relative; display:grid; place-items:center; }.sample-card { border:1px solid rgba(19,42,40,.12); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:var(--shadow); }.card-main { width:min(100%,460px); padding:30px; position:relative; z-index:2; transform:rotate(-1.5deg); }.card-back { position:absolute; width:360px; height:180px; padding:25px; top:30px; right:-50px; transform:rotate(8deg); background:var(--mint); display:flex; justify-content:space-between; }.sample-top { display:flex; justify-content:space-between; align-items:flex-start; }.sample-top strong { display:block; font-size:50px; line-height:1; letter-spacing:-.06em; }.mini-label { display:block; margin-bottom:8px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }.confidence-dot { color:var(--green); font-size:12px; font-weight:700; }.confidence-dot:before { content:''; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#77ae56; }.sample-school { margin:32px 0 25px; padding-top:22px; border-top:1px solid var(--line); font-size:20px; font-weight:700; }.sample-bars span { display:block; position:relative; margin:15px 0 26px; color:var(--muted); font-size:12px; }.sample-bars span:before,.sample-bars span:after { content:''; height:6px; border-radius:5px; position:absolute; top:24px; left:0; }.sample-bars span:before { width:100%; background:#e8ece7; }.sample-bars span:after { width:var(--value); background:var(--green); }.sample-foot { display:flex; justify-content:space-between; margin-top:32px; color:var(--muted); font-size:12px; }
.builder-section { padding:110px clamp(24px,7vw,110px); background:var(--cream); }.section-heading { max-width:650px; margin-bottom:45px; }.section-heading h2,.results-heading h2,.method-section h2 { margin-bottom:12px; font-size:clamp(36px,4vw,58px); line-height:1.08; letter-spacing:-.04em; }.section-heading>p:last-child { color:var(--muted); }.builder-shell { max-width:1180px; margin:auto; display:grid; grid-template-columns:280px 1fr; min-height:600px; overflow:hidden; border:1px solid rgba(19,42,40,.1); border-radius:18px; background:var(--paper); box-shadow:0 30px 80px rgba(31,55,49,.09); }.step-rail { padding:35px 25px; background:var(--ink); color:#fff; display:flex; flex-direction:column; }.step { width:100%; padding:18px 12px; display:flex; gap:16px; text-align:left; border:0; border-left:2px solid rgba(255,255,255,.15); color:rgba(255,255,255,.48); background:transparent; cursor:pointer; }.step>span { font-size:11px; }.step strong,.step small { display:block; }.step strong { color:inherit; font-size:14px; }.step small { margin-top:3px; font-size:11px; }.step.active { border-color:var(--lime); color:white; }.step.active>span { color:var(--lime); }.rail-note { margin-top:auto; padding:18px; border-radius:10px; color:#d9e3de; background:rgba(255,255,255,.06); font-size:12px; }.rail-note strong,.rail-note span { display:block; }.rail-note span { margin-top:5px; color:#a8b8b4; }.profile-form { padding:50px clamp(28px,6vw,75px) 35px; display:flex; flex-direction:column; }.form-step { animation:fade .25s ease; }.form-heading { margin-bottom:36px; }.form-heading>span { color:var(--green); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }.form-heading h3 { margin:8px 0 7px; font-size:30px; letter-spacing:-.03em; }.form-heading p { color:var(--muted); }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }.field-grid label,.textarea-field { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; }.field-grid label.wide { grid-column:1/-1; }.field-grid label span small { color:var(--muted); font-weight:400; }.field-grid input,.field-grid select,textarea { width:100%; padding:14px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; outline:none; }.field-grid input:focus,.field-grid select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,109,92,.1); }.textarea-field { margin-bottom:24px; }.textarea-field small { color:var(--muted); font-weight:400; }.college-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.college-choice { position:relative; }.college-choice input { position:absolute; opacity:0; }.college-choice label { min-height:92px; padding:18px; display:flex; align-items:center; gap:15px; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.2s; }.college-choice label:before { content:''; flex:0 0 20px; height:20px; border:1px solid #a9b3b0; border-radius:5px; }.college-choice input:checked+label { border-color:var(--green); background:#f1f7f2; }.college-choice input:checked+label:before { content:'✓'; display:grid; place-items:center; color:white; border-color:var(--green); background:var(--green); font-size:12px; }.college-choice strong,.college-choice small { display:block; }.college-choice small { margin-top:4px; color:var(--muted); }.data-callout { margin-top:24px; padding:15px; display:flex; gap:13px; align-items:flex-start; border-radius:9px; background:#fff8d8; color:#6b571c; }.data-callout>span { width:20px; height:20px; display:grid; place-items:center; border:1px solid #c9ae56; border-radius:50%; font:700 12px Georgia; }.data-callout p { margin:0; }.form-actions { margin-top:auto; padding-top:32px; display:flex; justify-content:flex-end; gap:12px; }.form-actions #back-button { margin-right:auto; }.form-error { margin-top:20px; padding:12px 15px; border-radius:8px; color:#822f21; background:#fde5df; font-size:13px; }
.results-section { padding:110px clamp(24px,7vw,110px); background:var(--paper); }.results-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; }.results-disclaimer { max-width:1180px; margin:0 auto 30px; padding:14px 18px; border-left:3px solid #c79f35; background:#fff8df; color:#695822; font-size:13px; }.result-cards { max-width:1180px; margin:auto; display:grid; gap:28px; }.result-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 15px 50px rgba(27,51,46,.07); }.result-summary { padding:30px; display:grid; grid-template-columns:1.25fr .65fr 1.4fr; gap:30px; align-items:center; }.college-name small { display:block; margin-bottom:7px; color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.college-name h3 { margin:0 0 8px; font-size:24px; }.college-name p { margin:0; color:var(--muted); font-size:13px; }.chance { text-align:center; border-left:1px solid var(--line); border-right:1px solid var(--line); }.chance strong { display:block; font-size:56px; letter-spacing:-.06em; line-height:1; }.chance span { color:var(--muted); font-size:12px; }.evidence-numbers { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.metric { padding:12px; border-radius:8px; background:var(--cream); }.metric strong,.metric span { display:block; }.metric strong { font-size:18px; }.metric span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }.result-actions { padding:14px 30px; display:flex; gap:12px; border-top:1px solid var(--line); background:#fbfaf6; }.small-button { padding:8px 12px; border:0; border-radius:6px; color:var(--green); background:var(--mint); cursor:pointer; font-weight:700; font-size:12px; }.evidence-panel { padding:30px; border-top:1px solid var(--line); }.evidence-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; }.evidence-grid h4 { margin:0 0 18px; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }.outcome-row { display:grid; grid-template-columns:75px 1fr 25px; align-items:center; gap:10px; margin:11px 0; font-size:12px; }.outcome-track { height:8px; overflow:hidden; border-radius:5px; background:#edf0eb; }.outcome-track i { display:block; height:100%; border-radius:5px; background:var(--green); }.contribution { margin-bottom:14px; }.contribution div { display:flex; justify-content:space-between; margin-bottom:5px; font-size:12px; }.contribution-bar { display:block; height:5px; border-radius:4px; background:var(--lime); }.method-note { margin:18px 0 0; color:var(--muted); font-size:11px; }.similar-list { display:grid; gap:10px; }.similar-applicant { width:100%; padding:14px 16px; display:grid; grid-template-columns:80px 1fr auto; gap:15px; align-items:center; text-align:left; border:1px solid var(--line); border-radius:9px; background:white; cursor:pointer; }.similar-applicant:hover { border-color:var(--green); transform:translateY(-1px); }.match-score { color:var(--green); font-size:16px; font-weight:700; }.applicant-summary strong,.applicant-summary small { display:block; }.applicant-summary small { color:var(--muted); }.outcome-badge { padding:5px 8px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; }.outcome-badge.accepted { color:#256147; background:#dff1e5; }.outcome-badge.rejected { color:#8a352b; background:#f9e1dc; }.outcome-badge.waitlisted,.outcome-badge.deferred { color:#75601d; background:#f8edc4; }
.method-section { padding:110px clamp(24px,8vw,130px); color:#f8fbf8; background:var(--ink); }.method-section>.eyebrow { color:var(--lime); }.method-section>div:first-child { display:flex; justify-content:space-between; align-items:start; }.method-grid { margin-top:55px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.15); }.method-grid article { padding:28px 28px 20px 0; }.method-grid article+article { padding-left:28px; border-left:1px solid rgba(255,255,255,.15); }.method-grid span { color:var(--lime); font-size:11px; }.method-grid h3 { margin:35px 0 10px; font-size:20px; }.method-grid p { color:#aebdb9; font-size:13px; }.limitations { margin-top:55px; padding:28px; display:grid; grid-template-columns:.5fr 1.5fr; gap:35px; border-radius:10px; color:#ced9d5; background:rgba(255,255,255,.06); font-size:13px; }.limitations p { margin:0; }
footer { padding:35px clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; background:#0c1d1b; color:#dbe4e1; }footer p { margin:0; color:#899b96; font-size:12px; }
dialog { width:min(760px,calc(100% - 30px)); max-height:88vh; padding:0; overflow:auto; border:0; border-radius:16px; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }dialog::backdrop { background:rgba(7,23,21,.72); backdrop-filter:blur(4px); }.dialog-close { position:sticky; float:right; top:15px; right:15px; width:36px; height:36px; z-index:2; border:0; border-radius:50%; background:var(--cream); cursor:pointer; font-size:22px; }.dialog-body { padding:45px; }.dialog-body h2 { margin-bottom:5px; font-size:34px; }.dialog-subtitle { color:var(--muted); }.profile-stats { margin:28px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.profile-stats div { padding:15px; border-radius:8px; background:var(--cream); }.profile-stats small,.profile-stats strong { display:block; }.profile-stats small { color:var(--muted); }.tag-list { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 25px; }.tag { padding:6px 9px; border-radius:99px; color:var(--green); background:var(--mint); font-size:11px; }.decision-list { margin:10px 0 28px; border-top:1px solid var(--line); }.decision-item { padding:12px 0; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); font-size:13px; }.source-box { padding:18px; border-radius:9px; background:#f3f0e7; }.source-box p { color:var(--muted); font-size:12px; }.source-box a { font-weight:700; }
@keyframes fade { from { opacity:0; transform:translateY(5px); } }
@media (max-width:900px) { nav { display:none; }.hero { grid-template-columns:1fr; padding-top:70px; }.hero-visual { min-height:400px; }.builder-shell { grid-template-columns:1fr; }.step-rail { padding:14px; flex-direction:row; }.step { justify-content:center; }.step small,.rail-note { display:none; }.result-summary { grid-template-columns:1fr 1fr; }.evidence-numbers { grid-column:1/-1; }.evidence-grid { grid-template-columns:1fr; }.method-grid { grid-template-columns:1fr 1fr; }.limitations { grid-template-columns:1fr; } }
@media (max-width:600px) { .site-header { height:66px; }.dataset-pill { max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.hero { min-height:auto; padding:60px 22px 80px; }.hero-actions { align-items:flex-start; flex-direction:column; }.card-back { display:none; }.builder-section,.results-section,.method-section { padding:75px 18px; }.profile-form { padding:35px 20px 25px; }.field-grid,.college-options { grid-template-columns:1fr; }.result-summary { grid-template-columns:1fr; }.chance { padding:20px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.evidence-numbers { grid-column:auto; }.similar-applicant { grid-template-columns:65px 1fr; }.outcome-badge { grid-column:2; justify-self:start; }.method-grid { grid-template-columns:1fr; }.method-grid article+article { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.15); }.results-heading { align-items:flex-start; gap:15px; flex-direction:column; }.profile-stats { grid-template-columns:1fr; }.dialog-body { padding:35px 22px; } footer { gap:20px; flex-wrap:wrap; } }
.college-search { margin-bottom:14px; display:flex; flex-direction:column; gap:7px; color:var(--ink); font-size:13px; font-weight:700; }
.college-search input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; outline:none; }
.college-search input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,109,92,.1); }
.college-options { max-height:460px; padding-right:6px; overflow:auto; }
.college-empty { margin:16px 0 0; color:var(--muted); font-size:13px; }
.calibration-note { margin:22px 0; padding:14px; border-left:3px solid var(--green); border-radius:0 7px 7px 0; background:var(--cream); }
.calibration-note strong,.calibration-note small { display:block; }
.calibration-note p { margin:5px 0; color:var(--muted); font-size:12px; }
.calibration-note small { color:var(--green); font-weight:700; }