/* An editorial rhythm for a full-width diagnostic, without changing its controls. */
.oi-hero{background:#643274;color:#fff}
.oi-hero>div{max-width:1450px}
.oi-hero em{color:#fff;font-style:italic}
.oi-hero>div>p:not(.eyebrow){max-width:970px;color:#fff}
.oi-hero .eyebrow{color:#fff}
.hero-links a:last-child{border-color:#fff;color:#fff}
.story,.altitude,.bridge{max-width:1500px;padding:clamp(80px,8vw,130px) clamp(24px,4vw,62px)}
.story h2,.section-intro h2,.bridge h2{max-width:1100px;font-size:clamp(3rem,5.4vw,6rem)}
.stage{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);border:1px solid #e7dbea;border-top:7px solid #7e3f8f;border-radius:20px;box-shadow:0 20px 55px #4b2b5e12}
.stage-copy h3{font-size:clamp(2.4rem,4.5vw,4.6rem)}
.visible-layers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.visible-layers span{display:flex;align-items:center;min-height:42px;padding:9px 12px;border:1px solid #d9c6e1;border-radius:10px;background:#fff;color:#643274;font-size:.91rem;line-height:1.3}
.branch{border-left-color:#7e3f8f;border-radius:12px;background:#faf7fc}
.branch strong{color:#7e3f8f}
.lens-section{padding:clamp(90px,8vw,130px) clamp(24px,4vw,62px);background:#faf7fc}
.lens-section>*{max-width:1400px}
.lens-section .section-intro>p:last-child{font-size:clamp(1.1rem,1.5vw,1.35rem)}
.lens-tabs{gap:10px;margin-top:42px}
.lens-tabs button{min-height:62px;border-radius:10px;font-size:1.08rem}
.lens-tabs button.active{background:#7e3f8f;border-color:#7e3f8f;color:#fff}
.lens-result{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start;gap:clamp(36px,5vw,90px);min-height:620px;padding:clamp(36px,5vw,76px);border-radius:20px}
#lens-code{font:800 clamp(3rem,5vw,5rem)/1 "Playfair Display",Georgia,serif}
#lens-name{font-size:clamp(2.8rem,4.5vw,5rem);line-height:1.06}
#lens-question{max-width:570px;font-size:clamp(1.3rem,1.6vw,1.65rem);line-height:1.45}
#lens-detail{font-size:clamp(1.1rem,1.25vw,1.3rem);line-height:1.55}
.lens-example,.lens-check{margin-top:26px;padding:22px 24px;border-left:5px solid #7e3f8f;border-radius:10px;background:#f8f2fa}
.lens-check{border-left-color:#c7237e;background:#fff;border:1px solid #eadbea;border-left-width:5px}
.lens-example span,.lens-check span{color:#713982;font-size:.8rem;font-weight:800;letter-spacing:.12em}
.lens-example p,.lens-check p{margin:9px 0 0;font-size:clamp(1.02rem,1.18vw,1.2rem);line-height:1.55}
.response{margin-top:26px;border-left-color:#7e3f8f;background:#fff;color:#202638;font-size:1.06rem}
.altitude{counter-reset:altitude;padding-top:clamp(56px,5vw,80px)}
.altitude-grid{gap:18px}
.altitude article{counter-increment:altitude;display:flex;flex-direction:column;min-height:410px;padding:clamp(25px,2.2vw,34px);border:1px solid #e1d7e6;border-top:5px solid var(--role-color,#7e3f8f);border-radius:16px;background:#fff}
.altitude article:nth-child(1){--role-color:#bc4852}.altitude article:nth-child(2){--role-color:#ac6414}.altitude article:nth-child(3){--role-color:#7e3f8f}.altitude article:nth-child(4){--role-color:#ad1c6c}
.altitude article::before{content:"0" counter(altitude);display:block;margin-bottom:24px;color:var(--role-color);font:800 clamp(3.2rem,4vw,4.8rem)/1 "Playfair Display",Georgia,serif}
.altitude b{color:var(--role-color);font-size:.85rem}
.altitude h3{margin:14px 0;font-size:clamp(1.5rem,2vw,2.2rem)}
.altitude p{font-size:1.04rem;line-height:1.55}
.altitude .role-view{font-weight:800;color:#202638}
.role-action{margin-top:auto;padding-top:20px;border-top:1px solid #e1d7e6;font-size:1rem;line-height:1.5}
.role-action strong{display:block;margin-bottom:6px;color:var(--role-color);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.bridge{background:#faf7fc;border:1px solid #eadfed;border-radius:22px;margin-block:40px}
.response-map article{border-left:4px solid #7e3f8f;border-radius:10px}
.response-map .system{background:#643274}
.handbook{padding:clamp(85px,8vw,130px) max(24px,calc((100vw - 1430px)/2))}
.handbook-intro{gap:clamp(40px,6vw,110px)}
.oi-cycle{gap:12px;padding:0;border:0;box-shadow:none}
.oi-cycle article{min-height:225px;padding:28px;border-top-width:6px}
.oi-cycle article b{font:800 2.6rem/1 "Playfair Display",Georgia,serif;color:#7e3f8f}
.oi-cycle h3{margin-top:24px;font-size:1.65rem}
.oi-cycle p{font-size:1.05rem}
.oi-cycle>i{color:#7e3f8f}
.maturity{background:#faf7fc}
.dashboard-program{border-top-color:#7e3f8f}
.program-cta,.handbook-download{background:#7e3f8f;color:#fff}
@media(max-width:1050px){.altitude-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.altitude article{min-height:0}.lens-result{min-height:0}}
@media(max-width:850px){.stage,.lens-result,.bridge,.handbook-intro{grid-template-columns:1fr}.lens-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.lens-result{gap:22px}}
@media(max-width:600px){.story,.altitude,.bridge,.lens-section{padding-inline:20px}.altitude-grid{grid-template-columns:1fr}.stage{padding:26px}.visible-layers{grid-template-columns:1fr}.lens-section{padding-block:70px}.lens-result{padding:25px}.altitude article::before{margin-bottom:15px}.bridge{margin:0;border-radius:0}.oi-cycle article{min-height:0}}
/* Handbook narrative and reading views. */
.handbook-intro{display:block;max-width:1320px}
.handbook-intro>div:first-child{max-width:none}
.handbook-intro h2{max-width:1260px}
.handbook-intro>div:last-child{max-width:1140px;margin-top:35px}
.handbook-lead{font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.5}
.handbook-intro>div:last-child>p:not(.handbook-lead){font-size:1.16rem;line-height:1.65}
.oi-cycle{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:14px;margin-top:60px;padding:25px 0;border-top:1px solid #d9c7e0;border-bottom:1px solid #d9c7e0;border-radius:0}
.oi-cycle article{min-height:0;padding:15px 10px;border:0;border-radius:0;background:transparent}
.oi-cycle article b{font-size:clamp(3rem,4vw,5rem)}
.oi-cycle h3{margin:16px 0 8px}.oi-cycle>i{align-self:center}
.response-map .system{background:#fff;border-left-color:#7e3f8f;color:#202638}
.response-map .system b{color:#7e3f8f}.response-map .system span{color:#526077}
.response-map article:nth-child(6n+1){border-left-color:#ef6e6e}
.response-map article:nth-child(6n+2){border-left-color:#e89a3b}
.response-map article:nth-child(6n+3){border-left-color:#7e3f8f}
.response-map article:nth-child(6n+4){border-left-color:#c7237e}
.response-map article:nth-child(6n+5){border-left-color:#a95388}
.response-map article:nth-child(6n){border-left-color:#ad572e}
.book-system{margin-top:40px;padding:35px;border-top:5px solid #7e3f8f}
.book-system h3{margin:6px 0 25px;font:700 clamp(2rem,3vw,3rem)/1.1 "Playfair Display",Georgia,serif}
.book-system .reader-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.reader-card{min-width:0;display:flex;flex-direction:column;border:1px solid #e1d3e6;border-radius:14px;overflow:hidden;background:#fff}
.reader-card.current{border-color:#7e3f8f}
.book-system .reader-flip{position:relative;display:block;width:100%;height:235px;padding:0;border:0;background:#fff;color:#202638;cursor:pointer;perspective:900px;text-align:left}
.reader-front,.reader-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px;backface-visibility:hidden;transition:transform .45s ease}
.reader-front b{color:#7e3f8f;font:800 3rem/1 "Playfair Display",Georgia,serif}
.reader-front strong{font:700 clamp(1.25rem,1.6vw,1.6rem)/1.2 "Playfair Display",Georgia,serif}
.reader-front small{color:#713982;font-size:.79rem;font-weight:800}
.reader-back{gap:14px;justify-content:center;transform:rotateY(180deg);background:#643274;color:#fff}
.reader-back strong{font:700 1.25rem/1.2 "Playfair Display",Georgia,serif}
.reader-back span{font-size:.95rem;line-height:1.5}
.reader-card.flipped .reader-front{transform:rotateY(180deg)}
.reader-card.flipped .reader-back{transform:rotateY(0)}
.book-system .reader-card>a{display:block;min-height:50px;padding:14px 17px;border-top:1px solid #e1d3e6;background:#fff;color:#643274;font-size:.9rem;font-weight:800;text-decoration:none}
.book-system .reader-card>a:hover{text-decoration:underline}
.reader-flip:focus-visible,.reader-card>a:focus-visible{outline:3px solid #c7237e;outline-offset:-3px}
@media(max-width:1200px){.book-system .reader-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.oi-cycle{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.oi-cycle>i{display:none}.book-system .reader-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.oi-cycle{grid-template-columns:1fr}.oi-cycle article{padding:15px 0;border-bottom:1px solid #eadfed}.book-system{padding:22px}.book-system .reader-cards{grid-template-columns:1fr}.book-system .reader-flip{height:190px}}
@media(prefers-reduced-motion:reduce){.reader-front,.reader-back{transition:none}}
/* Keep the diagnosis responses in balanced, equal-width pairs. */
.response-map .system{grid-column:auto}
/* Align the lens label and explanation to the same top edge. */
.lens-result{align-items:start;align-content:start}.lens-result>div:first-child{display:flex;flex-direction:column;justify-content:flex-start}.lens-result #lens-code{margin:0 0 14px}.lens-result #lens-name{margin:0 0 20px}.lens-result #lens-question{margin:0}.lens-result>div:last-child>.eyebrow{margin-top:0}
/* Reserve the same question area in every altitude tile. */
@media(min-width:851px){.altitude-grid .role-action{flex:0 0 155px;min-height:155px;margin-top:auto}}

/* Let the handbook artwork span the page without cropping its composition. */
.handbook-readers-art{margin:60px calc(-1 * max(24px,calc((100vw - 1430px)/2))) 35px}.handbook-readers-art img{display:block;width:100%;height:auto}