/* Come funziona: scoped presentation styles; uses the public site's tokens. */
.how-page { --hw-green: #b9ddce; --hw-purple: #c5bbed; }
.hw-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.how-page em { color: var(--accent); font-style: normal; }
.hw-icon { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hw-hero { padding-top: 54px; }
.hw-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 38px; }
.hw-topline .eyebrow { margin: 0; color: var(--accent); font-size: .68rem; }
.hw-motion { color: var(--muted); font-size: .72rem; border: 1px solid var(--line); background: transparent; border-radius: 30px; padding: 9px 14px; }
.hw-motion:hover { color: var(--text); border-color: var(--accent); }
.hw-hero-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.15fr); gap: 40px; align-items: center; }
.how-page h1 { font-size: clamp(3rem,5.25vw,4.8rem); max-width: none; line-height: 1.06; letter-spacing: -.055em; margin-bottom: 26px; }
.hw-lead { max-width: 490px; font-size: 1.03rem; line-height: 1.8; margin-bottom: 28px; }
.how-page .cta-button { border-radius: 8px; box-shadow: none; padding: 14px 22px; min-height: 48px; font-size: .84rem; gap: 20px; }
.hw-text-link { font-size: .85rem; color: var(--accent); display: inline-block; padding: 12px 0; text-underline-offset: 5px; }
.hw-text-link:hover { text-decoration: underline; }
/* Shared flow artwork keeps the same visual language as the homepage. */
.hw-flow-visual { margin: 0; width: 100%; min-width: 0; max-width: none; justify-self: stretch; }
.hw-flow-visual .flow-ambient { inset: 0 -5%; }
.hw-flow-visual .flow-scene { overflow: hidden; overflow: clip; }
.hw-flow-visual .flow-orbit { top: 47%; }
.hw-flow-visual .flow-node { width: 28%; padding: 12px 10px 10px; }
.hw-flow-visual .flow-node-heading { font-size: clamp(9px,.9vw,12px); gap: 6px; white-space: normal; }
.hw-flow-visual .flow-node-heading > span { min-width: 0; line-height: 1.3; }
.hw-flow-visual .flow-node-heading svg { width: 16px; height: 16px; stroke-width: 2; }
.hw-flow-visual .flow-node-detail { font-size: clamp(7px,.7vw,9px); }
.hw-flow-visual .hw-map-source { width: 34%; padding: 14px 12px; }
.hw-map-source-location { display: block; color: #8ba1b7; font-size: .6rem; margin: 7px 0; }
.hw-map-source-agent { display: inline-block; padding: 4px 7px; border: 1px solid #58d6ff33; border-radius: 4px; background: #58d6ff08; color: #a6d6e9; font-size: .57rem; }
.hw-flow-visual .hw-map-hub { top: 47%; width: 32%; padding: 15px 10px 12px; }
.hw-flow-visual .flow-hub-top { font-size: clamp(4px,.48vw,6px); }
.hw-flow-visual .flow-hub-label { font-size: clamp(6px,.63vw,8px); }
.hw-flow-visual .flow-hub img { margin: 17px auto 14px; }
.hw-flow-visual .hw-map-caption { margin: 12px 2% 0; padding-top: 15px; font-size: .7rem; line-height: 1.8; }
.hw-flow-visual .flow-streams path,.hw-flow-visual .flow-hub::before,.hw-flow-visual .flow-hub-channels i { animation-play-state: paused; }
.hw-flow-visual[data-inview=true] .flow-streams path,.hw-flow-visual[data-inview=true] .flow-hub::before,.hw-flow-visual[data-inview=true] .flow-hub-channels i { animation-play-state: running; }
.how-page[data-page-hidden=true] .hw-animated *,.how-page[data-page-hidden=true] .hw-animated *::before { animation-play-state: paused !important; }
.hw-path { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; margin-top: 68px; border-top: 1px solid var(--line); padding: 24px 0 30px; }
.hw-path a { font-size: .81rem; color: var(--muted-strong); }
.hw-path a:hover { color: var(--accent); }
.hw-path b { font-size: .62rem; color: var(--accent); font-weight: 500; margin-right: 12px; }
.hw-section { padding-top: 96px; padding-bottom: 88px; border-top: 1px solid var(--line); scroll-margin-top: 112px; }
.hw-section-head { max-width: 760px; margin-bottom: 32px; }
.hw-section-head .eyebrow { font-size: .68rem; color: var(--accent); letter-spacing: .18em; }
.hw-section-head h2 { font-size: clamp(2rem,3.6vw,3.25rem); line-height: 1.08; margin-bottom: 22px; }
.hw-section-head > p:last-child { max-width: 650px; line-height: 1.8; font-size: .97rem; margin-bottom: 0; }
.hw-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-tabs button { padding: 12px 16px; border-radius: 7px; background: transparent; color: var(--muted); border: 1px solid var(--line); font-size: .8rem; text-align: left; line-height: 1.45; }
.hw-tabs button:hover { color: var(--text); border-color: #789ac6; }
.hw-tabs button[aria-selected=true] { background: #c6dbf9; border-color: #c6dbf9; color: #101b2b; }
.hw-tabs:not([role=tablist]) { display: none; }
.hw-agent-demo { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(115deg,#101a28,#0b1019); padding: 28px; }
.hw-agent-tabs { display: grid; grid-template-columns: repeat(3,1fr); }
.hw-flow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 34px 20px; }
.hw-node { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; padding: 14px; }
.hw-node .hw-icon { color: var(--accent); }
.hw-node strong { font-size: .9rem; font-weight: 550; }
.hw-node span { font-size: .7rem; color: var(--muted); }
.hw-flow-center { min-width: 170px; border: 1px solid #47678d; border-radius: 12px; background: #142135; }
.hw-link { flex: 1; height: 1px; background: #354d69; color: var(--accent); position: relative; text-align: right; line-height: 0; font-size: 20px; }
.hw-link i { position: absolute; height: 5px; width: 22px; background: var(--accent); border-radius: 3px; top: -2px; left: 0; opacity: .7; animation: hw-travel 3s ease-in-out infinite; animation-play-state: paused; }
.hw-agent-demo[data-agent-state=ready] .hw-link:first-of-type { visibility: hidden; }
.hw-agent-demo[data-agent-state=offline] .hw-link { background: repeating-linear-gradient(90deg,#6a5f48 0 5px,transparent 5px 10px); color: var(--warning); }
.hw-agent-demo[data-agent-state=offline] .hw-link i { display: none; }
.hw-agent-demo[data-agent-state=offline] .hw-node:first-child .hw-icon { color: var(--warning); }
.hw-tab-panels [data-panel] { scroll-margin-top: 130px; }
.hw-tab-panels [data-panel] + [data-panel]:not([hidden]) { margin-top: 24px; }
.hw-tab-panels [hidden] { display: none; }
.hw-agent-demo [data-panel] { border-top: 1px solid var(--line); padding-top: 24px; }
.hw-agent-demo [data-panel] p { max-width: 800px; font-size: .9rem; margin-bottom: 0; line-height: 1.8; }
.hw-status { display: block; color: var(--hw-green); font-size: .7rem; margin-bottom: 12px; }
.hw-status-wait { color: var(--warning); }
.hw-fine, .hw-agent-demo [data-panel] .hw-fine { font-size: .75rem; color: var(--muted); line-height: 1.7; margin-top: 18px; }
.hw-detail { border-bottom: 1px solid var(--line); padding: 18px 0; font-size: .86rem; }
.hw-detail summary { cursor: pointer; color: var(--accent); padding: 6px 0; }
.hw-detail summary:hover { color: var(--text); }
.hw-detail > p { max-width: 850px; margin: 18px 0 6px; line-height: 1.8; }
.hw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.hw-transfer-story { padding: 28px; border-left: 1px solid #47678d; background: linear-gradient(90deg,#101d2a88,transparent); border-radius: 0 16px 16px 0; }
.hw-example-label { color: var(--muted); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 24px; }
.hw-delivery-steps { list-style: none; margin: 0; padding: 0; counter-reset: delivery; }
.hw-delivery-steps li { padding: 0 0 26px 38px; position: relative; counter-increment: delivery; }
.hw-delivery-steps li:last-child { padding-bottom: 0; }
.hw-delivery-steps li::before { content: counter(delivery,decimal-leading-zero); position: absolute; left: 0; color: var(--accent); font-size: .7rem; top: 4px; }
.hw-delivery-steps li span { display: block; color: var(--accent); font-size: .72rem; margin-bottom: 7px; }
.hw-delivery-steps li strong { display: block; font-size: .98rem; font-weight: 500; line-height: 1.6; }
.hw-engine { margin-top: 34px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; padding: 30px 0 10px; }
.hw-engine .hw-icon { float: left; margin-right: 20px; color: var(--accent); }
.hw-engine h3 { font-size: 1.06rem; }
.hw-engine p { font-size: .85rem; line-height: 1.8; margin-bottom: 10px; }
.hw-engine ul { list-style: none; padding: 0; margin: 0; align-self: center; }
.hw-engine li { padding: 8px 0 8px 22px; font-size: .8rem; color: var(--muted-strong); position: relative; }
.hw-engine li::before { content: '↳'; color: var(--accent); position: absolute; left: 0; }
.hw-dept-tabs { margin-bottom: 26px; }
.hw-dept-tabs button { font-size: .75rem; }
.hw-dept-panel { display: grid; grid-template-columns: 1.45fr 1fr; gap: 50px; border: 1px solid var(--line); border-radius: 16px; padding: 36px; background: linear-gradient(120deg,#101827,#0b1019); align-items: center; }
.hw-dept-copy > h3 { font-size: 1.65rem; letter-spacing: -.03em; line-height: 1.25; }
.hw-action-list { margin: 22px 0 0; }
.hw-action-list > div { display: grid; grid-template-columns: 78px 1fr; gap: 16px; margin-bottom: 16px; }
.hw-action-list dt { color: var(--accent); font-size: .68rem; padding-top: 3px; }
.hw-action-list dd { margin: 0; color: var(--muted-strong); font-size: .85rem; line-height: 1.75; }
.hw-file-example { text-align: center; padding: 32px 22px; border: 1px solid #c5bbed22; border-radius: 10px; background: #c5bbed05; min-width: 0; }
.hw-file-example .hw-icon { display: block; width: 56px; height: 56px; margin: 0 auto 24px; color: var(--hw-purple); }
.hw-file-example code { font-size: .73rem; color: var(--hw-purple); overflow-wrap: anywhere; display: block; }
.hw-file-example p { font-size: .85rem; line-height: 1.8; margin: 24px 0; }
.hw-file-example > span { font-size: .65rem; color: var(--muted); }
.hw-player-section { background: radial-gradient(ellipse at 50% 40%,#32274e29,transparent 65%); }
.hw-timeline { border: 1px solid #c5bbed33; border-radius: 18px; padding: 32px 40px; margin: 30px 0 0; background: #0d111b; }
.hw-timeline figcaption { font-size: .9rem; color: var(--text); display: flex; justify-content: space-between; gap: 14px; }
.hw-timeline figcaption span { color: var(--muted); font-size: .7rem; }
.hw-music-input { display: flex; align-items: center; gap: 18px; padding: 28px 0; }
.hw-music-input .hw-icon { color: var(--hw-purple); width: 36px; height: 36px; }
.hw-music-input > span { color: var(--muted); font-size: .75rem; }
.hw-music-input strong { font-weight: 500; color: var(--hw-purple); font-size: .85rem; }
.hw-music-input .hw-prepares { margin-left: auto; color: var(--hw-purple); }
.hw-timeline-body { position: relative; padding: 15px 0 0; }
.hw-track { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 16px; margin-bottom: 16px; }
.hw-track > span { color: var(--muted); font-size: .75rem; }
.hw-video-strip { display: flex; gap: 3px; height: 52px; overflow: hidden; border-radius: 4px; }
.hw-video-strip i { flex: 1; background: linear-gradient(140deg,#35485d,#172333); border-bottom: 2px solid #6382a5; }
.hw-video-strip i:nth-child(2n) { background: linear-gradient(30deg,#1a2638,#4a5a6b); }
.hw-audio-strip { height: 44px; background: #ffffff03; border-bottom: 1px solid #c5bbed33; position: relative; }
.hw-wave { position: absolute; left: 24%; width: 56%; height: 42px; border-radius: 4px; background: repeating-linear-gradient(90deg,transparent 0 4px,#b7a6d833 4px 6px),#3f3254; border: 1px solid #8e79b0; font-size: .7rem; padding: 9px 14px; color: #efe7ff; }
.hw-timeline-cursor { position: absolute; top: 4px; left: 54%; height: 132px; width: 1px; background: #e6def8; animation: hw-listen 7s linear infinite; animation-play-state: paused; }
.hw-timeline-cursor::before { content: ''; position: absolute; width: 7px; height: 7px; top: -4px; left: -3px; transform: rotate(45deg); background: #e6def8; }
.hw-timeline-note { margin: 26px 0 0 32%; border-left: 2px solid var(--hw-purple); padding-left: 12px; font-size: .76rem; color: var(--hw-purple); max-width: 340px; }
.hw-player-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 40px; }
.hw-player-benefits h3 { font-size: 1rem; }
.hw-player-benefits p { font-size: .85rem; line-height: 1.8; }
.hw-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; padding: 24px 0 8px; }
.hw-detail-grid h3 { font-size: .95rem; }
.hw-detail-grid p { font-size: .85rem; line-height: 1.8; margin-bottom: 0; }
.hw-pullquote { font-size: clamp(1.2rem,2vw,1.8rem); color: var(--muted); margin: 38px 0 0; letter-spacing: -.025em; line-height: 1.5; }
.hw-pullquote strong { color: var(--text); font-weight: 500; }
.hw-collab-story ol { list-style: none; padding: 0; margin: 0; }
.hw-collab-story li { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); }
.hw-collab-story li > span { font-size: .65rem; color: var(--accent); margin-top: 4px; }
.hw-collab-story strong { font-size: .9rem; font-weight: 550; }
.hw-collab-story li p { font-size: .82rem; margin: 7px 0 0; line-height: 1.8; }
.hw-distribution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hw-distribution-grid article { border: 1px solid var(--line); border-radius: 16px; background: #0d141f; padding: 30px; display: flex; flex-direction: column; }
.hw-card-index { color: var(--accent); font-size: .68rem; letter-spacing: .08em; margin-bottom: 28px; text-transform: uppercase; }
.hw-distribution-grid .hw-icon { color: var(--accent); margin-bottom: 20px; }
.hw-distribution-grid article:last-child .hw-icon { color: var(--hw-green); }
.hw-distribution-grid h3 { font-size: 1.4rem; letter-spacing: -.03em; }
.hw-distribution-grid p { font-size: .88rem; line-height: 1.8; }
.hw-small-route { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted); gap: 14px; }
.hw-small-route b { color: var(--accent); font-weight: 400; }
.hw-app-primary { display: grid; grid-template-columns: repeat(3,1fr); gap: 42px; padding: 12px 0 30px; }
.hw-app-primary img, .hw-app-mark { display: block; width: 48px; height: 48px; object-fit: contain; margin-bottom: 20px; }
.hw-app-mark .hw-icon { color: var(--accent); }
.hw-app-primary h3 { font-size: 1rem; }
.hw-app-primary p { font-size: .85rem; line-height: 1.8; margin-bottom: 0; }
.hw-app-small { float: left; margin-right: 16px; }
.hw-closing { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 72px; border-top: 1px solid var(--line); padding-top: 44px; }
.hw-closing p { font-size: clamp(1.7rem,3vw,2.7rem); letter-spacing: -.04em; line-height: 1.2; margin-bottom: 0; }
.hw-closing strong { font-weight: 500; color: var(--text); }
/* All motion starts paused, is enabled only in view, and can be stopped globally. */
.hw-animated[data-inview=true] .hw-link i, .hw-animated[data-inview=true] .hw-timeline-cursor { animation-play-state: running; }
.how-page[data-motion-paused=true] .hw-animated *, .how-page[data-motion-paused=true] .hw-animated *::before { animation-play-state: paused !important; }
@keyframes hw-travel { 0% { left: 0; opacity: 0; } 20% { opacity: .8; } 80% { opacity: .8; } 100% { left: calc(100% - 22px); opacity: 0; } }
@keyframes hw-listen { 0%,12% { left: 40%; } 88%,100% { left: 78%; } }
@media(max-width:1000px) {
 .hw-hero-grid { gap: 32px; grid-template-columns: 1.1fr 1fr; }
 .hw-split { gap: 36px; }
 .hw-dept-panel { gap: 28px; padding: 28px; }
 .hw-player-benefits { gap: 24px; }
 .hw-closing { align-items: flex-start; flex-direction: column; }
}
@media(max-width:800px) {
 .hw-hero { padding-top: 30px; }
 .hw-hero-grid { grid-template-columns: 1fr; gap: 40px; }
 .how-page h1 { font-size: clamp(2.75rem,7.6vw,4.3rem); }
 .hw-flow-visual { max-width: 650px; justify-self: center; }
 .hw-path { margin-top: 40px; gap: 14px; }
 .hw-path a { font-size: .74rem; }
 .hw-path b { display: block; margin: 0 0 7px; }
 .hw-section { padding-top: 64px; padding-bottom: 60px; scroll-margin-top: 170px; }
 .hw-split,.hw-dept-panel { grid-template-columns: 1fr; }
 .hw-split { gap: 24px; }
 .hw-split .hw-section-head { margin-bottom: 0; }
 .hw-file-example { padding: 24px; }
 .hw-file-example .hw-icon { width: 38px; height: 38px; margin-bottom: 14px; }
 .hw-file-example p { margin: 14px 0; }
 .hw-player-benefits,.hw-app-primary { gap: 28px; }
 .hw-timeline { padding: 24px; }
 .hw-timeline figcaption { flex-direction: column; gap: 5px; }
 .hw-music-input { flex-wrap: wrap; }
 .hw-music-input .hw-prepares { flex-basis: 100%; margin: 0; }
}
@media(max-width:600px) {
 .hw-topline { align-items: flex-start; margin-bottom: 28px; gap: 12px; }
 .hw-topline .eyebrow { max-width: 135px; }
 .hw-motion { font-size: .65rem; padding: 8px 10px; }
 .hw-path { grid-template-columns: repeat(3,1fr); padding-bottom: 20px; gap: 20px 8px; }
 .hw-path a { font-size: .8rem; }
 .hw-section-head > p:last-child { font-size: .9rem; }
 .hw-agent-demo { padding: 18px; }
 .hw-agent-tabs { grid-template-columns: 1fr; }
 .hw-agent-tabs button { padding: 12px; }
 .hw-flow { flex-direction: column; padding: 28px 0; gap: 16px; }
 .hw-node { width: 100%; padding: 8px; gap: 7px; }
 .hw-node .hw-icon { width: 34px; height: 34px; }
 .hw-flow-center { max-width: 220px; padding: 18px; }
 .hw-link { width: 1px; min-height: 24px; flex: none; font-size: 0; }
 .hw-link::after { content: '↓'; font-size: 16px; position: absolute; top: 20px; left: -6px; }
 .hw-link i { width: 5px; height: 10px; left: -2px; top: 0; animation-name: hw-travel-down; }
 .hw-agent-demo[data-agent-state=ready] .hw-link:first-of-type { display: none; }
 .hw-agent-demo[data-agent-state=offline] .hw-link { background: repeating-linear-gradient(180deg,#6a5f48 0 5px,transparent 5px 10px); }
 .hw-engine,.hw-player-benefits,.hw-detail-grid,.hw-distribution-grid,.hw-app-primary { grid-template-columns: 1fr; gap: 24px; }
 .hw-engine { gap: 10px; }
 .hw-dept-panel { padding: 22px; }
 .hw-dept-tabs { gap: 6px; }
 .hw-dept-tabs button { padding: 11px 12px; }
 .hw-action-list > div { grid-template-columns: 1fr; gap: 6px; margin-bottom: 22px; }
 .hw-action-list dt { font-size: .72rem; }
 .hw-transfer-story { padding: 24px 18px; }
 .hw-timeline { padding: 22px 16px; }
 .hw-track { grid-template-columns: 1fr; gap: 7px; margin-bottom: 18px; }
 .hw-timeline-cursor { top: 37px; height: 140px; }
 .hw-timeline-note { margin-left: 24%; font-size: .72rem; }
 .hw-wave { font-size: .62rem; padding: 10px; }
 .hw-player-benefits p { margin-bottom: 0; }
 .hw-distribution-grid article { padding: 24px; }
 .hw-app-primary > div { display: grid; grid-template-columns: 48px 1fr; gap: 0 18px; }
 .hw-app-primary img,.hw-app-primary .hw-app-mark { grid-row: 1/3; margin: 0; }
 .hw-app-primary h3 { margin: 0 0 7px; }
 .hw-closing { margin-top: 50px; padding-top: 32px; }
 .hw-closing .spaced-actions { width: 100%; }
 .hw-closing .cta-button { width: 100%; }
}
@keyframes hw-travel-down { 0% { top: 0; opacity: 0; } 20%,80% { opacity: .8; } 100% { top: calc(100% - 10px); opacity: 0; } }
@media(prefers-reduced-motion:reduce) {
 .how-page *, .how-page *::before, .how-page *::after { animation: none !important; transition: none !important; }
 .hw-motion { display: none; }
}

@media(max-width:800px) {
 .hw-flow-visual .flow-node-heading { font-size: clamp(9px,1.9vw,12px); }
 .hw-flow-visual .flow-node-detail { font-size: clamp(7px,1.35vw,9px); }
 .hw-flow-visual .flow-hub-top { font-size: clamp(4px,.95vw,6px); }
 .hw-flow-visual .flow-hub-label { font-size: clamp(6px,1.3vw,8px); }
}
@media(max-width:480px) {
 .hw-flow-visual .flow-node { padding: 8px 6px; }
 .hw-flow-visual .flow-node-heading { font-size: 8px; gap: 4px; }
 .hw-flow-visual .flow-node-heading svg { width: 12px; height: 12px; }
 .hw-flow-visual .flow-node-heading > span { line-height: 1.25; }
 .hw-flow-visual .hw-map-source { top: 12%; width: 36%; padding: 9px 8px; }
 .hw-map-source-location { font-size: 7px; margin: 5px 0; }
 .hw-map-source-agent { font-size: 6px; padding: 3px 5px; }
 .hw-flow-visual .hw-map-hub { width: 32%; padding: 10px 5px; }
 .hw-flow-visual .flow-hub img { margin: 13px auto 10px; }
 .hw-flow-visual .flow-hub-top { font-size: 3.7px; letter-spacing: .02em; }
 .hw-flow-visual .flow-hub-label { font-size: 5.5px; }
 .hw-flow-visual .hw-map-caption { margin-top: 18px; font-size: .63rem; }
}
@media(max-width:360px) {
 .hw-flow-visual .flow-node-heading { font-size: 7px; gap: 3px; }
 .hw-flow-visual .flow-node-heading svg { width: 10px; height: 10px; }
 .hw-flow-visual .flow-hub-top { font-size: 3.2px; }
 .hw-flow-visual .flow-hub-label { font-size: 4.8px; }
}