:root {
    --home-navy: #17233b;
    --home-deep: #101827;
    --home-cream: #fafaf7;
    --home-soft: #f2f3f5;
    --home-line: #e4e6ea;
    --home-text: #202631;
    --home-muted: #6b7280;
    --home-plum: #6755c7;
    --home-coral: #e66d5a;
}
.home-page { background: var(--home-cream); color: var(--home-text); }
.home-page .site-main { overflow: hidden; }
.home-container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.home-section { padding: 112px 0; }
.home-eyebrow, .home-section-kicker { display: inline-block; color: var(--home-plum); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.home-section-heading { max-width: 720px; margin-bottom: 42px; }
.home-section-heading h2, .explore-heading-row h2, .home-analysis-copy h2, .home-major-copy h2, .home-principle-layout h2 { margin: 14px 0 15px; color: var(--home-navy); font-size: clamp(34px, 4vw, 54px); line-height: 1.14; letter-spacing: -.045em; }
.home-section-heading p, .home-analysis-copy > p, .home-major-copy > p { color: var(--home-muted); font-size: 16px; line-height: 1.75; }
.home-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 22px; border: 1px solid transparent; border-radius: 14px; font-size: 14px; font-weight: 900; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.home-button:hover { transform: translateY(-2px); }
.home-button--primary { background: var(--home-navy); color: #fff; box-shadow: 0 14px 30px rgba(23,35,59,.16); }
.home-button--secondary { border-color: #d9dbe0; background: rgba(255,255,255,.75); color: var(--home-navy); }
.home-button--outline { border-color: #ccd0d8; color: var(--home-navy); }
.home-button--white { background: #fff; color: var(--home-navy); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.home-text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--home-navy); font-size: 14px; font-weight: 900; text-decoration: none; }
.home-text-link--light { color: #fff; }

.home-hero { position: relative; padding: 56px 0 60px; background: radial-gradient(circle at 82% 18%, rgba(103,85,199,.12), transparent 29%), linear-gradient(180deg,#fafaf7 0%,#f4f3f0 100%); }
.home-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#dcdde1,transparent); }
.home-hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(480px,.98fr); align-items: center; gap: 72px; }
.home-hero-copy h1 { max-width: 680px; margin: 19px 0 24px; color: var(--home-navy); font-size: clamp(44px,5.3vw,72px); line-height: 1.08; letter-spacing: -.06em; }
.home-hero-copy h1 em { color: var(--home-plum); font-style: normal; }
.home-hero-copy > p { max-width: 640px; margin:0; color:#5f6673; font-size:18px; line-height:1.75; word-break:keep-all; }
.home-hero-exam-highlight {
    color: var(--home-plum);
    font-weight: 900;
}
.home-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.home-hero-note { margin-top:14px !important; font-size:12px !important; color:#7b808a !important; }
.home-path-card { padding: 24px; border:1px solid rgba(23,35,59,.09); border-radius:30px; background:rgba(255,255,255,.86); box-shadow:0 30px 90px rgba(23,35,59,.13); backdrop-filter:blur(18px); transform:rotate(1deg); }
.path-card-head, .path-result-card, .path-preview-row { display:flex; align-items:center; justify-content:space-between; }
.path-card-head span, .path-card-head strong { display:block; }
.path-card-head > div > span { margin-bottom:5px; color:var(--home-plum); font-size:9px; font-weight:900; letter-spacing:.13em; }
.path-card-head strong { color:var(--home-navy); font-size:20px; }
.path-status { padding:7px 10px; border-radius:99px; background:#edf6ed; color:#387545; font-size:10px; font-weight:900; }
.path-score-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 12px; }
.path-score-grid article { min-height:170px; padding:18px; border-radius:20px; background:#f5f5f2; }
.path-score-grid article:nth-child(2) { background:#f1effa; }
.path-score-grid span,.path-score-grid strong,.path-score-grid small { display:block; }
.path-score-grid span { color:#797e88; font-size:10px; font-weight:800; }
.path-score-grid strong { margin-top:7px; color:var(--home-navy); font-size:15px; line-height:1.4; }
.path-score-grid small { margin-top:10px; color:#858a94; font-size:10px; }
.mini-bars { display:flex; align-items:flex-end; gap:7px; height:45px; margin-top:16px; }
.mini-bars i { flex:1; height:var(--value); border-radius:6px 6px 2px 2px; background:var(--home-plum); opacity:.75; }
.trait-dots { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:25px; }
.trait-dots i { aspect-ratio:1; border-radius:50%; background:#8d7bd4; }
.trait-dots i:nth-child(2),.trait-dots i:nth-child(5){ transform:scale(.7); opacity:.55; }
.path-result-card { gap:20px; padding:18px 20px; border-radius:20px; background:var(--home-navy); color:#fff; }
.path-result-card span,.path-result-card strong { display:block; }
.path-result-card > div span { margin-bottom:5px; color:#bdb5ee; font-size:10px; font-weight:800; }
.path-result-card strong { font-size:14px; line-height:1.45; }
.path-result-arrow { display:grid!important; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); font-size:18px; }
.path-preview-row { margin-top:18px; padding:0 4px; }
.path-preview-row div { flex:1; border-right:1px solid var(--home-line); text-align:center; }
.path-preview-row div:last-child { border-right:0; }
.path-preview-row span,.path-preview-row strong { display:block; }
.path-preview-row span { margin-bottom:4px; color:#8b9099; font-size:9px; }
.path-preview-row strong { color:var(--home-navy); font-size:12px; }

.home-start-section { background:#fff; }
.home-start-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.home-start-card { position:relative; min-height:380px; padding:28px; overflow:hidden; border:1px solid var(--home-line); border-radius:24px; color:var(--home-text); text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.home-start-card:hover { transform:translateY(-6px); border-color:#c9c3eb; box-shadow:0 24px 60px rgba(23,35,59,.09); }
.start-card-number { position:absolute; top:24px; right:26px; color:#c9ccd2; font-size:12px; font-weight:900; }
.start-card-icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:58px; border-radius:20px; background:#f1effa; color:var(--home-plum); }
.start-card-icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.home-start-card--major .start-card-icon { background:#f8ece8; color:var(--home-coral); }
.home-start-card--activity .start-card-icon { background:#eceff2; color:#526175; }
.home-start-card h3 { margin:0 0 14px; color:var(--home-navy); font-size:22px; line-height:1.4; letter-spacing:-.03em; }
.home-start-card p { margin:0; color:var(--home-muted); font-size:14px; line-height:1.75; }
.start-card-link { position:absolute; left:28px; bottom:27px; color:var(--home-navy); font-size:13px; font-weight:900; }
.start-card-link b { margin-left:8px; }

.home-analysis-section { background:#f1f2f4; }
.home-analysis-layout { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:80px; }
.analysis-flow { position:relative; display:grid; gap:12px; }
.analysis-card { display:flex; align-items:flex-start; gap:18px; padding:22px 24px; border:1px solid #e0e2e6; border-radius:20px; background:#fff; }
.analysis-step { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:#f0eef8; color:var(--home-plum); font-size:11px; font-weight:900; }
.analysis-code { color:var(--home-plum); font-size:10px; font-weight:900; letter-spacing:.12em; }
.analysis-card h3 { margin:5px 0 5px; color:var(--home-navy); font-size:19px; }
.analysis-card p { margin:0; color:var(--home-muted); font-size:13px; line-height:1.6; }
.analysis-connector { position:absolute; right:34px; top:50%; z-index:2; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--home-plum); color:#fff; font-weight:900; transform:translateY(-50%); }
.analysis-card--result { position:relative; border-color:transparent; background:var(--home-navy); color:#fff; }
.analysis-card--result .analysis-step { background:rgba(255,255,255,.12); color:#fff; }
.analysis-card--result .analysis-code { color:#c8c0ff; }
.analysis-card--result h3 { color:#fff; }
.analysis-card--result p { color:rgba(255,255,255,.66); }
.analysis-result-badge { position:absolute; right:22px; top:22px; padding:7px 10px; border-radius:99px; background:rgba(255,255,255,.1); color:#fff; font-size:10px; font-weight:900; }

.home-preview-section { background:var(--home-deep); }
.home-section-heading--light h2 { color:#fff; }
.home-section-heading--light p { color:rgba(255,255,255,.58); }
.preview-shell { overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:28px; background:#172135; box-shadow:0 30px 90px rgba(0,0,0,.18); }
.preview-tabs { display:flex; gap:4px; padding:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.preview-tabs button { min-height:42px; padding:0 16px; border:0; border-radius:10px; background:transparent; color:rgba(255,255,255,.5); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.preview-tabs button[aria-selected="true"] { background:#fff; color:var(--home-navy); }
.preview-content { padding:42px; }
.preview-panel { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; min-height:340px; }
.preview-panel-copy > span { color:#bdb5ee; font-size:10px; font-weight:900; letter-spacing:.12em; }
.preview-panel-copy h3 { margin:13px 0 14px; color:#fff; font-size:34px; line-height:1.25; letter-spacing:-.04em; }
.preview-panel-copy p { margin:0; color:rgba(255,255,255,.62); font-size:14px; line-height:1.8; }
.preview-panel-copy ul { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 0; padding:0; list-style:none; }
.preview-panel-copy li { padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:99px; color:rgba(255,255,255,.72); font-size:10px; }
.subject-preview { display:grid; gap:12px; padding:24px; border-radius:22px; background:#fff; }
.subject-preview div { display:grid; grid-template-columns:50px 1fr; align-items:center; gap:5px 14px; }
.subject-preview span { color:#7d828c; font-size:11px; font-weight:800; }
.subject-preview strong { color:var(--home-navy); font-size:14px; }
.subject-preview i { grid-column:1/-1; position:relative; display:block; height:8px; overflow:hidden; border-radius:99px; background:#ececf0; }
.subject-preview i::after { content:''; display:block; width:var(--rate); height:100%; border-radius:inherit; background:var(--home-plum); }
.radar-preview { position:relative; width:min(320px,80vw); aspect-ratio:1; margin:auto; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 15%,rgba(255,255,255,.08) 15.5% 16%), linear-gradient(30deg,transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%); }
.radar-shape { position:absolute; inset:20%; background:rgba(126,105,220,.5); clip-path:polygon(50% 0,90% 27%,78% 77%,50% 94%,15% 70%,20% 24%); }
.radar-preview span { position:absolute; left:var(--x); top:var(--y); color:rgba(255,255,255,.68); font-size:10px; transform:translate(-50%,-50%); }
.school-preview-card { padding:26px; border-radius:22px; background:#fff; }
.school-preview-head { display:flex; justify-content:space-between; color:#8b9099; font-size:10px; }
.school-preview-head b { color:var(--home-plum); }
.school-preview-card h4 { margin:18px 0 7px; color:var(--home-navy); font-size:24px; }
.school-preview-card > p { color:#747985; font-size:12px; }
.school-match-row { display:flex; justify-content:space-between; margin:22px 0; padding:14px; border-radius:12px; background:#f4f2fb; font-size:12px; }
.school-preview-card ul { margin:0; padding-left:18px; color:#626874; font-size:12px; line-height:1.8; }
.major-ranking { display:grid; gap:10px; }
.major-ranking div { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:14px; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.05); color:#fff; }
.major-ranking div:first-child { background:#fff; color:var(--home-navy); }
.major-ranking span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(103,85,199,.18); font-weight:900; }
.major-ranking i { opacity:.55; font-size:10px; font-style:normal; }

.explore-heading-row { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:40px; }
.school-region-bar { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-bottom:16px; overflow:hidden; border:1px solid var(--home-line); border-radius:18px; background:var(--home-line); }
.school-region-bar div { padding:20px 24px; background:#fff; }
.school-region-bar span,.school-region-bar strong { display:block; }
.school-region-bar span { margin-bottom:5px; color:#8a8f98; font-size:10px; }
.school-region-bar strong { color:var(--home-navy); font-size:14px; }
.school-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.school-info-card { min-height:330px; padding:32px; border-radius:24px; background:#f0eef8; }
.school-info-card--dark { background:var(--home-navy); color:#fff; }
.school-area { color:var(--home-plum); font-size:10px; font-weight:900; letter-spacing:.1em; }
.school-info-card--dark .school-area { color:#c8c0ff; }
.school-info-card h3 { margin:54px 0 12px; color:var(--home-navy); font-size:26px; }
.school-info-card--dark h3 { color:#fff; }
.school-info-card p { max-width:440px; color:#656c78; font-size:14px; line-height:1.7; }
.school-info-card--dark p { color:rgba(255,255,255,.63); }
.school-tag-row { display:flex; gap:7px; margin:24px 0; }
.school-tag-row span { padding:7px 9px; border-radius:99px; background:rgba(255,255,255,.65); color:#5e6570; font-size:10px; }
.school-info-card--dark .school-tag-row span { background:rgba(255,255,255,.09); color:rgba(255,255,255,.7); }
.school-info-card a { color:var(--home-navy); font-size:13px; font-weight:900; text-decoration:none; }
.school-info-card--dark a { color:#fff; }

.home-major-section { background:#f1f2f4; }
.home-major-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; }
.major-visual { position:relative; width:min(520px,90vw); aspect-ratio:1; margin:auto; }
.major-orbit { position:absolute; inset:15%; border:1px solid #d1d3da; border-radius:50%; }
.major-orbit--two { inset:29%; border-style:dashed; }
.major-center { position:absolute; inset:38%; display:grid; place-content:center; border-radius:50%; background:var(--home-navy); color:#fff; text-align:center; box-shadow:0 22px 50px rgba(23,35,59,.2); }
.major-center small,.major-center strong { display:block; }
.major-center small { margin-bottom:5px; color:#bdb5ee; font-size:8px; letter-spacing:.14em; }
.major-center strong { font-size:17px; }
.major-node { position:absolute; display:grid; place-items:center; min-width:74px; height:42px; padding:0 12px; border:1px solid #dddee3; border-radius:99px; background:#fff; color:var(--home-navy); font-size:12px; font-weight:900; box-shadow:0 12px 30px rgba(23,35,59,.08); }
.major-node--1{top:8%;left:42%}.major-node--2{top:31%;right:2%}.major-node--3{bottom:15%;right:13%}.major-node--4{bottom:11%;left:12%}.major-node--5{top:28%;left:0}
.major-benefits { display:flex; flex-wrap:wrap; gap:7px; margin:26px 0 30px; }
.major-benefits span { padding:8px 10px; border-radius:99px; background:#fff; color:#59606c; font-size:10px; font-weight:800; }

.home-next-section { background:#fff; }
.next-action-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--home-line); border-bottom:1px solid var(--home-line); }
.next-action-grid a { padding:34px 30px; border-right:1px solid var(--home-line); color:var(--home-text); text-decoration:none; }
.next-action-grid a:last-child { border-right:0; }
.next-action-grid span { color:var(--home-plum); font-size:10px; font-weight:900; }
.next-action-grid h3 { margin:38px 0 10px; color:var(--home-navy); font-size:23px; }
.next-action-grid p { min-height:48px; color:var(--home-muted); font-size:13px; line-height:1.7; }
.next-action-grid b { display:block; margin-top:24px; color:var(--home-navy); font-size:12px; }

.next-action-grid--consulting {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.next-action-grid--consulting a {
    position:relative;
    min-height:270px;
    padding:38px 34px;
    transition:background .2s ease, transform .2s ease;
}
.next-action-grid--consulting a:hover {
    background:#f7f6fb;
}
.next-action-grid--consulting span {
    letter-spacing:.08em;
}
.next-action-grid--consulting h3 {
    margin:52px 0 12px;
    font-size:28px;
    letter-spacing:-.035em;
}
.next-action-grid--consulting p {
    max-width:500px;
    min-height:auto;
    margin:0;
    font-size:14px;
    line-height:1.8;
}
.next-action-grid--consulting b {
    margin-top:28px;
    font-size:13px;
}

.home-principle-section { background:#f6f5f1; }
.home-principle-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; }
.principle-list { border-top:1px solid #d9dadd; }
.principle-list > div {
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:18px;
    padding:28px 0;
    border-bottom:1px solid #d9dadd;
    align-items:start;
}
.principle-list > div > span {
    color:var(--home-plum);
    font-size:10px;
    font-weight:900;
    padding-top:3px;
}
.principle-list > div > div {
    display:block;
    min-width:0;
    padding:0;
    border:0;
}
.principle-list > div > div > strong {
    display:block;
    color:var(--home-navy);
    font-size:17px;
    line-height:1.5;
    letter-spacing:-.02em;
}
.principle-list > div > div > p {
    margin:8px 0 0;
    color:#667085;
    font-size:14px;
    line-height:1.75;
    font-weight:500;
    letter-spacing:-.015em;
    word-break:keep-all;
}
.principle-list > div > div > p strong {
    display:inline;
    color:var(--home-navy);
    font-size:inherit;
    line-height:inherit;
    font-weight:800;
}
.principle-notice { margin:48px 0 0; padding:18px 20px; border-radius:14px; background:#ecebe7; color:#717680; font-size:11px; line-height:1.7; }

.home-final-cta { padding:110px 0; background:linear-gradient(135deg,#17233b,#2b3157); color:#fff; text-align:center; }
.home-final-cta > div { max-width:800px; }
.home-final-cta > div > span { color:#c8c0ff; font-size:10px; font-weight:900; letter-spacing:.15em; }
.home-final-cta h2 { margin:18px 0; font-size:clamp(38px,5vw,64px); line-height:1.12; letter-spacing:-.05em; }
.home-final-cta p { margin:0 0 30px; color:rgba(255,255,255,.67); font-size:15px; line-height:1.75; }

[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; transition-delay:var(--reveal-delay,0ms); }
[data-reveal].is-visible { opacity:1; transform:none; }

@media (max-width: 980px) {
    .home-section { padding:88px 0; }
    .home-hero { padding:72px 0 76px; }
    .home-hero-grid,.home-analysis-layout,.home-major-layout,.home-principle-layout { grid-template-columns:1fr; gap:54px; }
    .home-hero-grid { gap:48px; }
    .home-path-card { width:min(620px,100%); margin:auto; transform:none; }
    .home-start-grid,.next-action-grid { grid-template-columns:1fr; }
    .next-action-grid--consulting { grid-template-columns:1fr; }
    .next-action-grid--consulting a { min-height:auto; }
    .home-start-card { min-height:310px; }
    .next-action-grid a { border-right:0; border-bottom:1px solid var(--home-line); }
    .next-action-grid a:last-child { border-bottom:0; }
    .preview-panel { grid-template-columns:1fr; gap:36px; }
    .preview-content { padding:32px; }
    .home-major-copy { max-width:650px; }
}

@media (max-width: 720px) {
    .home-container { width:calc(100% - 32px); }
    .home-section { padding:72px 0; }
    .home-hero { padding:64px 0 72px; }
    .home-hero-copy h1 { font-size:42px; }
    .home-hero-copy > p { font-size:15px; }
    .desktop-only { display:none; }
    .home-hero-actions { display:grid; }
    .home-button { width:100%; }
    .path-score-grid,.school-card-grid,.school-region-bar { grid-template-columns:1fr; }
    .path-preview-row { align-items:stretch; }
    .path-preview-row strong { font-size:10px; }
    .home-section-heading h2,.explore-heading-row h2,.home-analysis-copy h2,.home-major-copy h2,.home-principle-layout h2 { font-size:36px; }
    .home-start-card { min-height:330px; padding:24px; }
    .start-card-icon { margin-bottom:42px; }
    .start-card-link { left:24px; bottom:24px; }
    .analysis-card { padding:18px; }
    .analysis-result-badge,.analysis-connector { display:none; }
    .preview-tabs { overflow-x:auto; }
    .preview-tabs button { flex:0 0 auto; }
    .preview-content { padding:24px 20px 28px; }
    .preview-panel-copy h3 { font-size:28px; }
    .explore-heading-row { display:block; }
    .explore-heading-row .home-button { margin-top:22px; }
    .school-info-card { min-height:300px; padding:26px; }
    .school-info-card h3 { margin-top:44px; }
    .major-visual { width:100%; }
    .major-node { min-width:62px; height:38px; font-size:10px; }
    .home-principle-layout { gap:34px; }
    .principle-list > div {
        grid-template-columns:32px minmax(0,1fr);
        gap:12px;
        padding:22px 0;
    }
    .principle-list > div > div > strong { font-size:16px; }
    .principle-list > div > div > p { font-size:13px; }
    .home-final-cta { padding:84px 0; }
}

@media (max-width: 440px) {
    .home-container { width:calc(100% - 24px); }
    .home-hero-copy h1 { font-size:36px; }
    .home-path-card { padding:18px; border-radius:24px; }
    .path-score-grid { grid-template-columns:1fr; }
    .path-score-grid article { min-height:145px; }
    .home-section-heading h2,.explore-heading-row h2,.home-analysis-copy h2,.home-major-copy h2,.home-principle-layout h2 { font-size:31px; }
    .home-start-card h3 { font-size:20px; }
    .preview-content { padding-inline:16px; }
    .preview-panel-copy h3 { font-size:25px; }
    .major-ranking div { grid-template-columns:36px 1fr; }
    .major-ranking i { display:none; }
    .major-center { inset:35%; }
    .major-node--1{left:38%}.major-node--2{right:-2%}.major-node--5{left:-2%}
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity:1; transform:none; transition:none; }
    .home-button,.home-start-card { transition:none; }
}


/* =========================================================
   Static result preview cards
========================================================= */
.result-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.result-preview-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    background: #172135;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}

.result-preview-card--featured {
    background: #1d2941;
    border-color: rgba(255, 255, 255, .16);
}

.result-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.result-preview-number {
    color: rgba(255, 255, 255, .38);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.result-preview-code {
    min-width: 42px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    letter-spacing: .08em;
}

.result-preview-copy > span {
    color: #bdb5ee;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.result-preview-copy h3 {
    margin: 11px 0 13px;
    color: #fff;
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -.035em;
}

.result-preview-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.75;
}

.result-preview-copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 19px 0 24px;
    padding: 0;
    list-style: none;
}

.result-preview-copy li {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    color: rgba(255, 255, 255, .73);
    font-size: 9px;
    line-height: 1.2;
}

.result-preview-card .subject-preview,
.result-preview-card .school-preview-card,
.result-preview-radar {
    margin-top: auto;
}

.result-preview-card .subject-preview {
    width: 100%;
}

.result-preview-radar {
    width: min(230px, 82%);
    aspect-ratio: 1;
    align-self: center;
}

.result-preview-card .school-preview-card {
    width: 100%;
}

.result-preview-action {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

@media (max-width: 980px) {
    .result-preview-grid {
        grid-template-columns: 1fr;
    }

    .result-preview-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
        gap: 28px;
        align-items: center;
    }

    .result-preview-head {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .result-preview-copy ul {
        margin-bottom: 0;
    }

    .result-preview-card .subject-preview,
    .result-preview-card .school-preview-card,
    .result-preview-radar {
        margin-top: 0;
    }
}

@media (max-width: 680px) {
    .result-preview-grid {
        gap: 12px;
    }

    .result-preview-card {
        display: flex;
        padding: 20px;
        border-radius: 20px;
    }

    .result-preview-head {
        margin-bottom: 20px;
    }

    .result-preview-copy h3 {
        font-size: 21px;
    }

    .result-preview-copy p {
        font-size: 12px;
    }

    .result-preview-radar {
        width: min(220px, 78%);
        margin: 4px auto 0;
    }

    .result-preview-action {
        margin-top: 20px;
    }
}