/* Customers (T2 hub, 10 nov 2026). Prefix cux-. Personality: the ledger. Records with their sample and period,
   hairlines and mono figures carry the page; one amber spark per record; things move once into view, then rest. */
.page[data-page="customers"]{
  --cux-sand0:#F6F1E9; --cux-sand1:#F1EADF; --cux-sand2:#E9DECD; --cux-sand3:#D8C7AE; --cux-taupe:#5C5345; --cux-object:#FFFDFA;
  --cux-hair:rgba(92,83,69,.16); --cux-enter:cubic-bezier(.16,1,.3,1); --cux-move:cubic-bezier(.65,0,.35,1);
}
.cux-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}

/* 0 · top */
.cux-top{padding-block:0 clamp(16px,2.4vw,32px)}
.cux-promise{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;color:var(--fg2);max-width:48ch;padding-top:16px;border-top:1px solid var(--rule)}

/* shared section heads */
.cux-head{margin-bottom:clamp(28px,4vw,48px)}
.cux-head-side{font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--fg2);max-width:46ch}

/* 1 · logos (site .logos grid as a list): 11 logos + one door = 12 cells, so 6 / 3 / 2 columns divide evenly */
.cux-logo-head{padding-bottom:clamp(28px,4vw,48px)}
.cux-logo-head .cux-head{margin-bottom:0}
.cux-logo-cell{padding-inline:0}
.cux-logos.logos{grid-template-columns:repeat(6,minmax(0,1fr))}
.cux-logos.logos .lg{border-right:1px solid var(--rule)}
.cux-logos.logos .lg:nth-child(6n){border-right:0}
.cux-logos .lg.more a{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--fg3);text-align:center;line-height:1.4}
.cux-logos .lg.more a:hover{color:var(--fg)}
.cux-logos img.cux-dexr{max-height:40px}
.cux-logo-foot{padding-inline:clamp(20px,4vw,56px)}
.cux-logo-foot .note{margin-block:16px}

/* 2 · records */
.cux-reg{display:grid;gap:clamp(20px,2.6vw,36px)}
.cux-rec>article{border:1px solid var(--rule);border-radius:22px;background:var(--paper);overflow:hidden}
.cux-rec-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:clamp(18px,2.2vw,26px) clamp(20px,3vw,40px);border-bottom:1px solid var(--rule)}
.cux-rec-head h3{font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.03em;margin-right:4px}
.cux-tags{display:flex;flex-wrap:wrap;gap:6px}
.cux-tags li{font-size:13px;line-height:1;padding:7px 11px;border-radius:999px;background:var(--cux-sand1);color:var(--cux-taupe)}
.cux-when{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--fg3);white-space:nowrap}
.cux-when:empty{display:none}
.cux-say{padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,40px) 0;font-size:clamp(19px,1.7vw,23px);line-height:1.42;letter-spacing:-.015em;color:var(--fg);max-width:62ch;text-wrap:pretty}
.cux-rec-body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start;gap:clamp(20px,3vw,48px);padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,40px) clamp(22px,2.8vw,36px)}

/* the figure: one big number, then what it rests on */
.cux-fig{background:var(--cux-sand0);border-radius:18px;padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:22px;min-width:0}
.cux-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.cux-big b{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(76px,8.6vw,124px);line-height:.86;letter-spacing:-.06em;color:var(--fg)}
.cux-big span{font-size:clamp(17px,1.4vw,20px);color:var(--cux-taupe)}
.cux-led{display:grid;gap:14px}
.cux-led li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:baseline}
.cux-led li b{font-family:var(--mono);font-weight:500;font-size:17px;letter-spacing:-.02em;color:var(--fg);min-width:3ch}
.cux-led li span{font-size:14.5px;color:var(--cux-taupe)}
.cux-led li i{grid-column:1/-1;display:block;height:10px;border-radius:5px;background:var(--cux-sand1);position:relative;overflow:hidden}
.cux-led li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);min-width:8px;border-radius:5px;background:var(--cux-sand3);transform-origin:0 50%;transition:transform .95s var(--cux-move) calc(var(--d) * .12s)}
.cux-led li:nth-child(2) i::after{background:var(--cux-taupe)}
.cux-led li.cux-hit i::after{background:var(--amber)}
.cux-src{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--cux-taupe);padding-top:14px;border-top:1px solid var(--cux-hair)}

