/* V6: separated period control; coordinated scene surface and hover letter roll. */
.header-left{gap:29px}.brand{gap:0}.brand-wordmark{width:149px;height:48px}
.header nav{gap:25px}.header-right{gap:25px;padding-left:29px}.header .secondary-nav{gap:25px}
.header-account{display:flex;align-items:center;gap:25px;margin-left:auto}
.header-contact{display:flex;align-items:center;gap:7px;min-height:36px;border:0;background:none;padding:0;color:inherit;white-space:nowrap;font:400 17px/1.2 ReferenceUI,Arial,sans-serif}
.header-contact svg{width:18px;height:18px}.header-contact:hover{color:var(--red)}
.header-access{margin-left:0;border-left:1px solid #1113;padding-left:25px}
.commerce .cta,.commerce .offer{height:124px;min-height:124px}
.commerce .offer{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:14px 15px;background:#ffffff02}
.offer-top{display:contents}.price{display:flex;align-items:baseline;flex-wrap:nowrap;flex:none;height:49px;margin:0;gap:10px}
.price strong{font-size:49px;line-height:1}.price .currency{font-size:32px}.price .unit{font-size:20px;line-height:1}
.offer-note{margin:0;flex:none;font-size:16px;line-height:20px;align-self:auto}
.offer .billing{position:absolute;top:9px;right:14px;width:125px;height:32px;padding:2px;border-radius:5px;display:flex;gap:0;background:#111;box-shadow:none}
.offer .billing button{min-height:26px;font-size:12px;padding:3px 7px;flex:1}.offer .billing button span{font-size:10px;margin-left:4px}
/* UI sits on the same plane: quiet ink, shallow inset edges, shared shading. */
.listen{right:22.6%}.track .timeline,.track .controls{width:calc(100% - 12px)}
.timeline{gap:8px}.timeline .wave{max-width:none}.wave span{max-width:none}.timeline #time{min-width:24px;flex:0 0 auto;text-align:right}
.volume{margin-left:auto;gap:8px}.volume input{margin:0;width:56px}
.track,.formats{color:#e4e3df;text-shadow:0 1px 1px #000a}
.track h2{color:#e4e3df}.track-subtitle{color:#aaa9a6}.player-kicker{color:#aaa9a6}
.cover{border:0;border-radius:2px;box-shadow:0 1px 0 #ffffff12;background:#d8d7d2;isolation:isolate}
.cover img{filter:brightness(.98) saturate(.96);mix-blend-mode:multiply;opacity:1}
.cover::after{display:block;content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#00000015,transparent 44%);box-shadow:inset 2px 2px 5px #0006,inset -1px -1px 1px #ffffff24}
.formats>p{color:#bebdb8}.format-grid button{border:1px solid #ffffff24;background:#090a0a21;box-shadow:inset 0 1px 3px #0005,0 1px 0 #ffffff0b;color:#c9c8c3;text-shadow:0 1px 1px #0009}
.format-grid button[aria-pressed=true]{border-color:#fb262c85;background:#fb262c09;color:#e7e3df;box-shadow:inset 0 1px 4px #0005,0 1px 0 #ffffff09}
.format-grid button:hover{background:#ffffff0a;color:white}
/* V7: a stable rectangular hover target; six cached compositor layers. */
.animated-wordmark{position:relative;display:flex;align-items:center;cursor:default;outline-offset:5px;overflow:hidden;isolation:isolate}
.animated-wordmark *{pointer-events:none;user-select:none}
.word-fallback{position:absolute;inset:0;width:100%;height:100%}
.word-stage{display:none;flex:none;overflow:hidden}
.animated-wordmark[data-ready] .word-stage{display:flex}
.animated-wordmark[data-ready] .word-fallback{display:none}
.word-cell{height:100%;flex:none;overflow:hidden;contain:paint}
.word-track{height:200%;width:100%;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
.word-face{height:50%;width:100%;background-image:var(--word-sprite);background-size:var(--sprite-width) 100%;background-position:var(--sprite-x) 0;background-repeat:no-repeat}
@media(prefers-reduced-motion:reduce){.word-track{will-change:auto}}
@media(min-width:1800px){.header-left{gap:36px}.header nav{gap:30px}.header-contact{font-size:19px}.header-account{gap:29px}.commerce .cta,.commerce .offer{height:136px;min-height:136px}.commerce .offer{padding:15px 17px;gap:9px}.price{height:55px}.price strong{font-size:55px}.price .unit{font-size:23px}.offer-note{font-size:18px;line-height:23px}.offer .billing{width:140px;right:16px;top:10px;height:34px}.offer .billing button{font-size:13px}}
@media(max-width:1450px) and (min-width:1101px){.brand-wordmark{width:127px;height:41px}.header-left{gap:23px}.header nav{gap:20px;font-size:15px}.header-right{padding-left:22px;gap:19px}.header .secondary-nav{gap:19px}.header-account{gap:18px}.header-contact{font-size:14px;gap:5px}.header-contact svg{width:16px}.header-access{padding-left:18px;font-size:14px}.commerce .cta,.commerce .offer{height:116px;min-height:116px}.commerce .offer{padding:12px 12px;gap:7px}.price{height:45px;gap:8px}.price strong{font-size:45px}.price .currency{font-size:29px}.price .unit{font-size:18px}.offer-note{font-size:13.3px;line-height:17px}.offer .billing{width:116px;height:30px;top:8px;right:11px}.offer .billing button{font-size:11px;min-height:24px;padding:3px 6px}.offer .billing button span{font-size:9px}.track .timeline,.track .controls{width:calc(100% - 10px)}.volume input{width:43px}}
@media(max-width:1100px){.header .secondary-nav{display:none}.header-left{padding:0;gap:0}.header-right{padding:0;gap:12px}.header-account{gap:16px}.header-access{padding-left:16px;border-color:#fff4}.header-contact{font-size:15px;color:white}.header-contact svg{width:17px}.brand-wordmark{width:120px;height:41px}}
@media(max-width:1100px) and (min-width:901px){.header-contact{color:#111}.header-access{border-color:#1113}.commerce .cta,.commerce .offer{height:116px;min-height:116px}.commerce .offer{padding:11px 10px;gap:6px}.price{height:43px;gap:6px}.price strong{font-size:39px}.price .currency{font-size:25px}.price .unit{font-size:15px}.offer-note{font-size:11.5px;line-height:17px}.offer .billing{width:107px;right:9px;top:8px;height:29px}.offer .billing button{font-size:10px;min-height:23px;padding:3px 5px}}
@media(max-width:900px){.header{padding-inline:18px}.brand-wordmark{width:105px;height:36px}.header-account{gap:10px}.header-contact{width:29px;min-height:34px;justify-content:center}.header-contact span{display:none}.header-contact svg{width:19px;height:19px}.header-access{padding-left:10px;font-size:12px;gap:4px}.header-access svg{display:none}.header-right{gap:9px}.commerce .cta{height:61px;min-height:61px}.commerce .offer{height:124px;min-height:124px;padding:13px 14px;gap:8px}.price{height:48px;gap:9px}.price strong{font-size:48px}.price .currency{font-size:31px}.price .unit{font-size:19px}.offer-note{font-size:14.5px;line-height:19px}.offer .billing{top:9px;right:13px;width:120px;height:32px}.offer .billing button{font-size:12px;min-height:26px}.track .timeline,.track .controls{width:calc(100% - 5px)}.timeline{gap:6px}.timeline #time{min-width:21px}.volume{display:none}}
@media(max-width:370px){.header{padding-inline:15px}.brand-wordmark{width:92px}.header-access{font-size:11px;padding-left:8px}.header-account{gap:7px}.price strong{font-size:44px}.price .currency{font-size:28px}.price .unit{font-size:17px}.offer-note{font-size:13px}.offer .billing{width:112px}.offer .billing button{font-size:11px}}


.brand-comparison{gap:10px}.brand-comparison .brand-wordmark{width:120px}.header .brand-comparison .comparison-mark{width:37px;height:37px}
@media(max-width:1450px) and (min-width:1101px){.brand-comparison .brand-wordmark{width:100px}.header .brand-comparison .comparison-mark{width:29px;height:29px}}
@media(max-width:900px){.brand-comparison{gap:6px}.brand-comparison .brand-wordmark{width:80px}.header .brand-comparison .comparison-mark{width:23px;height:23px}}

/* Owner follow-up: white letter roll and header, brighter cover, compact price controls. */
.price{height:58px;gap:9px}.price strong{font-size:58px}.price .currency{font-size:36px}.price .unit{font-size:17px}
.offer .billing{width:112px;height:30px}.offer .billing button{font-size:11px;min-height:24px;padding:3px 6px}.offer .billing button span{font-size:9px;margin-left:3px}
.cover{background:#faf9f6}.cover img{mix-blend-mode:normal;filter:none}.cover::after{background:linear-gradient(125deg,#00000008,transparent 32%);box-shadow:inset 1px 1px 2px #0002,inset -1px -1px 1px #ffffff33}
.volume{margin-left:13px;gap:8px}.volume input{width:57px}
@media(min-width:1800px){.price{height:64px}.price strong{font-size:64px}.price .currency{font-size:40px}.price .unit{font-size:20px}.offer .billing{width:125px;height:32px}.offer .billing button{font-size:12px;min-height:26px}}
@media(max-width:1450px) and (min-width:1101px){.price{height:53px;gap:8px}.price strong{font-size:53px}.price .currency{font-size:32px}.price .unit{font-size:15px}.offer .billing{width:104px;height:29px}.offer .billing button{font-size:10.5px;min-height:23px}.volume{margin-left:9px}.volume input{width:43px}}
@media(max-width:1100px) and (min-width:901px){.price{height:48px;gap:6px}.price strong{font-size:46px}.price .currency{font-size:29px}.price .unit{font-size:13px}.offer .billing{width:98px;height:28px}.offer .billing button{font-size:10px;min-height:22px}}
@media(max-width:900px){.price{height:56px;gap:8px}.price strong{font-size:56px}.price .currency{font-size:34px}.price .unit{font-size:17px}.offer .billing{width:110px;height:30px}.offer .billing button{font-size:11px;min-height:24px}}
@media(max-width:370px){.price{height:51px}.price strong{font-size:51px}.price .currency{font-size:31px}.price .unit{font-size:15px}}

/* Final owner direction: price and period only in the hero; terms stay in Tariffs. */
.commerce .offer{justify-content:flex-end;padding-bottom:17px;gap:0}
.price{height:76px;gap:10px}.price strong{font-size:76px}.price .currency{font-size:42px}.price .unit{font-size:20px}
@media(min-width:1800px){.price{height:84px}.price strong{font-size:84px}.price .currency{font-size:46px}.price .unit{font-size:23px}}
@media(max-width:1450px) and (min-width:1101px){.commerce .offer{padding-bottom:17px}.price{height:66px;gap:9px}.price strong{font-size:66px}.price .currency{font-size:36px}.price .unit{font-size:18px}}
@media(max-width:1100px) and (min-width:901px){.commerce .offer{padding-bottom:18px}.price{height:57px;gap:7px}.price strong{font-size:57px}.price .currency{font-size:31px}.price .unit{font-size:15px}}
@media(max-width:900px){.commerce .offer{padding-bottom:18px}.price{height:72px;gap:9px}.price strong{font-size:72px}.price .currency{font-size:39px}.price .unit{font-size:20px}}
@media(max-width:370px){.price{height:64px;gap:8px}.price strong{font-size:64px}.price .currency{font-size:35px}.price .unit{font-size:18px}}

/* Optical alignment of the price row, accounting for the typeface baseline. */
.commerce .offer{justify-content:center;padding-top:8px;padding-bottom:26px}
.price{gap:18px}.price .currency{margin-left:7px}
@media(max-width:1450px) and (min-width:1101px){.price{gap:15px}.price .currency{margin-left:6px}}
@media(max-width:1100px) and (min-width:901px){.price{gap:10px}.price .currency{margin-left:5px}}
@media(max-width:900px){.price{gap:14px}.price .currency{margin-left:6px}}
@media(max-width:370px){.price{gap:11px}}

/* Final size trim requested by the owner; retain optical centering and unit spacing. */
.price{height:70px}.price strong{font-size:70px}.price .currency{font-size:38px}
@media(min-width:1800px){.price{height:78px}.price strong{font-size:78px}.price .currency{font-size:42px}}
@media(max-width:1450px) and (min-width:1101px){.price{height:61px}.price strong{font-size:61px}.price .currency{font-size:33px}}
@media(max-width:1100px) and (min-width:901px){.price{height:53px}.price strong{font-size:53px}.price .currency{font-size:28px}}
@media(max-width:900px){.price{height:66px}.price strong{font-size:66px}.price .currency{font-size:36px}}
@media(max-width:370px){.price{height:59px}.price strong{font-size:59px}.price .currency{font-size:32px}}
@media(max-width:1450px) and (min-width:1101px){.format-grid{gap:5px}.format-grid button{padding-inline:6px;gap:5px}}

/* Owner: center the complete price group with equal side margins. */
.price{height:64px;justify-content:center;gap:18px}.price strong{font-size:64px}.price .currency{font-size:35px}
@media(min-width:1800px){.price{height:72px}.price strong{font-size:72px}.price .currency{font-size:39px}}
@media(max-width:1450px) and (min-width:1101px){.price{height:56px;gap:15px}.price strong{font-size:56px}.price .currency{font-size:30px}}
@media(max-width:1100px) and (min-width:901px){.price{height:49px;gap:10px}.price strong{font-size:49px}.price .currency{font-size:27px}}
@media(max-width:900px){.price{height:60px;gap:14px}.price strong{font-size:60px}.price .currency{font-size:32px}}
@media(max-width:370px){.price{height:54px;gap:11px}.price strong{font-size:54px}.price .currency{font-size:29px}}