/* Reciprocal composition with Open Rehearsal's material palette. */
:root{color-scheme:dark;--charcoal:#171816;--warm-white:#efeee6;--yellow:#e4ed73;--muted:#b7b9ae}
body{background:var(--charcoal);color:var(--warm-white)}
.topbar{border-color:var(--rule)}
.navlinks .join{background:var(--yellow);color:var(--charcoal);border:0;padding:12px 18px;font-weight:600}
.navlinks .join:hover{background:var(--warm-white)}
.hero-label,.paired-labels{color:var(--muted)}
.paired-labels,.comparison-controls,.bridge{border-color:var(--rule)}
.compare{background:var(--charcoal)}
.small{color:var(--muted)}
.skip{background:var(--yellow);color:var(--charcoal)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--yellow)}
.chapter{--paper:#efeee6;--ink:#171816;--accent:#596123;--rule:#b2b3a7;background:var(--paper);color:var(--ink);color-scheme:light}
.chapter .request[aria-pressed=true]{background:var(--yellow);color:var(--charcoal)}
.chapter .request:hover:not([aria-pressed=true]){background:#e0e1d4}
.chapter button:focus-visible,.chapter a:focus-visible{outline-color:#175a9e}
.performance{background:var(--charcoal);color:var(--warm-white)}
.performance .eyebrow{border-color:var(--rule);color:var(--muted)}
.performance h2 em,.performance a{color:var(--yellow)}
.performance .below{color:var(--muted)}
.beta{--paper:#e4ed73;--ink:#171816;--accent:#171816;background:var(--yellow);color:var(--charcoal);color-scheme:light}
.beta form{border-color:#747b3b}
.beta input,.beta select{border-color:#616534}
.beta input::placeholder{color:#555a2d;opacity:1}
.beta .small{color:#454a27}
.beta button:hover{background:#303326}
.beta button:disabled{opacity:.7;cursor:wait}
.beta button:focus-visible,.beta input:focus-visible,.beta select:focus-visible{outline-color:var(--charcoal)}
footer{border-color:var(--rule);color:var(--muted)}
footer .wordmark{color:var(--warm-white)}
@media(max-width:540px){.navlinks .join{padding:11px 12px;font-size:12px}.topbar{gap:12px}}

.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Readable at normal browser zoom, with bounded product evidence. */
body{font-size:18px;line-height:1.6}
.topbar{padding-block:12px}
.hero{padding-top:28px}
.headline{max-width:1000px}
.headline h1,.headline .other{font-size:clamp(40px,5.7vw,80px);line-height:1.02}
.hero-label{margin-bottom:18px}
.hero-copy{font-size:20px;line-height:1.5;max-width:760px;margin:20px auto 24px}
.eyebrow,.hero-label,.paired-labels{font-size:14px;line-height:1.5;letter-spacing:.04em}
.paired-labels{max-width:1000px;margin-inline:auto;padding:10px 0}
.compare{width:min(100%,clamp(720px,60vw,960px));margin-inline:auto}
.comparison-controls{max-width:1000px;margin-inline:auto;padding:8px 0;gap:18px}
.comparison-controls p,.slider-wrap{font-size:16px}
.comparison-controls a{text-decoration:underline;text-underline-offset:4px;white-space:nowrap;font-size:16px;min-height:44px;display:inline-flex;align-items:center}
.hero>.small{max-width:1000px;margin-inline:auto}
.small,.beta .small,.beta label,.evidence-caption{font-size:16px;line-height:1.6}
.bridge{padding-block:64px}
.bridge h2{font-size:clamp(38px,4vw,60px)}
.bridge .bridge-copy,.response-bar p,.performance .below,.beta .intro{font-size:18px;line-height:1.65}
.chapter-top,.requests,.response-bar,.evidence-caption{max-width:1100px;margin-inline:auto}
.chapter h2{font-size:clamp(38px,4.5vw,64px)}
.request{min-height:120px}
.request .num{font-size:16px;margin-bottom:12px}
.request strong{font-size:26px}
.response-bar .response-label{font-size:16px;line-height:1.5;flex-shrink:1}
.evidence{max-width:960px;margin-inline:auto}
.evidence-caption{max-width:960px}
.performance h2{font-size:clamp(44px,5.5vw,76px);margin:28px auto}
.performance img,.performance .below{max-width:900px}
.beta h2{font-size:clamp(42px,4.5vw,64px)}
.argument-pair{max-width:1000px;margin:32px auto 0}
.argument-pair p{font-size:24px}
.argument-pair span{font-size:14px}
footer,footer a{font-size:16px}
@media(max-width:800px){
 .hero-copy{font-size:18px}.headline h1,.headline .other{font-size:clamp(34px,7vw,56px)}
 .argument-pair{margin-inline:3.2%}.request strong{font-size:23px}
 .response-bar{flex-wrap:wrap}.response-bar p{max-width:100%}
 .beta{gap:24px}.beta form{padding-left:6%}
}
@media(max-width:540px){
 body{font-size:16px}.hero{padding-top:24px}
 .headline h1,.headline .other{font-size:clamp(32px,9vw,46px)}
 .hero-label,.paired-labels,.eyebrow{font-size:14px}
 .hero-copy{font-size:18px}.compare{width:100%}
 .comparison-controls a{font-size:16px}.small,.beta .small,.evidence-caption{font-size:14px}
 .navlinks .join{font-size:14px}.topbar{gap:8px}
 .bridge .bridge-copy,.response-bar p,.performance .below,.beta .intro{font-size:18px}
 .request{min-height:78px}.request strong{font-size:22px}
 .beta form{padding-left:0}.argument-pair{margin-inline:5%}
 .argument-pair p{font-size:20px}.argument-pair span{font-size:14px}
 footer{flex-wrap:wrap;font-size:14px}footer a{font-size:14px}
}
@media(min-width:801px){
 .hero{padding-top:20px}
 .headline h1,.headline .other{font-size:clamp(48px,5vw,68px)}
 .hero-label{margin-bottom:12px}
 .hero-copy{margin:16px auto 18px}
}
@media(min-width:801px) and (max-height:850px){
 .headline h1,.headline .other{font-size:56px}
}