/* record 02: zero on day one, then the steering note */
.cux-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cux-pair li{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--cux-hair)}
.cux-pair b{font-family:var(--mono);font-weight:500;font-size:26px;letter-spacing:-.03em;color:var(--fg)}
.cux-pair span{font-size:14px;color:var(--cux-taupe)}
.cux-steer{background:var(--cux-object);border-radius:14px;padding:16px 18px;box-shadow:inset 3px 0 0 var(--amber),0 0 0 1px rgba(92,83,69,.07),0 18px 36px -24px rgba(92,83,69,.4);display:flex;flex-direction:column;gap:12px}
.cux-steer .cux-k{color:var(--cux-taupe)}
.cux-steer-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cux-steer-n li{display:flex;flex-direction:column;gap:4px;transition:opacity .55s ease calc(.3s + var(--d) * .12s),transform .55s var(--cux-enter) calc(.3s + var(--d) * .12s)}
.cux-steer-n b{font-family:var(--mono);font-weight:500;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.04em;color:var(--fg)}
.cux-steer-n span{font-size:13.5px;line-height:1.35;color:var(--cux-taupe)}

/* the record's text */
.cux-dl{display:flex;flex-direction:column;min-width:0}
.cux-dl>div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 18px;padding:16px 0;border-bottom:1px solid var(--rule)}
.cux-dl>div:first-child{padding-top:4px}
.cux-dl>div:last-child{border-bottom:0}
.cux-dl dt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);padding-top:4px}
.cux-dl dd{margin:0;font-size:16px;line-height:1.58;color:var(--fg2)}
.cux-dl .cux-miss dt{color:var(--fg)}
.cux-dl .cux-miss dd{color:var(--fg)}
.cux-rec-foot{padding:16px clamp(20px,3vw,40px);border-top:1px solid var(--rule);background:var(--subtle)}

/* review-only: a record waiting for a definition */
.cux-held{margin-top:20px;border:1.5px dashed var(--edge);border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;gap:8px}
.cux-held-t{font-size:17px;color:var(--fg2)}

/* 3 · definitions */
.cux-defs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.cux-defs-head{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.cux-spec{border-top:1px solid var(--rule)}
.cux-spec>div{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--rule);transition:opacity .55s ease calc(var(--d) * .07s),transform .55s var(--cux-enter) calc(var(--d) * .07s)}
.cux-spec dt{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.cux-spec dd{margin:0;font-size:16px;line-height:1.6;color:var(--fg2)}
.cux-spec dd a{display:inline-block;margin-left:4px;font-size:15px;font-weight:500}

/* 4 · questions */
.cux-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.cux-faq-head{display:flex;flex-direction:column;gap:18px}

/* 5 · close */
.cux-end{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;padding-block:clamp(88px,11vw,152px)}
.cux-end-head{display:flex;flex-direction:column;gap:22px}
.cux-end-h{font-size:clamp(46px,6.6vw,96px)}
.cux-end-side{display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-bottom:8px}
.cux-end-more{font-size:15px}
.cux-end .note{grid-column:1/-1}

/* motion: once, then rest. Hidden states only exist when the page script runs (cux-js) and the block has not been seen. */
.cux-steer-n li,.cux-spec>div{opacity:1;transform:none}
.cux-js [data-kit-reveal]:not(.bmk-seen) .cux-led li i::after{transform:scaleX(0)}
.cux-js [data-kit-reveal]:not(.bmk-seen) .cux-steer-n li{opacity:0;transform:translateY(10px)}
.cux-js .cux-spec[data-kit-reveal]:not(.bmk-seen)>div{opacity:0;transform:translateY(10px)}

@media (max-width:1080px){
  .cux-rec-body{grid-template-columns:minmax(0,1fr)}
  .cux-logos.logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cux-logos.logos .lg:nth-child(n){border-right:1px solid var(--rule)}
  .cux-logos.logos .lg:nth-child(3n){border-right:0}
}
@media (max-width:900px){
  .cux-defs,.cux-faq,.cux-end{grid-template-columns:minmax(0,1fr)}
  .cux-defs-head{position:static}
  .cux-end{align-items:start}
}
@media (max-width:560px){
  .cux-logos.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cux-logos.logos .lg{height:76px;padding:0 12px}
  .cux-logos.logos .lg:nth-child(n){border-right:1px solid var(--rule)}
  .cux-logos.logos .lg:nth-child(2n){border-right:0}
  .cux-when{margin-left:0;width:100%}
  .cux-dl>div,.cux-spec>div{grid-template-columns:minmax(0,1fr);gap:6px}
  .cux-dl dt{padding-top:0}
  .cux-steer-n{grid-template-columns:minmax(0,1fr);gap:10px}
  .cux-steer-n li{flex-direction:row;align-items:baseline;gap:12px}
  .cux-steer-n b{min-width:1.4ch}
}
@media (prefers-reduced-motion:reduce){
  .cux-led li i::after,.cux-steer-n li,.cux-spec>div{transition:none}
}