/* Editorial service signatures, not rankings or third-party awards. */

.detail-distinction{display:inline-flex;align-items:center;max-width:100%;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 10%,#020202),#060606);padding:7px 12px;letter-spacing:.04em;line-height:1.35;text-transform:uppercase;border-radius:2px 10px 2px 2px}

.detail-distinction::before{content:'';width:3px;height:12px;margin-right:9px;background:var(--accent);flex-shrink:0;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 24%,transparent)}

.detail-distinction[hidden]{display:none}.detail-distinction{font-size:11px;margin:0 0 5px}

.nav-text{align-items:flex-start;gap:9px}

.nav-text .service-distinction{display:inline-flex;align-items:center;width:fit-content;max-width:100%;padding:4px 7px;border:1px solid rgba(var(--service-rgb),.24);border-radius:2px 7px 2px 2px;background:linear-gradient(110deg,rgba(var(--service-rgb),.07),transparent);color:var(--service-light);font-size:10px;line-height:1.25;white-space:nowrap;letter-spacing:.025em;transition:background .25s,border-color .25s}

.ecosystem-button:is(:hover,:focus-visible,[aria-current=true]) .service-distinction{border-color:rgba(var(--service-rgb),.6);background:rgba(var(--service-rgb),.12)}

.tags.service-value{gap:0;align-items:center;min-height:23px}

