/* 9.3 applicable rules, with colour roles isolated for 9.4. Layout is preserved. */
.review-bar{display: flex; align-items: center; justify-content: center; gap: 25px; padding: 12px 22px; background: #292e2a; color: #ffffff; font: 12px / 1.4 Arial, sans-serif; flex-wrap: wrap;}
.review-bar span{opacity: 0.65; margin-right: auto;}
.review-bar a{padding: 5px 0px; border-bottom: 1px solid transparent;}
.review-bar a[aria-current]{border-color: #ffffff; color: #ffffff;}
.review-bar a:last-child{margin-left: auto;}
.opening-kicker{color: var(--muted); font-size: 11px; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; margin-bottom: 24px;}
.opening h1{font-size: clamp(42px, 4.7vw, 66px); line-height: 1.06; letter-spacing: -0.04em;}
.opening h1 em{font-style: normal; color: var(--headline-accent);}
.opening-deck{font-size: 22px; line-height: 1.5; margin-top: 27px; max-width: 560px;}
.opening-body{font-size: 17px; line-height: 1.75; margin-top: 18px; max-width: 510px; color: var(--muted);}
.opening-actions{display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 28px;}
.opening-actions .button{margin: 0px;}
.opening-secondary{font-size: 14px; color: var(--link); border-bottom: 1px solid var(--line); padding-block: 6px;}
.opening-secondary span{margin-left: 8px;}
.opening-photo{margin: 0px; min-width: 0px;}
.opening-photo img{width: 100%; height: 100%; object-fit: cover; display: block;}
.conversation{display: grid; grid-template-columns: 1.05fr 1fr; gap: 65px; padding-block: 70px 60px; align-items: center;}
.conversation .opening-photo{height: 520px; position: relative;}
.conversation .opening-photo img{object-position: 62% center;}
.conversation figcaption{position: absolute; bottom: 0px; left: 0px; padding: 12px 20px; background: var(--paper); color: var(--muted); font: italic 17px Georgia, serif;}
.opening-support{display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 80px; padding-block: 60px 70px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 50px;}
.opening-support h2{font-size: 36px; line-height: 1.18;}
.opening-support .opening-kicker{margin-bottom: 18px;}
.support-body > p{font-size: 20px; line-height: 1.65; max-width: 650px;}
.support-pair{display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 30px;}
.opening-support h3{font-family: "DM Sans", Arial, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px;}
.support-pair p{font-size: 16px; line-height: 1.7; color: var(--muted);}
.hero h2{font-size: clamp(46px, 4.6vw, 66px); letter-spacing: -0.045em; line-height: 1.03; margin-bottom: 28px;}
.opening-study .hero{margin-top: 25px;}
@media (max-width: 1000px){.conversation{gap: 30px;}
.conversation .opening-photo{height: 480px;}
.opening h1{font-size: 46px;}
.opening-deck{font-size: 20px;}
.opening-support{gap: 35px;}
.opening-support h2{font-size: 32px;}
.hero h2{font-size: 48px;}}
@media (max-width: 700px){.review-bar{justify-content: flex-start; gap: 10px 18px;}
.review-bar span{width: 100%; margin: 0px;}
.review-bar a:last-child{margin: 0px;}
.conversation{grid-template-columns: 1fr; padding-block: 40px; gap: 34px;}
.conversation .opening-photo{height: 300px;}
.opening h1{font-size: clamp(38px, 9vw, 52px);}
.opening-deck{font-size: 20px;}
.opening-body{font-size: 16px;}
.opening-support{grid-template-columns: 1fr; gap: 28px; padding-block: 36px; margin-bottom: 30px;}
.support-intro h2 br{display: none;}
.support-body > p{font-size: 18px;}
.support-pair{gap: 24px;}
.opening-actions{gap: 16px;}
.opening-secondary{font-size: 13px;}
.hero h2{font-size: clamp(42px, 8.5vw, 56px);}}
@media (max-width: 400px){.support-pair{grid-template-columns: 1fr;}
.opening-actions{align-items: flex-start; flex-direction: column;}
.opening h1{font-size: 38px;}
.hero h2{font-size: 40px;}}