/* Brands & Partnerships and Terms & Services (2026-10-06). The site's own world over its neon ambient backdrop:
   Bebas Neue over Saira, glass cards, the pink-to-coral gradient on what lights up. One authored moment each: a
   partnership card's edge runs a gradient around it when you reach it; a clause's outlined numeral fills as you read. */
@property --bp-turn{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------------------------------------------------------------- brands & partnerships */
.bp .bp-intro,.tos .tos-intro{display:grid;grid-template-columns:1fr 2fr;gap:24px}
.bp .bp-intro>*,.tos .tos-intro>*{grid-column:2;margin:0;max-width:760px}
.bp-collabs{padding-top:30px!important}
.bp-h2{margin:0 0 26px;font-family:var(--brand-heading);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:.01em;color:var(--paper)}
.bp-h2 span{color:#ee9fc7;font-size:.62em;letter-spacing:.04em;margin-left:10px;vertical-align:.18em}
.bp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bp-card{position:relative;padding:1px;border-radius:18px;isolation:isolate;
  background:linear-gradient(var(--card-line,rgba(255,217,180,.18)),var(--card-line,rgba(255,217,180,.18)))}
/* the edge: a gradient arc that sweeps round the card once it is on screen, and again on hover */
.bp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  background:conic-gradient(from var(--bp-turn),transparent 0 62%,#ea138f 74%,#f59154 86%,transparent 96%);
  transition:opacity .6s}
/* once round, then gone: a lit edge at rest reads as "selected" on this site */
.bp-card.is-visible::before{animation:bp-sweep 2.4s cubic-bezier(.16,1,.3,1) both}
.bp-card:hover::before{opacity:1;animation:bp-turn 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes bp-sweep{0%{--bp-turn:0deg;opacity:0}12%{opacity:1}80%{opacity:1}100%{--bp-turn:360deg;opacity:0}}
@keyframes bp-turn{from{--bp-turn:0deg}to{--bp-turn:360deg}}
.bp-lockup{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(24px,2.6vw,38px) clamp(22px,2.6vw,36px) 18px;border-radius:17px 17px 0 0;background:#14100ef2}
.bp-logo{display:block;width:100%;height:auto;max-height:84px;object-fit:contain;object-position:left center;
  filter:brightness(0) invert(.93);transition:filter .5s;object-position:right center}
.bp-card:hover .bp-logo{filter:brightness(0) invert(1) drop-shadow(0 0 14px #ea138f99)}
.bp-x{font-family:var(--brand-heading);font-size:34px;line-height:1;background:linear-gradient(100deg,#ff3fa4,#f59154);-webkit-background-clip:text;
  background-clip:text;color:transparent;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.bp-card:hover .bp-x{transform:rotate(90deg) scale(1.15)}
.bp-ttw{display:block;width:100%;max-width:120px;height:auto;justify-self:start;opacity:.86}
.bp-name{margin:0;padding:12px clamp(22px,2.6vw,36px) 16px;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-radius:0 0 17px 17px;background:#14100ef2;border-top:1px solid #ffffff10}
.bp-name b{font-family:var(--brand-body);font-weight:700;font-size:15px;color:var(--paper)}
.bp-name span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft,#bcb9b0);text-align:right}

.bp-mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bp-mat{padding:28px 26px 24px;border-radius:18px;background:var(--glass,rgba(23,19,17,.72));border:1px solid var(--card-line,rgba(255,217,180,.18));
  display:flex;flex-direction:column;gap:14px}
.bp-mat-logo{height:44px;width:auto;max-width:100%;object-fit:contain;object-position:left;filter:brightness(0) invert(.93)}
html:not(#tw-type) .bp-mat-word,.bp-mat-word{margin:0;height:44px;display:flex;align-items:center;font-family:var(--brand-heading);font-size:34px;line-height:1;letter-spacing:.02em;color:var(--paper)}
.bp-mat p:not(.bp-mat-word){margin:0;color:#d8d1c8;font-size:15px;line-height:1.6}
.bp-mat-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 16px}
.bp-mat-links a{color:var(--paper);font-weight:700;font-size:14px;text-decoration:none;border-bottom:1px solid #ffffff40;padding-bottom:3px;transition:border-color .2s,color .2s}
.bp-mat-links a:hover{border-color:#f59154;color:#fff}
/* ULTRAFIT and Gtechniq lead the page (Jason 2026-10-07: "把ULTRAFIT和Gtechniq 置顶"): two large cards first, Prismatic
   Powders a slim row under them */
.bp-mats{grid-template-columns:repeat(2,minmax(0,1fr))}
.bp-mat:nth-child(-n+2){position:relative;overflow:hidden;padding:46px 40px 36px;gap:20px;min-height:330px;
  background:linear-gradient(160deg,#2a1622f2 0%,#160f14f2 55%,#120d10f2 100%);border-color:#f6cfe540}
.bp-mat:nth-child(-n+2)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#ea138f,#f59154)}
.bp-mat:nth-child(-n+2) .bp-mat-logo{height:76px}
html:not(#tw-type) .bp-mat:nth-child(-n+2) p:not(.bp-mat-word){font-size:17px;max-width:40ch}
.bp-mat:nth-child(3){grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 32px;padding:22px 28px}
html:not(#tw-type) .bp-mat:nth-child(3) .bp-mat-word{height:auto;font-size:28px}
.bp-mat:nth-child(3) .bp-mat-links{margin:0 0 0 auto}
.bp-cta{text-align:center}
.bp-cta h2,.tos-cta h2{font-family:var(--brand-heading);font-weight:400;font-size:clamp(40px,4.6vw,66px);line-height:1;margin:0 0 18px}
.bp-cta p{max-width:52ch;margin:0 auto 26px;color:#d8d1c8;text-wrap:balance}

/* ---------------------------------------------------------------- terms & services */
.tos-body{padding-top:20px!important}
.tos-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.tos-index{position:sticky;top:120px}
.tos-index ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;border-left:1px solid #ffffff1c}
.tos-index a{display:flex;align-items:baseline;gap:12px;padding:9px 0 9px 18px;margin-left:-1px;border-left:1px solid transparent;
  color:var(--text-soft,#bcb9b0);text-decoration:none;font-size:14px;font-weight:600;transition:color .25s,border-color .25s}
.tos-index a span{font-family:var(--brand-heading);font-size:18px;letter-spacing:.04em;color:#ffffff59;transition:color .25s}
.tos-index a:hover,.tos-index a[aria-current="true"]{color:#fff;border-left-color:#ea138f}
.tos-index a[aria-current="true"] span{color:#f59154}
.tos-clauses{display:grid;gap:16px}
.tos-clause{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;scroll-margin-top:130px;
  padding:clamp(26px,3vw,40px);border-radius:18px;background:var(--glass,rgba(23,19,17,.72));border:1px solid var(--card-line,rgba(255,217,180,.18))}
/* the numeral: outlined until its clause is read, then it fills */
.tos-n{font-family:var(--brand-heading);font-size:clamp(64px,7vw,104px);line-height:.8;letter-spacing:.01em;color:transparent;
  -webkit-text-stroke:1.5px #ffffff4d;background:linear-gradient(100deg,#ff3fa4,#f59154);-webkit-background-clip:text;background-clip:text;
  background-size:100% 0%;background-repeat:no-repeat;background-position:0 100%;transition:background-size 1.1s cubic-bezier(.16,1,.3,1),-webkit-text-stroke-color .6s}
.tos-clause.is-read .tos-n{background-size:100% 100%;-webkit-text-stroke-color:transparent}
.tos-clause h2{margin:4px 0 14px;font-family:var(--brand-heading);font-weight:400;font-size:clamp(30px,2.8vw,40px);line-height:1;letter-spacing:.01em;color:var(--paper)}
.tos-clause p{margin:0 0 12px;max-width:68ch;color:#d8d1c8}
.tos-clause a:not(.pill){color:var(--paper);text-underline-offset:4px;text-decoration-color:#f59154}
.tos-clause .pill{margin-top:8px}
/* privacy policy (tools/build_privacy.py): bulleted clauses and the effective date */
.tos-list{list-style:none;margin:0 0 12px;padding:0;max-width:68ch}
.tos-list li{position:relative;margin:0 0 8px;padding-left:18px;color:#d8d1c8}
.tos-list li::before{content:'';position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:linear-gradient(405deg,#ea138f 0%,#f59154 100%)}
.tos-date{color:#efe7df}
.tos-pay{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tos-pay{gap:6px 0}
.tos-pay li{color:#efe7df;font-size:15px;line-height:1.5}
.tos-pay li:not(:last-child)::after{content:'·';margin:0 12px;color:#f59154}

@media (max-width:800px){
  .bp .bp-intro,.tos .tos-intro{grid-template-columns:1fr}
  .bp .bp-intro>*,.tos .tos-intro>*{grid-column:1}
  .bp-grid,.bp-mats{grid-template-columns:1fr;gap:12px}
  .bp-mat:nth-child(-n+2){min-height:0;padding:28px 24px 24px}
  .bp-mat:nth-child(-n+2) .bp-mat-logo{height:48px}
  .bp-mat:nth-child(3){flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:18px 20px}
  html:not(#tw-type) .bp-mat:nth-child(3) .bp-mat-word{font-size:22px}
  .bp-mat:nth-child(3) p:not(.bp-mat-word){display:none}
  .bp-mat:nth-child(3) .bp-mat-links{margin:0 0 0 auto}
  .bp-lockup{padding:20px 20px 14px;grid-template-columns:minmax(0,1fr) auto 76px;gap:12px}
  .bp-logo{max-height:56px}
  .bp-lockup{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .bp-x{font-size:26px}
  .bp-name{padding:10px 20px 13px}
  /* minmax(0,…): the chip row is nowrap, and a 1fr column would grow to its full width and push the clauses off screen */
  .tos-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .tos-index{position:static;min-width:0}
  .tos-clause>div{min-width:0}
  .tos-index ol{display:flex;flex-wrap:wrap;gap:6px;border-left:0;margin:0;padding:0}
  .tos-index ol::-webkit-scrollbar{display:none}
  .tos-index a{white-space:nowrap;padding:8px 14px;border:1px solid #ffffff26;border-radius:999px;margin:0}
  .tos-index a:hover,.tos-index a[aria-current="true"]{border-color:#ea138f}
  .tos-clause{grid-template-columns:1fr;gap:6px}
  .tos-n{font-size:56px}
}
@media (prefers-reduced-motion:reduce){
  .bp-card::before{animation:none!important;opacity:0!important}
  .bp-card:hover .bp-x{transform:none}
  .tos-n{transition:none}
}