.tags.service-value span{color:#e5dfd6;font-size:12px;letter-spacing:.01em}.tags.service-value span:first-child{color:var(--accent)}

@media(max-width:1100px) and (orientation:portrait){

 :root{--mobile-dock:192px}

 

 .nav-text{align-items:flex-start;gap:6px}.nav-text .service-distinction{display:inline-flex;font-size:11px;letter-spacing:0;padding:0;border:0;background:none;border-radius:0}.ecosystem-button{min-height:62px}

 .tags.service-value{display:flex;flex-wrap:wrap;margin-top:10px;min-height:0}.tags.service-value span{font-size:11px;line-height:1.4;padding:0 8px}.tags.service-value span:first-child{padding-left:0}

 .actions{margin-top:13px}

}

@media(max-width:1100px) and (orientation:portrait) and (max-height:740px){:root{--mobile-dock:192px}}

@media(min-width:600px) and (max-width:1100px) and (orientation:portrait){:root{--mobile-dock:212px}.ecosystem-button{min-height:70px}.nav-text .service-distinction{font-size:11px}}

@media(orientation:landscape) and (max-height:540px){.nav-text .service-distinction{font-size:9px;padding:2px 4px}.nav-text{gap:4px}.tags.service-value{display:none}}

body.static-mode .service-distinction{transition:none}

@media(prefers-reduced-motion:reduce){.service-distinction{transition:none!important}}

@media(forced-colors:active){.detail-distinction,.nav-text .service-distinction{color:CanvasText;border-color:CanvasText;background:Canvas}.detail-distinction::before{background:CanvasText;box-shadow:none}}



/* Quiet service rail: one emphasis per item, shared interaction language. */

.dock-caption{display:none}

.ecosystem-nav{gap:8px;padding:0;border:0;background:none}

.ecosystem-button{min-height:84px;padding:14px 20px;gap:13px;border:1px solid #d5c8ed26!important;border-radius:12px;background:linear-gradient(135deg,#17141bbf,#08080bea);box-shadow:inset 0 1px 0 #ffffff09,0 6px 18px #0002;overflow:hidden;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}

.ecosystem-button:last-child{border-right:1px solid #d5c8ed26}

.ecosystem-button .nav-number{position:absolute;right:13px;top:10px;font-size:10px;opacity:.8;color:#b8adc6;font-variant-numeric:tabular-nums}

.ecosystem-button .service-emblem{width:64px;height:56px;flex-basis:64px}

.ecosystem-button .emblem-depth{opacity:.5}.ecosystem-button .emblem-face{opacity:.92}.ecosystem-button .emblem-bevel{opacity:.8}

.ecosystem-button .nav-text{gap:6px}.ecosystem-button .nav-text strong{font:600 clamp(14px,1.05vw,18px)/1.25 'ZYLO Text';color:#f5f1fb;letter-spacing:-.025em;white-space:normal}

.ecosystem-button .nav-text .service-distinction{border:0;border-radius:0;background:none;padding:0;letter-spacing:0;color:#cfc9d9;font-size:12px;line-height:1.3;white-space:normal;transition:color .18s ease}

.ecosystem-button:is(:hover,:focus-visible){border-color:rgba(var(--service-rgb),.5)!important;background:linear-gradient(125deg,rgba(var(--service-rgb),.09),#0a090d 80%);box-shadow:inset 0 1px 0 #ffffff10,0 8px 22px #0004}

.ecosystem-button[aria-current=true]{border-color:rgba(var(--service-rgb),.72)!important;background:linear-gradient(115deg,rgba(var(--service-rgb),.16),rgba(var(--service-rgb),.035) 65%,#09090c);box-shadow:inset 3px 0 0 rgba(var(--service-rgb),.72),inset 0 1px 0 #ffffff12,0 8px 24px #0004}

.ecosystem-button:is(:hover,:focus-visible,[aria-current=true]) .service-distinction{color:var(--service-light)}

.ecosystem-button .nav-active{top:auto;bottom:0;left:20px;right:20px;height:2px;background:linear-gradient(90deg,transparent,var(--service-light),transparent);transition:transform .22s ease}

.ecosystem-button:focus-visible{outline:2px solid var(--service-light);outline-offset:-3px}

@media(max-width:1100px) and (orientation:portrait){

 .journey-bottom{background:linear-gradient(180deg,#02020200,#020202f2 28%)}

 .nav-intro{display:flex;height:44px;margin:0;align-items:center}

 .nav-intro>#journey-status,.nav-intro>.nav-counter{display:none}

 .dock-caption{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:#c2bacf}

 .ecosystem-nav{gap:8px;padding:0;border:0}

 .ecosystem-button{min-height:56px;padding:8px 10px;gap:8px;border-radius:10px}

 .ecosystem-button[aria-current=true]{border-radius:10px}

 .ecosystem-button .service-emblem{width:48px;height:44px;flex-basis:48px}

 .ecosystem-button .nav-text{gap:4px}.ecosystem-button .nav-text strong{font-size:13px;line-height:1.25}

 .ecosystem-button .nav-text .service-distinction{font-size:11px;line-height:1.3}

 .ecosystem-button .nav-active{left:14px;right:14px}

 .journey-bottom footer{position:absolute;top:0;right:var(--gutter);height:44px;min-height:44px;padding:0;gap:0}

 .journey-bottom .scroll-hint{display:none}

}

@media(min-width:600px) and (max-width:1100px) and (orientation:portrait){

 .ecosystem-button{min-height:64px;padding:10px 14px;gap:12px}

 .ecosystem-button .service-emblem{width:58px;height:52px;flex-basis:58px}

 .ecosystem-button .nav-text strong{font-size:16px}

}

@media(max-width:359px) and (orientation:portrait){

 .ecosystem-button{padding:8px;gap:6px}.ecosystem-button .service-emblem{width:40px;height:36px;flex-basis:40px}.ecosystem-button .nav-text strong{font-size:12px}

}

@media(orientation:landscape) and (max-height:540px){

 .ecosystem-button{min-height:51px;padding:8px;gap:7px;border-radius:8px}

 .ecosystem-button .service-emblem{width:36px;height:34px;flex-basis:36px}

 .ecosystem-button .nav-text strong{font-size:12px}.ecosystem-button .nav-text .service-distinction{display:inline-flex;font-size:10px}

}

body.static-mode .ecosystem-button,body.static-mode .ecosystem-button .nav-active,body.static-mode .ecosystem-button .service-distinction{transition:none}

@media(prefers-reduced-motion:reduce){.ecosystem-button,.ecosystem-button .nav-active,.ecosystem-button .service-distinction{transition:none!important}}

@media(forced-colors:active){.ecosystem-button{border-color:ButtonText!important;background:Canvas;box-shadow:none}.ecosystem-button:is(:hover,:focus-visible,[aria-current=true]){border-color:ButtonText!important;background:Canvas;box-shadow:none}.ecosystem-button[aria-current=true],.ecosystem-button:focus-visible{outline:2px solid Highlight}.ecosystem-button .nav-text strong,.ecosystem-button[aria-current=true] .nav-text strong,.ecosystem-button .nav-text .service-distinction,.ecosystem-button .nav-number,.dock-caption{color:CanvasText}.ecosystem-button .nav-active{background:Highlight}}