.studio-page .header { border: 0; }
.studio-hero { background: #293c2d; color: #faf6ed; padding-block: 80px; }
.studio-hero-layout { display: grid; grid-template-columns: 1fr .95fr; gap: 64px; align-items: center; }
.studio-hero h1 { color: #faf6ed; font-size: clamp(48px, 5.4vw, 77px); line-height: 1.1; }
.studio-hero h1 span { color: #d3c28e; }
.studio-hero .eyebrow { color: #cbd7be; }
.studio-hero p { max-width: 40ch; font-size: 20px; color: #e1e5d7; margin-top: 30px; }
.studio-hero-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 26px; margin-top: 30px; }
.studio-hero img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.studio-hero figure { padding: 14px; background: #f3ebdb; transform: rotate(3deg); color: #293c2d; }
.studio-hero figcaption { font-size: 12px; text-align: center; padding-top: 12px; }
.studio-purpose { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 80px; }
.studio-purpose > .eyebrow { grid-column: 1/-1; margin-bottom: 5px; }
.studio-purpose > div p + p { margin-top: 18px; }
.studio-purpose .text-link { margin-top: 18px; }
.qa-feature { background: #eee5d5; }
.qa-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.qa-heading h2 { font: 800 clamp(38px, 5.3vw, 73px)/1.1 var(--body); letter-spacing: -.05em; }
.qa-heading h2 > span { color: var(--door); font-weight: 400; font-size: .7em; margin-left: 15px; display: inline-block; }
.qa-heading > p { max-width: 50ch; }
.qa-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-block: 52px 70px; }
.qa-benefits article { padding-top: 22px; border-top: 1px solid #bdb49f; }
.qa-benefits article > span { font-size: 11px; color: var(--door); font-weight: 800; }
.qa-benefits h3 { font: 800 23px/1.3 var(--body); letter-spacing: -.02em; margin-block: 16px 12px; }
.qa-benefits p { font-size: 15px; color: var(--muted); }
.install-panel { background: #faf6ed; padding: 44px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; }
.install-panel h3 { font-size: 34px; }
.install-panel p { margin-top: 18px; color: var(--muted); font-size: 15px; }
.install-panel .requirements { font-size: 12px; }
.install-panel .text-link { margin-top: 15px; font-size: 13px; }
.install-commands { min-width: 0; }
.install-choice { position: relative; border: 1px solid var(--line); padding: 20px; margin-bottom: 18px; }
.install-choice span { display: block; font-size: 15px; font-weight: 800; }
.install-choice small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.install-choice pre { background: #293c2d; color: #edf2df; padding: 15px; margin-block: 17px 12px; font: 12px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-command { border: 1px solid var(--moss); border-radius: 99px; background: transparent; color: var(--moss); padding: 9px 17px; min-height: 44px; font-size: 12px; font-weight: 800; }
.copy-command:hover { background: #e6eadc; }
.install-commands .copy-status { color: var(--moss); font-weight: 800; font-size: 13px; }
.install-commands .copy-status:empty { margin: 0; }
.install-commands .install-note { font-size: 12px; }
.qa-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3,1fr); gap: 0 45px; margin: 40px 0 0; padding: 0; }
.qa-steps li { counter-increment: step; border-top: 1px solid var(--line); padding-block: 26px 35px; }
.qa-steps li::before { content: '0' counter(step); color: var(--door); display: block; font-size: 12px; font-weight: 800; margin-bottom: 16px; }
.qa-steps h3 { font: 800 22px/1.3 var(--body); }
.qa-steps p { color: var(--muted); margin-top: 12px; font-size: 15px; }
.review-roadmap .section-heading > p { font-size: 14px; color: var(--muted); }
.open-reviewers { background: #e6eadc; }
.reviewer-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.reviewer-layout p + p { margin-top: 20px; }
.reviewer-layout .compatibility { margin-top: 30px; }
.reviewer-layout .text-link { margin-top: 20px; }
.studio-end { text-align: center; }
.studio-end h2 { font-size: clamp(38px, 5vw, 65px); color: var(--moss); }
.studio-end p { margin-block: 24px; }
.studio-end > div { display: flex; gap: 25px; justify-content: center; flex-wrap: wrap; }
@media (max-width:1050px) {
 .studio-hero-layout, .studio-purpose, .qa-heading, .reviewer-layout { gap: 35px; }
 .studio-hero h1 { font-size: 51px; }
 .install-panel { padding: 30px; gap: 30px; }
}
@media (max-width:700px) {
 .studio-hero { padding-block: 45px; }
 .studio-hero-layout, .studio-purpose, .qa-heading, .install-panel, .reviewer-layout { grid-template-columns: 1fr; gap: 30px; }
 .studio-hero h1 { font-size: 47px; }
 .studio-hero p { font-size: 17px; margin-top: 23px; }
 .studio-hero figure { margin: 15px 8px 0; padding: 9px; }
 .studio-hero figcaption { font-size: 11px; padding-top: 9px; }
 .studio-purpose > .eyebrow { grid-column: 1; }
 .qa-heading h2 { font-size: 42px; }
 .qa-heading h2 > span { margin-left: 9px; }
 .qa-benefits { grid-template-columns: 1fr; gap: 25px; margin-block: 35px 40px; }
 .qa-benefits h3 { margin-block: 10px; }
 .install-panel { padding: 24px 18px; }
 .install-panel h3 { font-size: 31px; }
 .install-choice { padding: 16px; }
 .qa-steps { grid-template-columns: 1fr; gap: 0; margin-top: 26px; }
 .qa-steps li { display: grid; grid-template-columns: 33px 1fr; gap: 7px 16px; padding-block: 22px; }
 .qa-steps li::before { grid-row: 1/3; margin: 3px 0 0; }
 .qa-steps h3 { font-size: 20px; }
 .qa-steps p { grid-column: 2; margin: 0; }
 .review-roadmap .section-heading > p { display: none; }
 .studio-end > div { gap: 14px; }
}
.studio-hero :focus-visible { outline-color: #f4d89c; }