/* A single, touch-scrollable Stories ribbon. Keep the existing video player. */
#stories .stories-grid{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;scroll-behavior:auto;scrollbar-width:none;direction:ltr;overscroll-behavior-x:contain;overflow-anchor:none;padding-block:6px 14px;margin-block:-6px 0}
#stories .stories-grid::-webkit-scrollbar{display:none}
#stories .story-card{flex:0 0 calc((100% - 72px)/5);min-width:0;scroll-snap-align:none;cursor:pointer}
#stories .story-card:focus-visible{outline:3px solid var(--orange);outline-offset:-4px}
.stories-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;direction:ltr}
.stories-controls button{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;transition:background .18s ease,border-color .18s ease,scale .15s ease}
.stories-controls button:hover{border-color:var(--orange);background:var(--surface)}
.stories-controls button:active{scale:.94}
.stories-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.stories-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stories-controls button[aria-pressed=true]{border-color:var(--orange);color:var(--accent-ink)}
.stories-controls button:disabled{opacity:.45;cursor:default}
@media(max-width:1000px){#stories .story-card{flex-basis:calc((100% - 48px)/3.5)}#stories .stories-grid{gap:16px}}
@media(max-width:600px){#stories .story-card{flex-basis:62%;max-width:250px}#stories .stories-grid{gap:13px}.stories-controls{margin-top:6px}}
/* Short feedback, with entrance animations implemented progressively in JS. */
@media(prefers-reduced-motion:no-preference){
 .tool-card,.brand-card,.landing-card,.webinar-card{transition:translate .24s cubic-bezier(.23,1,.32,1),box-shadow .24s ease,border-color .24s ease}
 .button{transition:scale .15s cubic-bezier(.23,1,.32,1),box-shadow .22s ease,background .22s ease}
 .button:active{scale:.97}
 .text-link .icon{transition:translate .2s cubic-bezier(.23,1,.32,1)}
 .text-link:hover .icon{translate:3px 0}
 [dir=rtl] .text-link:hover .icon{translate:-3px 0}
 #hub-modal[open],#language-dialog[open]{animation:hub-dialog-in .24s cubic-bezier(.23,1,.32,1)}
 #hub-modal[open]::backdrop,#language-dialog[open]::backdrop{animation:hub-backdrop-in .2s ease}
 .faq-list details[open]>p{animation:hub-answer-in .22s ease-out}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.tool-card:hover,.brand-card:hover,.landing-card:hover,.webinar-card:hover{translate:0 -4px;box-shadow:0 12px 28px #4c2c1210}}
@keyframes hub-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hub-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes hub-answer-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.stories-controls button{transition:none}.story-card>img{transition:none}}
@media print{.stories-controls{display:none}#stories .stories-grid{display:flex;overflow:hidden}#stories [data-story-clone]{display:none}}