.brands-page{--brands-accent:var(--skin-accent,#d3abf5);--brands-ink:var(--skin-ink,#f3e7ff);--brands-muted:var(--skin-muted,#bea9cf);--brands-line:var(--skin-line,#c2a0dd33);--brands-surface:var(--skin-panel,#241a30e8);color:var(--brands-ink)}
.brands-hero{position:relative;display:flex;justify-content:space-between;align-items:center;isolation:isolate;overflow:hidden;border:1px solid var(--brands-line);border-radius:27px;padding:36px;background:var(--skin-hero,linear-gradient(125deg,#332043,#1a152b));box-shadow:inset 0 1px #ffffff17,0 14px 40px #0c05151a;color:var(--skin-highlight,#f3e4ff)}
.brands-hero>div:first-child{position:relative;z-index:1;flex:1}.brands-eyebrow{font-size:9px;letter-spacing:3px;color:var(--skin-hero-soft,#d5bce8)}.brands-hero h1{font-size:clamp(24px,2.8vw,34px);font-weight:550;line-height:1.5;margin:15px 0 12px}.brands-hero p{font-size:13px;color:var(--skin-hero-soft,#c6b0d8);line-height:1.9;margin-bottom:24px}.brands-hero .btn{text-decoration:none;gap:10px;font-size:12px;background:var(--skin-gilding,linear-gradient(120deg,#b681e0,#8056a4));color:var(--skin-button-ink,#fff4ff);border-color:var(--brands-line);min-height:43px}.brands-hero .btn .icon{width:16px;height:16px}
.brands-constellation{position:relative;display:grid;place-items:center;width:210px;height:210px;flex-shrink:0;color:var(--skin-highlight,#ead2ff)}.brands-constellation i{position:absolute;inset:12%;border:1px solid currentColor;border-radius:50%;opacity:.2;transform:rotate(-25deg) scaleY(.65)}.brands-constellation i:nth-child(2){inset:0;transform:rotate(25deg) scaleY(.6);opacity:.12}.brands-constellation>span{display:grid;place-items:center;width:100px;height:100px;transform:rotate(-10deg);border:1px solid #f2e1ff55;border-radius:30px;background:linear-gradient(140deg,#ecd5ff33,#eac3ff0b);box-shadow:inset 0 2px #fff3,0 12px 0 -6px #140a2466,0 16px 28px #0c051d55;animation:brand-float 8s ease-in-out infinite}.brands-constellation .icon{width:57px;height:57px;stroke-width:1.3;fill:#eed8ff10}.brands-constellation>b{position:absolute;top:24px;right:28px;font-size:24px;opacity:.8}.brands-constellation>b:last-child{top:auto;right:auto;left:13px;bottom:26px;font-size:18px}
.brands-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0}.brands-filters{display:flex;gap:7px;flex-wrap:wrap}.brands-filters button{font:inherit;font-size:12px;padding:10px 13px;min-height:40px;border:1px solid transparent;border-radius:12px;color:var(--brands-muted);background:transparent;cursor:pointer}.brands-filters button.active{background:color-mix(in srgb,var(--brands-accent) 12%,transparent);color:var(--brands-ink);border-color:color-mix(in srgb,var(--brands-accent) 30%,transparent)}.brands-search{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--brands-line);border-radius:12px;background:var(--brands-surface);color:var(--brands-muted)}.brands-search .icon{width:17px;height:17px}.brands-search input{background:transparent;color:var(--brands-ink);font:inherit;font-size:12px;width:165px;border:0;outline:none;padding:0;min-height:20px}.brands-search:focus-within{outline:2px solid var(--brands-accent);outline-offset:2px}
.brands-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.brands-section-heading h2{font-size:17px;margin:0;font-weight:550}.brands-section-heading>span{font-size:11px;color:var(--brands-muted)}.brands-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.brand-service-card{min-width:0;padding:22px 20px 16px;border:1px solid var(--brands-line);border-radius:21px;background:var(--brands-surface);box-shadow:inset 0 1px #fff1,0 8px 23px #0c061017;transition:transform .25s,border-color .25s}.brand-service-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brands-accent) 55%,transparent)}.brand-service-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:23px}.brand-monogram{position:relative;display:grid;place-items:center;width:50px;height:50px;border:1px solid color-mix(in srgb,var(--brands-accent) 38%,transparent);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--brands-accent) 20%,transparent),transparent);color:var(--brands-accent);font-family:Georgia,serif;font-size:17px;font-weight:600;letter-spacing:1px;box-shadow:inset 0 2px #fff2,0 4px 0 #06010a20}.brand-monogram i{position:absolute;width:4px;height:4px;border-radius:50%;right:7px;top:7px;background:var(--brands-accent);opacity:.65;box-shadow:0 0 8px var(--brands-accent)}.brand-category{font-size:9px;color:var(--brands-muted);padding:5px 8px;background:color-mix(in srgb,var(--brands-accent) 7%,transparent);border-radius:7px}.brand-service-card h3{font-size:17px;margin:0 0 10px;font-weight:550}.brand-service-card p{font-size:12px;line-height:1.8;color:var(--brands-muted);min-height:42px;margin:0 0 20px}.brand-service-foot{border-top:1px solid var(--brands-line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:7px}.brand-service-foot>span{font-size:11px;color:var(--brands-muted);font-variant-numeric:tabular-nums}.brand-service-foot>a{min-height:34px;display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:9px;color:var(--brands-accent);font-size:12px;text-decoration:none}.brand-service-foot>a:hover{background:color-mix(in srgb,var(--brands-accent) 12%,transparent)}.brand-service-foot .icon{width:15px;height:15px}
.brands-support{display:flex;align-items:center;gap:14px;margin-top:25px;padding:21px;border:1px solid var(--brands-line);border-radius:19px;background:var(--brands-surface)}.brands-support-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--brands-line);color:var(--brands-accent);background:color-mix(in srgb,var(--brands-accent) 9%,transparent)}.brands-support-icon .icon{width:23px;height:23px}.brands-support>div{flex:1}.brands-support h2{font-size:15px;margin:0 0 7px}.brands-support p{font-size:11px;color:var(--brands-muted);margin:0}.brands-support>a{display:flex;align-items:center;gap:8px;color:var(--brands-accent);font-size:12px;text-decoration:none;min-height:40px}.brands-support>a .icon{width:16px;height:16px}.brands-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:17px 2px 0;font-size:10px;line-height:1.8;color:var(--brands-muted)}.brands-note p{margin:0}.brands-note>a{color:inherit;text-underline-offset:3px}.brands-wallet-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 5px;font-size:11px;color:var(--brands-muted)}.brands-wallet-link>span{display:flex;align-items:center;gap:7px}.brands-wallet-link .icon{width:16px;height:16px}.brands-wallet-link button{display:flex;align-items:center;gap:6px;color:var(--brands-accent);font-size:11px}.brands-empty{grid-column:1/-1;text-align:center;padding:45px 16px;border:1px dashed var(--brands-line);border-radius:19px;color:var(--brands-muted);font-size:13px}
.brands-page :focus-visible{outline:2px solid var(--brands-accent);outline-offset:3px}
@keyframes brand-float{50%{translate:0 -7px;rotate:4deg}}
@media(max-width:900px){.brands-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.brands-hero{padding:27px}.brands-constellation{width:170px;height:180px}}
@media(max-width:680px){.brands-hero{padding:25px 21px}.brands-hero h1{font-size:25px;max-width:230px}.brands-hero p{font-size:12px;max-width:245px}.brands-eyebrow{font-size:8px;letter-spacing:2px}.brands-constellation{position:absolute;right:-32px;top:30px;opacity:.24;scale:.9}.brands-hero>div:first-child{flex:none}.brands-toolbar{gap:13px;margin:22px 0}.brands-filters{gap:4px}.brands-filters button{font-size:11px;padding:9px 11px}.brands-search{width:100%}.brands-search input{width:100%;font-size:13px}.brands-grid{gap:11px}.brand-service-card{padding:16px 13px 12px;border-radius:17px}.brand-service-top{gap:5px;margin-bottom:18px;align-items:flex-start;flex-direction:column}.brand-monogram{width:45px;height:45px;border-radius:14px;font-size:15px}.brand-category{font-size:8px;padding:3px 0;background:transparent}.brand-service-card h3{font-size:14px;line-height:1.6;margin-bottom:8px}.brand-service-card p{font-size:11px;min-height:58px;margin-bottom:13px}.brand-service-foot{gap:3px;flex-wrap:wrap}.brand-service-foot>span{font-size:10px}.brand-service-foot>a{font-size:11px;padding:5px 4px;min-height:37px}.brands-support{padding:17px 13px;gap:10px}.brands-support-icon{width:35px;height:37px}.brands-support h2{font-size:13px}.brands-support p{font-size:10px}.brands-support>a{font-size:10px;gap:3px}.brands-note{font-size:9px}.brands-wallet-link{font-size:10px;flex-wrap:wrap}.brands-wallet-link button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.brands-constellation>span{animation:none}.brand-service-card{transition:none;transform:none!important}}
html[data-motion='reduced'] .brands-constellation>span{animation:none}
.brands-hero h1>span{display:inline-block;white-space:nowrap}

/* Compact 4:3 directory cards. The frame never follows a tall source image. */
.brands-page{--brand-cta-core:#8840c6;--brand-cta-light:#e2b9ff}
body[data-worn-medal='first'] .brands-page{--brand-cta-core:#ae3974;--brand-cta-light:#ffd8ec}
body[data-worn-medal='supply'] .brands-page{--brand-cta-core:#6650bc;--brand-cta-light:#dcd3ff}
body[data-worn-medal='guarantee'] .brands-page{--brand-cta-core:#146fae;--brand-cta-light:#bdeaff}
body[data-worn-medal='both'] .brands-page{--brand-cta-core:#ae2948;--brand-cta-light:#ffd0dd}
body[data-worn-medal='explorer'] .brands-page{--brand-cta-core:#a64120;--brand-cta-light:#ffe3ae}
body[data-worn-medal='crown'] .brands-page{--brand-cta-core:#82602e;--brand-cta-light:#fff0c6}
.brands-hero{padding:22px 26px;border-radius:21px;min-height:0}
.brands-hero h1{font-size:clamp(22px,2.6vw,29px);margin:9px 0 6px;line-height:1.4}
.brands-hero p{margin:0 0 14px;font-size:12px}
.brands-constellation{width:150px;height:135px}.brands-constellation>span{width:74px;height:74px;border-radius:24px}.brands-constellation .icon{width:40px;height:40px}
.brands-toolbar{margin:19px 0}.brands-section-heading{margin-bottom:12px}
.brands-grid{align-items:start;gap:14px}
.brand-service-card{container-type:inline-size;display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:19px;background:var(--brands-surface);box-shadow:inset 0 1px #fff2,0 9px 25px #08051020}
.brand-card-banner{position:relative;isolation:isolate;aspect-ratio:4/3;width:100%;overflow:hidden;border-bottom:1px solid var(--brands-line);background:radial-gradient(ellipse at 55% 15%,color-mix(in srgb,var(--brands-accent) 20%,transparent),transparent 75%),var(--skin-surface,#22182f)}
.brand-card-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.brand-card-placeholder{height:100%;display:grid;place-items:center;color:var(--brands-accent)}.brand-card-placeholder .icon{width:42px;height:42px;opacity:.65}
.brand-category{position:absolute;left:9px;bottom:9px;max-width:calc(100% - 18px);box-sizing:border-box;padding:4px 8px;border:1px solid var(--brands-line);border-radius:7px;font-size:9px;line-height:1.4;color:var(--brands-ink);background:var(--skin-panel,#241a30ed);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-card-body{display:flex;flex-direction:column;flex:1;padding:13px 14px 15px;min-width:0}
.brand-service-card h3{font-size:15px;font-weight:600;line-height:1.5;margin:0 0 5px;overflow-wrap:anywhere}
.brand-service-card p{min-height:0;margin:0;font-size:12px;line-height:1.7;color:var(--brands-muted);overflow-wrap:anywhere;white-space:pre-line}
.brand-card-links{display:grid;grid-template-columns:1fr;gap:8px;margin-top:13px}
.brand-link-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.brand-link-caption{padding:0 5px;color:var(--brands-muted);font-size:10px;line-height:1.5;overflow-wrap:anywhere}
/* A glass rim, rounded enamel face and a raised arrow tile, with a slow light pass. */
.brand-enter{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 13px;box-sizing:border-box;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand-cta-light) 82%,white);background:linear-gradient(180deg,color-mix(in srgb,var(--brand-cta-core) 68%,white) 0%,var(--brand-cta-core) 35%,var(--brand-cta-core) 72%,color-mix(in srgb,var(--brand-cta-core) 72%,#18061f));color:#fffafc;font:inherit;font-size:13px;font-weight:650;letter-spacing:.6px;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:inset 0 2px 4px #ffffffa0,inset 0 -2px 4px #ffffff45,0 0 0 3px color-mix(in srgb,var(--brand-cta-light) 14%,transparent),0 3px 0 color-mix(in srgb,var(--brand-cta-core) 55%,#08040c),0 5px 16px color-mix(in srgb,var(--brand-cta-core) 33%,transparent);transition:transform .16s,filter .16s,box-shadow .16s;-webkit-tap-highlight-color:transparent}
.brand-enter::before{content:'';position:absolute;inset:2px;border:1px solid #fff4;border-radius:inherit;pointer-events:none}
.brand-enter::after{content:'';position:absolute;z-index:0;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff06 36%,#ffffff38 48%,transparent 62%);transform:translateX(-135%);animation:brand-button-shine 7s ease-in-out infinite;pointer-events:none}
.brand-enter-label{position:relative;z-index:1;text-shadow:0 1px 2px #23102d45}
.brand-enter-arrow{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:6px;border:1px solid #fff9;color:var(--brand-cta-core);background:linear-gradient(150deg,#fffef9,var(--brand-cta-light));box-shadow:inset 0 1px 1px #fff,0 2px 3px #21072140}
.brand-enter-arrow svg{width:18px;height:18px}
.brand-enter:focus-visible{outline:2px solid var(--brands-accent);outline-offset:5px}
@media(hover:hover){.brand-enter:hover{filter:brightness(1.12);transform:translateY(-1px)}}
.brand-enter:active{transform:translateY(2px);filter:brightness(.98);box-shadow:inset 0 2px 4px #14071e44,inset 0 -1px 3px #fff8,0 0 0 3px color-mix(in srgb,var(--brand-cta-light) 18%,transparent),0 2px 10px color-mix(in srgb,var(--brand-cta-core) 30%,transparent)}
@keyframes brand-button-shine{0%,65%{transform:translateX(-135%)}88%,100%{transform:translateX(135%)}}
@container(min-width:300px){.brand-card-links[data-count='2']{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(min-width:390px){.brand-card-links[data-count='3']{grid-template-columns:repeat(3,minmax(0,1fr))}.brand-card-links[data-count='3'] .brand-enter{gap:8px;padding:0 9px;font-size:12px}}
@media(max-width:680px){.brands-hero{padding:19px}.brands-hero h1{font-size:23px}.brands-hero p{font-size:11px}.brands-constellation{right:-22px;top:15px;width:140px;height:130px}.brands-grid{gap:11px}.brand-service-card{padding:0;border-radius:15px}.brand-card-body{padding:11px 10px 13px}.brand-service-card h3{font-size:13px;margin-bottom:4px}.brand-service-card p{font-size:11px;min-height:0;margin:0;line-height:1.65}.brand-enter{font-size:12px;gap:9px;padding:0 9px}.brand-enter-arrow{flex-basis:21px;width:21px;height:21px}.brand-enter-arrow svg{width:16px;height:16px}.brand-category{font-size:8px;padding:4px 6px;left:7px;bottom:7px}.brand-card-links{margin-top:11px;gap:7px}}
@media(max-width:350px){.brands-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.brand-enter::after{animation:none;opacity:0}.brand-enter{transition:none}}
html[data-motion='reduced'] .brand-enter::after{animation:none;opacity:0}
.brands-empty .btn{margin-top:16px}