/* Layout and motion refinements from the September 2026 audit. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
html{scrollbar-gutter:stable}
body.modal-open{overflow:hidden}
.hero h1,.topic-intro h1{animation:heading-enter .55s var(--motion-ease) both}
.hero-description,.topic-intro>p{animation:copy-enter .55s .06s var(--motion-ease) both}
.hero-actions{animation:copy-enter .55s .1s var(--motion-ease) both}
.hero-showcase,.topic-hero-art{animation:none}
.topic-presentations .topic-hero-art .art-zoom>img{aspect-ratio:auto;height:auto;transform:none}
.will-reveal{opacity:0;transform:none;translate:0 18px;transition:opacity .65s var(--motion-ease),translate .65s var(--motion-ease),transform .25s ease,border-color .25s ease,box-shadow .25s ease;transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms,0ms}
.will-reveal.is-visible{opacity:1;transform:none;translate:0 0}
.button,.copy-button,.icon-button{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.button:active,.copy-button:active,.icon-button:active{transform:scale(.97)}
.button-primary:hover{box-shadow:0 5px 22px #0003}
.text-link{min-height:32px}
.text-link,.back-to-carousel,.expanded-footer nav a{text-decoration-color:transparent;text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.text-link:hover,.back-to-carousel:hover,.expanded-footer nav a:hover{text-decoration-line:underline;text-decoration-color:currentColor}
.art-dialog[open],.slide-dialog[open]{animation:dialog-enter .26s var(--motion-ease)}
dialog[open]::backdrop{animation:backdrop-enter .24s ease-out}
.dialog-toolbar .icon-button{width:44px;height:44px}
.dialog-footer a{display:inline-flex;align-items:center;min-height:36px}
.dialog-content .dialog-prev,.dialog-content .dialog-next{height:44px;min-width:76px}
.art-dialog .dialog-toolbar>span{overflow-wrap:anywhere}
.case-card>.case-visual{width:100%;padding:0;text-align:left;display:block;cursor:pointer}
.case-card:focus-within,.related-card:focus-visible>div,.topic-case:focus-within{border-color:#a8c5e8}
.case-card .case-body{flex:1}
.compare-wrap{overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#71849b #232425}
.compare-wrap:focus-visible{outline:2px solid #9fc5ef;outline-offset:4px}
.compare-hint{display:none;font-size:12px;color:#aeb7c1;margin-top:14px}
.section-nav{overscroll-behavior-inline:contain}
.section-nav>.container{padding-block:7px}
.section-nav a{display:flex;align-items:center;min-height:42px}
.expanded-footer nav a{min-height:32px}
.related-grid>*{min-width:0}
.split-layout>*,.workflow-layout>*,.chat-result>div{min-width:0}
.chat-result img{flex-shrink:1;min-width:0}
.related-card h3,.topic-case-copy h3,.step h3,.principle h3{overflow-wrap:anywhere}
.topic-page .cta-note{max-width:650px;margin-inline:auto}
.showcase-meta,.showcase-bottom,.story-label,.demo-label,.sample-note,.art-note,.media-credit,.cta-note,.topic-hero-art figcaption,.prompt-top>span:last-child,.motion-caption>span:last-child{color:#a3acb7}
.topic-hero-art figcaption>span:last-child{color:#a3acb7}
.checklist input{border-color:#8493a3}
.checklist label{transition:color .2s}
.checklist input{transition:background .2s,border-color .2s,box-shadow .2s}
.checklist input:checked{box-shadow:0 0 0 3px #4a9eff14}
.chat-result>div>span{color:#a3acb7}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:32px}
@media(hover:hover) and (pointer:fine){
 .related-card:hover>div{border-color:#7d8da1;box-shadow:0 12px 30px #0002}
 .topic-case:hover{transform:translateY(-4px)}
 .mini-bars i{transform-origin:bottom;transition:transform .4s var(--motion-ease)}
 .topic-case:hover .mini-bars i{transform:scaleY(1.08)}
 .topic-case:hover .mini-bars i:nth-child(even){transition-delay:.06s}
 .coffee-ring,.deck-orbit{transition:transform .7s var(--motion-ease)}
 .topic-case:hover .coffee-ring{transform:rotate(0) translateY(-5px)}
 .topic-case:hover .deck-orbit{transform:translateX(-5px)}
}
@media(min-width:761px) and (max-width:1050px){
 .cases-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .topic-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
 .topic-case:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
 .topic-case:last-child .sample{height:270px}
 .split-layout,.workflow-layout{gap:38px}
 .split-copy h2{font-size:36px}
 .footer-layout{display:block}
 .expanded-footer nav{margin-top:26px}
}
@media(max-width:760px){
 .hero h1,.topic-intro h1{text-wrap:balance}
 .hero-actions{flex-wrap:wrap;row-gap:10px}
 .hero-actions .text-link,.topic-intro .text-link{min-height:44px}
 .topic-intro .button,.button{min-height:44px}
 .text-link,.copy-button,.back-to-carousel,.expanded-footer nav a{min-height:44px}
 .expanded-footer nav{gap:10px 25px}
 .expanded-footer nav a{font-size:12px;line-height:1.5}
 .section-nav a{min-height:44px}
 .section-nav>.container{padding-block:3px}
 .gallery-caption{align-items:center}
 .gallery-caption .text-link{font-size:12px}
 .compare-wrap table{min-width:570px}
 .compare-hint{display:block}
 .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .step,.principle,.format-card{min-width:0}
 .portrait-art{padding:24px clamp(38px,12vw,80px)}
 .main-related h3{font-size:20px}
 .main-related p{font-size:12px}
 .showcase-top>span:first-child{font-size:11px}
 .hero-facts{flex-wrap:wrap;gap:10px 18px}
 .topic-facts{font-size:10px}
 .art-dialog .dialog-footer{flex-wrap:wrap;gap:4px 14px}
 .back-to-carousel{display:flex;align-items:center;justify-content:center}
}
@media(max-width:440px){
 .case-body h3{font-size:21px}
 .case-body p{font-size:14px}
 .case-body .case-tag{font-size:10px}
 .split-layout,.workflow-layout{grid-template-columns:minmax(0,1fr)}
 .conversation{padding:16px}
 .chat-result{gap:12px;padding:14px}
 .chat-result b{font-size:23px}
 .principles,.steps-grid{grid-template-columns:1fr}
 .cases-grid{grid-template-columns:1fr}
 .case-visual{aspect-ratio:1.2}
 .case-visual img{object-fit:cover;object-position:top}
 .gallery-caption{gap:12px;flex-wrap:wrap}
 .gallery-caption>span{max-width:58%}
 .main-related{grid-template-columns:1fr}
 .main-related h3{font-size:23px}
 .main-related p{font-size:13px}
 .mini-logo>strong{font-size:clamp(32px,10vw,46px)}
 .mini-deck>strong,.mini-social>strong{font-size:clamp(30px,10vw,39px)}
 .topic-facts{gap:8px}
 .sample{height:270px}
 .hero h1{font-size:clamp(36px,10.5vw,44px)}
 .topic-intro h1{font-size:clamp(33px,10vw,40px)}
 .topic-page .section-head h2,.section-head h2{font-size:32px}
 .topic-prompt{padding:20px}
 .film-control{min-height:40px}
}
@media(max-height:650px){
 .dialog-content>img{max-height:calc(100dvh - 260px);width:auto;height:auto}
 .dialog-art{max-height:calc(100dvh - 180px)}
}
@keyframes heading-enter{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes copy-enter{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .will-reveal{opacity:1!important;translate:none!important;transform:none!important}
 .button:hover,.topic-case:hover,.slide-card:hover,.related-card:hover img,.case-card:hover,.case-card:hover img,.art-zoom:hover>img{transform:none!important}
}
@media print{
 .header,.footer,.section-nav,.hero-actions,.copy-button,.final-cta,.film-control,dialog{display:none!important}
 body{background:white;color:black}
 p,em{color:#333}.will-reveal{opacity:1;translate:none;transform:none}
 .section{padding-block:30px}.guide-heading,.faq-layout .split-copy{position:static}
}
[hidden]{display:none!important}
.error-page{min-height:65dvh;display:grid;place-items:center;text-align:center;padding:70px 0}
.error-code{font-size:14px;letter-spacing:.2em;margin-bottom:22px;color:var(--blue)}
.error-page h1{font-size:clamp(36px,6vw,64px)}
.error-page h1+p{max-width:520px;margin:24px auto 30px}