/* Shared usability refinements. Preserve the ink-and-paper design. */
:root{--accessible-muted:#626262}
html{scroll-padding-top:100px}
main:focus{outline:none}
.skip-link{position:fixed;left:16px;top:12px;z-index:100;background:#202020;color:#fff;padding:12px 18px;border-radius:6px;transform:translateY(-180%)}
.skip-link:focus{transform:none}
:where(a,button,summary,video,[tabindex]):focus-visible{outline:3px solid #202020!important;outline-offset:4px;box-shadow:0 0 0 6px #fff;scroll-margin-block:110px 24px}
:where(section[id],h2[id]){scroll-margin-top:100px}
:where(.section-label,.study-section-kicker,.study-breadcrumbs,.chapter-nav a,.rollout-count,.scope-caption,.scope-date,.case-kicker,.case-description,.faq-teaser,.preview-demo-note,figcaption){color:var(--accessible-muted)}
.chapter-nav a[aria-current]{color:#202020;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.chapter-nav{scrollbar-width:thin}
.chapter-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 5px;color:#626262}
header nav a{min-height:44px;display:inline-flex;align-items:center}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;border:1px solid #c8c8c4;background:transparent;color:#202020;font-size:22px;flex-shrink:0;margin-left:16px}
.motion-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.motion-toggle:disabled{opacity:1;color:#626262;cursor:default}
header nav{margin-left:auto}
.motion-toggle:hover:not(:disabled){background:#e9e9e5}
:where(.faq-item summary,.scope-later summary){min-height:48px}
:where(.lightbox-controls button,.lightbox-top button,.preview-top button,.rollout-arrows button){min-width:44px;min-height:44px}
:where(.faq-answer,.study-main,.case-summary,.preview-copy){overflow-wrap:break-word}
.faq-answer a,.study-chapter>p a{ text-decoration:underline;text-underline-offset:3px }
.case-trigger:hover .case-action,.case-trigger:focus-visible .case-action{gap:24px}
.case-trigger .case-action{gap:24px}
@media(hover:none){.case-preview-cursor{display:none!important}.image-enlarge{opacity:1!important;transform:none!important}}
img,video{max-width:100%}
.study-main>*,.summary-and-scope>*,.about-layout>*,.preview-layout>*{min-width:0}
.study-contact-email{overflow-wrap:anywhere;max-width:100%}
.study-contact-email svg{flex-shrink:0}
.case-dialog,.study-lightbox{max-height:calc(100dvh - 24px);overflow-y:auto}
.preview-top,.lightbox-top,.lightbox-controls{flex-wrap:wrap;gap:10px}
.ux-enter{animation:ux-enter .45s cubic-bezier(.2,.65,.3,1) both}
@keyframes ux-enter{from{opacity:.65;transform:translateY(10px)}to{opacity:1;transform:none}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important}
.motion-paused .ux-enter,.motion-paused .thinking-question,.motion-paused .paper-note li,.motion-paused .paper-note .note-word{animation:none!important;opacity:1!important;transform:none!important}
.motion-paused .hmw-links path{animation:none!important;stroke-dashoffset:0!important}
.motion-paused .scope-phase,.motion-paused .editorial-case{opacity:1!important;transform:none!important}
@media(max-width:650px){
 header,#site-header{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 5%}
 header .brand,#site-header .brand{font-size:24px}
 header nav,#site-header nav{order:3;flex-basis:100%;display:flex;justify-content:space-between;gap:8px;margin:0}
 header .nav-link,#site-header .nav-link{font-size:12px;padding:4px 0;min-height:44px;white-space:nowrap}
 .motion-toggle{margin-left:auto}
 html{scroll-padding-top:130px}
 :where(section[id],h2[id]){scroll-margin-top:130px}
 :where(a,button,summary,video,[tabindex]):focus-visible{scroll-margin-block:140px 24px}
 .hero{min-height:680px;min-height:100svh;padding-top:130px}
 .study-main{padding-left:20px;padding-right:20px}
 .chapter-nav{flex-wrap:wrap;justify-content:space-between;gap:0 12px;padding:5px 0}
 .chapter-nav a{font-size:12px}
 .study-chapter{scroll-margin-top:110px}
 .study-hero>h1{letter-spacing:-1.5px}
 .business-problem-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
 .case-dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}
 .lightbox-top,.lightbox-controls{padding:12px}
 .rollout-carousel .rollout-arrows{grid-template-columns:64px minmax(0,1fr) 64px;gap:8px}
 .rollout-arrows button{font-size:12px;padding:8px 4px}
 .rollout-current-title{font-size:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.ux-enter{animation:none!important}.case-trigger:hover .case-action>.sketched-arrow{transform:none}}
@media(forced-colors:active){:where(a,button,summary,video,[tabindex]):focus-visible{outline:3px solid Highlight!important;box-shadow:none}.motion-toggle{border:1px solid ButtonText}.chapter-nav a[aria-current]{text-decoration:underline}}

.motion-paused .hmw-ready .thinking-question{opacity:1!important;transform:none!important}
.motion-paused .field-notes .note-word{animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important}
@media(max-width:650px){.lightbox-controls{display:flex;justify-content:space-between}.lightbox-zoom{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.lightbox-scroll{max-height:calc(100dvh - 270px)}.faq-question{font-size:18px}.faq-teaser{font-size:14px}.study-chapter>p{font-size:16px;line-height:1.8}}
.video-text-alternative{margin:18px 0 0;padding:14px 18px;background:#eeeee9;border-radius:6px;max-width:720px}
.video-text-alternative summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:500;font-size:14px;list-style:revert}
.video-text-alternative p{font-size:15px;line-height:1.75;color:#404040}