/* Product narrative: authored use cases, with existing Desktop captures. */
.product-story .story-intro{max-width:850px;margin-bottom:56px}.story-intro h2{font-size:calc(clamp(30px,3.1vw,48px)*var(--font-scale));font-weight:500;line-height:1.6;margin:18px 0 22px}.story-intro>p{font-size:calc(18px*var(--font-scale));color:var(--text-secondary);line-height:2}
.story-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);align-items:center;gap:48px;padding:56px 0;border-top:1px solid var(--edition-border,var(--border))}.story-row-reverse{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}.story-row-reverse .story-copy{order:2}.story-copy,.story-figure{min-width:0}.story-number{display:block;font-size:calc(13px*var(--font-scale));letter-spacing:.12em;color:var(--accent)}.story-copy h3{font-size:calc(clamp(26px,2.4vw,36px)*var(--font-scale));font-weight:500;line-height:1.65;margin:18px 0 24px}.story-copy>p{font-size:calc(16px*var(--font-scale));color:var(--text-secondary);line-height:2}.story-feature-link{display:inline-block;font-size:calc(15px*var(--font-scale));color:var(--accent);margin-top:16px;text-underline-offset:6px}.story-figure{margin:0}.story-figure .screen-open{display:block;position:relative;overflow:hidden;border:1px solid var(--edition-border,var(--border));border-radius:8px;background:var(--bg-primary);box-shadow:0 22px 50px #0003;aspect-ratio:auto}.story-figure .screen-open img{display:block;width:100%;height:auto;object-fit:contain}.story-figure .screen-open>span{position:absolute;right:12px;bottom:12px;padding:7px 12px;border-radius:4px;background:#071c1bef;color:#edf3ed;font-size:calc(12px*var(--font-scale))}.story-figure figcaption,.story-source-note{font-size:calc(13px*var(--font-scale));color:var(--text-secondary);line-height:1.9;margin-top:16px}.story-example{border-left:2px solid var(--accent);padding:2px 0 2px 18px;margin:25px 0}.story-example>span{font-size:calc(12px*var(--font-scale));color:var(--text-secondary)}.story-example p{font-size:calc(16px*var(--font-scale));line-height:1.9;margin:8px 0}.story-copy .story-operation-note{font-size:calc(13px*var(--font-scale));padding-top:14px;border-top:1px solid var(--border)}
.product-detours{padding-top:28px}.detour-list>article{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,2fr) minmax(0,1fr);gap:32px;border-top:1px solid var(--edition-border,var(--border));padding:36px 0;align-items:start}.detour-label{font-size:calc(12px*var(--font-scale));letter-spacing:.12em;color:var(--accent);padding-top:9px}.detour-list h3{font-size:calc(24px*var(--font-scale));font-weight:500;line-height:1.7;margin:0 0 14px}.detour-list p{font-size:calc(16px*var(--font-scale));line-height:2;color:var(--text-secondary);margin:0 0 15px}.detour-list a{font-size:calc(15px*var(--font-scale));color:var(--accent);text-underline-offset:6px}.detour-list .detour-aside{font-size:calc(13px*var(--font-scale));border-left:1px solid var(--edition-border,var(--border));padding-left:20px;margin-top:8px}.screen-collection>summary{cursor:pointer;font-size:calc(18px*var(--font-scale));padding:22px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:5px}.screen-collection[open]>summary{margin-bottom:32px}.desktop-catalog-entry:target{outline:2px solid var(--accent);outline-offset:8px;scroll-margin-top:55px}.story-feature-link:focus-visible,.detour-list a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:950px){.story-row,.story-row-reverse{grid-template-columns:1fr;gap:28px;padding:40px 0}.story-row-reverse .story-copy{order:0}.detour-list>article{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}.detour-list .detour-aside{grid-column:2}}
@media(max-width:600px){.product-story .story-intro{margin-bottom:32px}.story-intro>p{font-size:calc(16px*var(--font-scale))}.story-copy h3{font-size:calc(26px*var(--font-scale))}.detour-list>article{grid-template-columns:1fr;gap:14px}.detour-list .detour-aside{grid-column:auto}.story-figure .screen-open>span{right:7px;bottom:7px;padding:5px 8px}.story-intro br{display:none}}
[data-large-text=true] .story-row,[data-large-text=true] .story-row-reverse,[data-large-text=true] .detour-list>article{grid-template-columns:1fr}[data-large-text=true] .story-row-reverse .story-copy{order:0}[data-large-text=true] .detour-list .detour-aside{grid-column:auto}
