/* Enhances the current geometry; no CSS rule hides unrevealed content. */
.segment{position:relative;isolation:isolate}
.segment-cursor{position:absolute;left:0;top:0;height:100%;border:1px solid #ffffff55;border-radius:inherit;pointer-events:none;transform-origin:left center;z-index:1;box-sizing:border-box}
.segment button{position:relative;z-index:0}
.segment button:disabled{cursor:not-allowed}
.service-card.player-surface{transition:background-color var(--motion-normal) var(--ease-standard),border-color var(--motion-normal) var(--ease-standard)}
.service-cta,.contact-cta,.theme-toggle{transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),outline-color var(--motion-fast) var(--ease-standard)}
.icon-button{transition:background-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)}
.track{transition:border-color var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard)}
.track-detail{transition:grid-template-rows var(--motion-normal) var(--ease-standard)}
.track-detail .track-detail-inner{transition:opacity var(--motion-fast) var(--ease-standard)}
.expand .ui-icon,.disclosure-mark,.service-details>summary>span{transition:transform var(--motion-normal) var(--ease-standard)}
details>summary[aria-expanded=false] .disclosure-mark{transform:rotate(0)}
details>summary[aria-expanded=true] .disclosure-mark{transform:rotate(45deg)}
.service-details>summary[aria-expanded=false]>span{transform:rotate(0)}
.service-details>summary[aria-expanded=true]>span{transform:rotate(45deg)}
.theme-thumb{transition:transform var(--motion-normal) var(--ease-standard),background-color var(--motion-theme) var(--ease-standard),border-color var(--motion-theme) var(--ease-standard)}
/* Text-bearing surfaces change atomically with their text to retain contrast.
   Only the surrounding canvas, borders and control chrome interpolate. */
body{transition:background-color var(--motion-theme) var(--ease-standard)}
:root[data-theme-switching=true] main,:root[data-theme-switching=true] header.page-width,:root[data-theme-switching=true] footer.page-width{background-color:var(--background)}
.player-surface,.service-card.player-surface{transition:border-color var(--motion-theme) var(--ease-standard)}
:root[data-theme-switching=true] .body-copy,
:root[data-theme-switching=true] .player-surface,
:root[data-theme-switching=true] .service-card.player-surface{transition-property:border-color}
@media(hover:hover) and (pointer:fine){
 .service-card.player-surface:hover{transition-duration:var(--motion-fast)}
 .service-cta:hover,.contact-cta:hover{transition-duration:var(--motion-fast)}
}
/* The existing slow solid-color cycle stays coordinated across every accent. */
:root[data-accent-mode=cycle]{transition-duration:var(--motion-accent)}
:root[data-theme-switching=true]{transition:none!important}
@media(prefers-reduced-motion:reduce){
 .segment-cursor,.theme-thumb,body,.player-surface,.service-card.player-surface{transition:none}
}

.technical-row[data-motion-divider]{position:relative;border-top-color:transparent!important}
.technical-row[data-motion-divider]::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--border-glass);transform-origin:left center;pointer-events:none}
.technical-row[data-motion-divider][data-motion-revealed=true]::before{animation:motion-divider var(--motion-slow) var(--ease-standard) var(--motion-item-delay,0ms) backwards}
@keyframes motion-divider{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.motion-disclosure-running{overflow-anchor:none}
/* Selection updates instantly; only a short opacity cue is applied by JS. */
.segment-cursor{display:none}
/* The A/B list shares the catalogue's rows and keeps a single audio element. */
.comparison-playlist{grid-column:1/-1;width:100%;border-top:1px solid var(--border-glass)}
.comparison-track{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;min-height:54px;padding:12px 14px;border-left:2px solid transparent;border-bottom:1px solid var(--border-glass);text-align:left;color:var(--text-primary);background:transparent;transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.comparison-track.is-active{border-left-color:var(--accent-ui);background:var(--accent-faint)}
.comparison-track-symbol .ui-icon{width:12px;height:16px}
.comparison-track-name{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;min-width:0;font-size:15px;line-height:1.5}
.comparison-track-name>small{font-size:10px;color:var(--text-secondary);white-space:nowrap}
.comparison-track-duration{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){.comparison-track:hover{background:var(--accent-soft)}}
@media(max-width:599px){.comparison-track{gap:10px;padding:11px 10px}.comparison-track-name{font-size:14px;gap:2px 8px}.comparison-track-name>small{font-size:10px}.comparison-track-duration{font-size:11px}}

/* Reserve the decoded waveform's space to avoid a loading-time layout jump. */
#comparison[data-waveform=loading] .waveform-wrap{display:block;visibility:hidden}
/* Opaque player/card surfaces do not need a backdrop compositor layer. */
.audio-player,.comparison-panel,.service-card.player-surface{backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme-switching=true] .sales-rail__contact{transition-property:border-color}

/* The source pill stays opaque; only its fine selection edge fades. */
.segment button::after{content:"";position:absolute;inset:1px;border:1px solid #ffffff60;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-standard)}
.segment button[aria-pressed=true]::after{opacity:.5}
.segment button:disabled::after{opacity:0;transition:none}