/* Ranked matches: one recommendation in focus, two supporting directions. */
.hero.hero-v12{padding-bottom:48px}
.hero-v12 .hero-center{max-width:900px}
.match-stage{position:relative;width:100%;max-width:1000px;height:335px;margin:48px auto 0;perspective:1400px;isolation:isolate}
.match-stage:before{content:'';position:absolute;inset:55% 14% -12%;background:radial-gradient(ellipse,#00b98f30,transparent 68%);filter:blur(20px);pointer-events:none}
.match-card{position:absolute;top:20px;width:31%;height:285px;padding:25px 28px;border:1px solid #d2e7d9;border-radius:22px;background:#d6e9df;color:#194a3d;box-shadow:0 20px 45px #001b1930,0 4px 0 #89b2a2;display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s;backface-visibility:hidden}
.match-left{left:4%;transform:rotateY(13deg) rotateZ(-5deg) scale(.92);transform-origin:right center;z-index:1}
.match-right{right:4%;transform:rotateY(-13deg) rotateZ(5deg) scale(.92);transform-origin:left center;z-index:1;background:#c4ded1}
.match-primary{top:0;left:50%;width:37%;height:324px;transform:translateX(-50%);z-index:3;padding:28px 31px;background:linear-gradient(135deg,#fff 20%,#f0fcf4);border-color:#f0fff5;box-shadow:0 25px 60px #001c194d,0 5px 0 #9dc9b7}
.match-rank{display:flex;gap:10px;align-items:center;font-size:9px;letter-spacing:.08em;text-transform:uppercase;min-height:29px;color:#436d5d}
.match-rank b{display:grid;place-items:center;width:26px;height:26px;border:1px solid #a9c5b7;border-radius:50%;font-size:11px;font-weight:500;flex:none;letter-spacing:0}
.match-primary .match-rank{color:#007c6d}
.match-primary .match-rank b{background:#00897b;color:white;border:0}
.match-card-content{display:flex;flex:1;flex-direction:column;transition:opacity .19s,transform .25s;min-width:0}
.match-career-icon{height:35px;width:35px;display:grid;place-items:center;background:#b6d7c744;border:1px solid #7fab9540;border-radius:10px;color:#007f70;margin:21px 0 15px}
.match-career-icon svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.match-card h2{font-size:25px;font-weight:450;line-height:1.06;letter-spacing:-.05em;margin:0;color:#173e32;min-height:54px;max-width:210px}
.match-primary h2{font-size:30px;min-height:64px;max-width:270px}
.match-primary .match-career-icon{margin-top:22px}
.match-score{display:flex;gap:9px;align-items:baseline;margin-top:auto;padding-top:13px}
.match-score strong{font-size:43px;font-weight:450;letter-spacing:-.065em;line-height:1;color:#007d6d}
.match-score strong small{font-size:20px;font-weight:400;letter-spacing:-.03em}
.match-score>span{font-size:10px;color:#527361}
.match-primary .match-score strong{font-size:52px}
.match-primary .match-score strong small{font-size:24px}
.match-card.is-changing .match-card-content{opacity:0;transform:translateY(8px)}
.match-primary.is-changing{transform:translateX(-50%) translateY(-5px) rotateX(2deg)}
.match-card:focus-visible{outline:2px solid #d9c096;outline-offset:7px}
@media(min-width:961px) and (max-height:790px){.hero.hero-v12{padding-top:102px;padding-bottom:22px}.match-stage{margin-top:31px;height:288px;max-width:920px}.match-card{height:247px;padding:20px 25px}.match-primary{height:282px;padding:23px 28px}.match-career-icon,.match-primary .match-career-icon{margin-top:15px;margin-bottom:10px}.match-card h2{font-size:23px;min-height:50px}.match-primary h2{font-size:28px;min-height:60px}.match-score strong{font-size:36px}.match-primary .match-score strong{font-size:44px}}
@media(max-width:960px){.match-stage{height:310px;margin-top:44px}.match-card{padding:22px;height:260px;width:33%}.match-primary{width:40%;height:300px;padding:24px}.match-left{left:0}.match-right{right:0}.match-card h2{font-size:22px}.match-primary h2{font-size:28px}.match-rank{font-size:8px;gap:7px}}
@media(max-width:600px){.hero.hero-v12{padding:112px 20px 40px;justify-content:center;min-height:100svh}.hero-v12 .hero-center>p{font-size:13px;max-width:350px}.match-stage{width:calc(100% + 40px);height:325px;margin:43px -20px 0;max-width:none}.match-card{top:38px;width:160px;height:250px;padding:20px 16px;border-radius:16px}.match-left{left:calc(50% - 204px);transform:rotateY(17deg) rotateZ(-8deg) scale(.9)}.match-right{right:calc(50% - 204px);transform:rotateY(-17deg) rotateZ(8deg) scale(.9)}.match-primary{top:0;width:245px;height:316px;padding:26px;left:50%;transform:translateX(-50%);border-radius:19px}.match-card:not(.match-primary) .match-rank>span{display:none}.match-left .match-card-content{align-items:flex-start}.match-right .match-rank{justify-content:flex-end}.match-right .match-card-content{align-items:flex-end}.match-card:not(.match-primary) h2{font-size:19px;max-width:115px;min-height:65px}.match-right h2{text-align:right}.match-card:not(.match-primary) .match-score>span{display:none}.match-card:not(.match-primary) .match-score strong{font-size:31px}.match-primary h2{font-size:29px;min-height:65px}.match-primary .match-rank{font-size:8px}.match-primary .match-career-icon{margin-top:23px}.match-primary .match-score strong{font-size:49px}}
@media(prefers-reduced-motion:reduce){.match-card,.match-card-content{transition:none}}
/* Keep the supporting matches readable around the central card. */
.match-right .match-rank{justify-content:flex-end}
.match-right .match-card-content{align-items:flex-end}
.match-right h2{text-align:right}
@media(max-width:600px){
 .match-stage{height:348px;margin-top:32px}
 .match-card.match-primary{height:243px;padding:21px 25px}
 .match-primary .match-career-icon{margin:15px 0 11px;width:30px;height:30px}
 .match-primary h2{font-size:26px;min-height:55px}
 .match-primary .match-score{padding-top:9px}
 .match-primary .match-score strong{font-size:41px}
 .match-card:not(.match-primary){top:194px;width:calc(50% - 14px);height:149px;padding:13px 15px}
 .match-left{left:8px;transform:rotateZ(-3deg)}
 .match-right{right:8px;transform:rotateZ(3deg)}
 .match-card:not(.match-primary) .match-career-icon{display:none}
 .match-card:not(.match-primary) .match-card-content{padding-top:14px}
 .match-card:not(.match-primary) h2{font-size:16px;min-height:35px;max-width:145px}
 .match-card:not(.match-primary) .match-score{padding-top:9px}
 .match-card:not(.match-primary) .match-score strong{font-size:26px}
 .match-card:not(.match-primary) .match-score strong small{font-size:13px}
}