:root { --recommend-ink:#18191e; --recommend-muted:#646974; --recommend-red:#c93543; --recommend-line:#e6e3df; }
html { scroll-padding-top: 120px; }
body { background:#fbfaf8; color:var(--recommend-ink); }
.recommend-shell { width:min(calc(100% - 64px), 1250px); margin-inline:auto; }
.recommend-header { position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid #eeeae7; }
.recommend-header-inner { min-height:76px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; }
.recommend-header .brand, .recommend-footer .brand { width:max-content; }
.recommend-header-label { justify-self:center; color:#8e8e91; font-size:11px; font-weight:700; letter-spacing:.16em; white-space:nowrap; }
.recommend-header-link { justify-self:end; display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.recommend-header-link .icon { width:16px; }
.recommend-header-link:hover, .recommend-footer a:last-child:hover { color:var(--recommend-red); }
.recommend-progress { background:#fff; border-bottom:1px solid var(--recommend-line); }
.recommend-progress-inner { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.recommend-progress-item { display:flex; align-items:center; gap:13px; min-height:66px; border-top:4px solid #d8d9db; color:#94969b; font-size:12px; font-weight:700; }
.recommend-progress-item b { font-size:11px; letter-spacing:.08em; }
.recommend-progress-item.is-current { border-color:var(--recommend-red); color:#202228; }
.recommend-progress-item.is-complete { border-color:#537a6b; color:#4d6c60; }
.recommend-step { min-height:calc(100vh - 143px); padding-block:clamp(55px,6vw,88px) 90px; }
.recommend-step[hidden], .recommend-results[hidden] { display:none; }
#interest-step { display:grid; grid-template-columns:minmax(0,1.17fr) minmax(330px,.83fr); gap:clamp(40px,7vw,110px); }
.recommend-question { max-width:720px; }
.recommend-eyebrow { display:inline-flex; align-items:center; gap:11px; color:#a22a37; font-size:10px; font-weight:700; letter-spacing:.18em; }
.recommend-eyebrow > span { display:block; width:27px; height:2px; background:var(--recommend-red); }
.recommend-step h1, .recommend-results h1 { margin:22px 0 19px; font:400 clamp(48px,5vw,78px)/1.1 Anton,Impact,sans-serif; letter-spacing:-.025em; }
.recommend-step h1 em, .recommend-results h1 em, .recommend-more-heading h2 em { color:var(--recommend-red); font:inherit; font-style:normal; white-space:normal; }
.recommend-question > p, .recommend-goal-inner > p, .recommend-results-intro p { max-width:600px; margin:0; color:var(--recommend-muted); font-size:17px; line-height:1.68; }
.recommend-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:40px; }
.recommend-choice { position:relative; display:flex; align-items:center; gap:16px; min-height:77px; padding:19px 20px; border:1px solid #e0dfdd; border-radius:9px; background:#fff; box-shadow:0 5px 18px #191b2110; cursor:pointer; transition:border-color .18s, background .18s, transform .18s, box-shadow .18s; }
.recommend-choice:hover { transform:translateY(-2px); border-color:#d69da4; box-shadow:0 10px 24px #191b2117; }
.recommend-choice:has(input:checked) { background:#fff4f3; border-color:#bd3341; box-shadow:inset 0 0 0 1px #bd3341; }
.recommend-choice:has(input:focus-visible), .recommend-goal:has(input:focus-visible) { outline:3px solid #bd3341; outline-offset:3px; }
.recommend-choice input, .recommend-goal input { position:absolute; width:1px; height:1px; opacity:0; }
.choice-number { color:#a5a7ab; font-size:11px; font-weight:700; }
.recommend-choice strong { font-size:16px; letter-spacing:-.025em; }
.choice-check { display:grid; place-items:center; width:23px; height:23px; margin-left:auto; border:1px solid #bdc0c5; border-radius:5px; color:transparent; flex:none; }
.choice-check .icon { width:16px; height:16px; }
.recommend-choice:has(input:checked) .choice-check { background:var(--recommend-red); border-color:var(--recommend-red); color:#fff; }
.recommend-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:30px; }
.recommend-skip, .recommend-back { background:none; border:0; color:#6b6f77; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.recommend-skip:hover, .recommend-back:hover { color:var(--recommend-red); }
.recommend-back { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.recommend-back .icon { width:16px; }
.recommend-next { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:54px; padding:0 25px; border-radius:6px; background:var(--recommend-red); color:#fff; font-size:14px; font-weight:700; white-space:nowrap; }
.recommend-next .icon { width:18px; }
.recommend-next:hover:not(:disabled) { background:#a82634; }
.recommend-next:disabled { background:#ded5d5; color:#9d9393; }
.recommend-editorial { position:relative; min-height:625px; align-self:stretch; overflow:hidden; border-radius:12px; background:#ddd4c8; }
.recommend-editorial::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#1b171000 35%,#1c171bc9 100%); }
.recommend-editorial img { width:100%; height:100%; object-fit:cover; object-position:49% center; }
.recommend-editorial-copy { position:absolute; z-index:1; bottom:36px; left:35px; right:35px; display:grid; gap:13px; color:#fff; }
.recommend-editorial-copy span { color:#ffbdc4; font-size:10px; font-weight:700; letter-spacing:.17em; }
.recommend-editorial-copy strong { font:400 clamp(34px,3vw,49px)/1.13 Anton,Impact,sans-serif; }
.recommend-editorial-copy small { padding-top:14px; border-top:1px solid #ffffff83; font-size:12px; }
#goal-step { max-width:1020px; }
.recommend-goal-inner { max-width:1010px; margin-inline:auto; }
.recommend-goal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:42px; }
.recommend-goal { position:relative; min-height:210px; display:flex; flex-direction:column; align-items:flex-start; gap:13px; padding:27px 29px; background:#fff; border:1px solid #e1dfdc; border-radius:10px; box-shadow:0 7px 22px #15171a0c; cursor:pointer; transition:border-color .18s, transform .18s, box-shadow .18s; }
.recommend-goal:hover { transform:translateY(-2px); border-color:#d69da4; box-shadow:0 12px 25px #15171a15; }
.recommend-goal:has(input:checked) { border-color:#bd3341; box-shadow:inset 0 0 0 1px #bd3341,0 8px 24px #bd334114; }
.goal-number { color:#b33342; font-size:10px; font-weight:700; letter-spacing:.15em; }
.recommend-goal strong { max-width:340px; font-size:21px; letter-spacing:-.04em; line-height:1.2; }
.recommend-goal > span:nth-last-of-type(2) { max-width:360px; color:#727681; font-size:14px; line-height:1.55; }
.goal-radio { position:absolute; top:26px; right:27px; width:21px; height:21px; border:1px solid #b7b9be; border-radius:50%; }
.recommend-goal:has(input:checked) .goal-radio { border:6px solid var(--recommend-red); }
#goal-step .recommend-actions { justify-content:flex-end; }
#goal-step .recommend-back { margin-right:auto; }
.recommend-results { padding-block:clamp(56px,7vw,95px) 100px; }
.recommend-results-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(235px,.38fr); gap:55px; align-items:end; margin-bottom:45px; }
.recommend-results h1 { margin-bottom:20px; }
.recommend-selection { padding:20px 23px; background:#fff; border:1px solid var(--recommend-line); border-radius:8px; }
.recommend-selection > span { font-size:10px; font-weight:700; letter-spacing:.15em; color:#9698a0; }
.recommend-selection > div { display:flex; flex-wrap:wrap; gap:7px; margin-block:14px; }
.recommend-selection b { padding:7px 9px; border-radius:4px; background:#f5eaeb; color:#8f2a36; font-size:11px; font-weight:700; }
.recommend-selection button { padding:0; background:none; border:0; color:#a72838; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.recommend-result-status { margin-bottom:13px; color:#767b83; font-size:12px; font-weight:700; letter-spacing:.04em; }
.recommend-feature { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); min-height:440px; overflow:hidden; border-radius:11px; background:#1c2229; color:#fff; }
.recommend-feature-copy { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(30px,4.2vw,59px); }
.recommend-feature-copy > small { color:#faabb4; font-size:10px; font-weight:700; letter-spacing:.16em; }
.recommend-feature-copy h2 { margin:27px 0 12px; font-size:clamp(26px,2.6vw,39px); line-height:1.19; letter-spacing:-.045em; }
.recommend-feature-copy p { margin:0; color:#c7cbd0; font-size:15px; line-height:1.65; }
.recommend-feature-meta { display:flex; flex-wrap:wrap; gap:15px; margin-top:24px; color:#d5d9de; font-size:12px; }
.recommend-feature-meta span { display:inline-flex; align-items:center; gap:7px; }
.recommend-feature-meta .icon { width:15px; height:15px; }
.recommend-feature-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:auto; padding-top:30px; }
.recommend-feature-actions a:first-child { display:inline-flex; align-items:center; gap:14px; padding:15px 17px; border-radius:5px; background:var(--recommend-red); color:#fff; font-size:12px; font-weight:700; }
.recommend-feature-actions a:last-child { color:#fff; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.recommend-feature-actions .icon { width:17px; }
.recommend-feature-media { position:relative; min-height:420px; background:#333b42; overflow:hidden; }
.recommend-feature-media img { width:100%; height:100%; object-fit:cover; }
.recommend-feature-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#1c2229,transparent 20%); pointer-events:none; }
.recommend-image-fallback { display:grid; place-items:center; position:absolute; inset:0; padding:30px; color:#ffffffb3; font:400 53px/1.1 Anton,Impact,sans-serif; text-align:center; }
.recommend-feature-media img, .recommend-card-image img { position:relative; z-index:1; }
.recommend-more-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin:78px 0 31px; }
.recommend-more-heading h2 { margin:15px 0 0; font:400 clamp(41px,4.3vw,65px)/1.09 Anton,Impact,sans-serif; }
.recommend-more-heading p { max-width:335px; margin:0 0 7px; color:var(--recommend-muted); font-size:14px; line-height:1.65; }
.recommend-result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.recommend-card { overflow:hidden; background:#fff; border:1px solid #e4e1de; border-radius:9px; box-shadow:0 9px 24px #15171c0c; }
.recommend-card-image { display:block; position:relative; height:210px; overflow:hidden; background:#38434a; }
.recommend-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.recommend-card:hover img { transform:scale(1.035); }
.recommend-card-image .recommend-image-fallback { font-size:27px; }
.recommend-card-body { padding:21px 23px 24px; }
.recommend-card-body > small { color:#b72c3c; font-size:10px; font-weight:700; letter-spacing:.11em; }
.recommend-card h3 { min-height:57px; margin:12px 0 17px; font-size:19px; line-height:1.35; letter-spacing:-.035em; }
.recommend-card-meta { display:flex; flex-wrap:wrap; gap:13px; padding:14px 0; border-top:1px solid #ebebea; color:#747984; font-size:12px; }
.recommend-card-body > a { display:inline-flex; align-items:center; gap:8px; padding-top:5px; color:#a92838; font-size:12px; font-weight:700; }
.recommend-card-body > a .icon { width:15px; }
.recommend-results-bottom { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:40px; padding-top:22px; border-top:1px solid var(--recommend-line); }
.recommend-results-bottom p { max-width:600px; margin:0; color:#747883; font-size:13px; line-height:1.6; }
.recommend-results-bottom a { display:inline-flex; align-items:center; gap:10px; color:#a72838; font-size:13px; font-weight:700; white-space:nowrap; }
.recommend-results-bottom .icon { width:15px; }
.recommend-footer { background:#fff; border-top:1px solid var(--recommend-line); }
.recommend-footer-inner { min-height:91px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.recommend-footer-inner > span { color:#8b8e95; font-size:12px; }
.recommend-footer-inner > a:last-child { font-size:12px; font-weight:700; }
.recommend-noscript { padding:35px 0; }
@media(max-width:1000px) {
  #interest-step { grid-template-columns:minmax(0,1fr) minmax(265px,.7fr); gap:30px; }
  .recommend-editorial { min-height:580px; }
  .recommend-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .recommend-shell { width:min(calc(100% - 36px),640px); }
  .recommend-header-inner { min-height:66px; grid-template-columns:1fr auto; gap:8px; }
  .recommend-header-label { display:none; }
  .recommend-header-link { font-size:11px; }
  .recommend-header-link .icon { display:none; }
  .recommend-progress-inner { gap:8px; }
  .recommend-progress-item { min-height:60px; gap:6px; flex-direction:column; justify-content:center; align-items:flex-start; font-size:10px; }
  .recommend-progress-item b { font-size:10px; }
  .recommend-step { min-height:0; padding-block:50px 70px; }
  #interest-step { display:block; }
  .recommend-step h1, .recommend-results h1 { font-size:clamp(44px,11vw,67px); }
  .recommend-question > p, .recommend-goal-inner > p, .recommend-results-intro p { font-size:15px; }
  .recommend-choice-grid { margin-top:31px; gap:9px; }
  .recommend-choice { min-height:67px; gap:8px; padding:12px; }
  .recommend-choice strong { font-size:14px; }
  .choice-number { display:none; }
  .choice-check { width:20px; height:20px; }
  .recommend-editorial { min-height:300px; margin-top:48px; }
  .recommend-editorial-copy { bottom:22px; left:22px; right:22px; }
  .recommend-editorial-copy strong { font-size:32px; }
  .recommend-actions { gap:10px; }
  .recommend-skip, .recommend-back { font-size:12px; }
  .recommend-next { min-height:49px; gap:8px; padding-inline:14px; font-size:12px; }
  .recommend-goal-grid { grid-template-columns:1fr; gap:10px; margin-top:33px; }
  .recommend-goal { min-height:150px; gap:9px; padding:21px; }
  .recommend-goal strong { font-size:19px; }
  #goal-step .recommend-actions { flex-wrap:wrap; }
  #goal-step .recommend-back { width:100%; }
  .recommend-results { padding-block:54px 70px; }
  .recommend-results-intro { grid-template-columns:1fr; gap:28px; }
  .recommend-selection { padding:16px; }
  .recommend-feature { grid-template-columns:1fr; }
  .recommend-feature-media { min-height:265px; order:-1; }
  .recommend-feature-media::after { background:linear-gradient(0deg,#1c2229,transparent 30%); }
  .recommend-feature-copy { padding:26px; }
  .recommend-feature-copy h2 { margin-top:15px; font-size:27px; }
  .recommend-feature-actions { margin-top:0; padding-top:27px; }
  .recommend-more-heading { display:block; margin-top:65px; }
  .recommend-more-heading h2 { font-size:44px; }
  .recommend-more-heading p { margin-top:19px; }
  .recommend-result-grid { grid-template-columns:1fr; }
  .recommend-card-image { height:205px; }
  .recommend-card h3 { min-height:0; }
  .recommend-results-bottom { display:block; }
  .recommend-results-bottom a { margin-top:20px; }
  .recommend-footer-inner { flex-wrap:wrap; padding-block:22px; }
  .recommend-footer-inner > span { order:3; width:100%; }
}
@media(max-width:380px) {
  .recommend-choice-grid { grid-template-columns:1fr; }
  .recommend-choice { min-height:55px; }
  .recommend-step h1, .recommend-results h1 { font-size:42px; }
}