/* cutpile.com, the hub build (2026-10-23, round 2). Loaded only while lib/show.php hubOn(). Three parts: the strip's marks,
   the hub (#pile: CutPile's emblem inlaid as a floor medallion in the middle, the kinds of connection as cut pieces that
   click together) and the wall's marks. Classes are .hb- and .sh-; tokens are index.php's (walnut, paper, oak, the spectrum).
   Every piece color carries its text at 4.5:1 or better (measured, notes.md): orange, cyan, oak and white with ink; blue and
   the deep red with white. */

/* ------------------------------------------------------------------ the strip under the hero: every mark on a white chip */
.sh-strip-hub .sh-gl{width:20px;height:20px}
.sh-strip-hub .sh-gl[class*="sh-x-g-"]{width:24px;height:24px;margin:-2px}   /* Google's icons sit on their own 192 grid */
.sh-strip-hub .sh-x-twilio{height:19px;width:auto}
@media (min-width:861px) and (max-width:999px){.sh-strip-hub li:nth-child(n+5){display:none}}
@media (min-width:1000px) and (max-width:1199px){.sh-strip-hub li:nth-child(n+6){display:none}}
@media (min-width:1200px) and (max-width:1279px){.sh-strip-hub li:nth-child(n+7){display:none}}

/* ------------------------------------------------------------------ the wall */
.sh-works-hub .sh-wm{min-height:34px;gap:10px}
.sh-works-hub .sh-wm .sh-gl{width:26px;height:26px}
.sh-works-hub .sh-wm .sh-gl[class*="sh-x-g-"]{width:32px;height:32px;margin:-3px}
.sh-works-hub .sh-wm .sh-x-quickbooks{height:32px}
.sh-works-hub .sh-wm .sh-x-elevenlabs{height:17px}
.sh-works-hub .sh-wm .sh-x-twilio{height:25px}
.sh-tm{font-size:.55em;font-weight:600;vertical-align:super;line-height:0;margin-left:.08em}
.sh-wintro{padding:2px 0 12px;font-size:.92rem;line-height:1.45;color:var(--ink,#241c15);font-weight:500}
.sh-wg ul > li.sh-wintro + li{border-top:1px solid var(--line-l,#e3dccf)}
.sh-wmore{margin:4px 0 14px;font-size:1rem}

/* ------------------------------------------------------------------ #pile */
.hb{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.hb + .sh-works{border-top:1px solid var(--line-l,#e3dccf)}
.hb .sec-h h2{max-width:22ch}
.hb-fig{margin:0}
.hb-board{--seam:#241b14;--g:6px;--kd:24px;--rp:40px;position:relative;overflow:hidden;overflow:clip;background:var(--seam);border-radius:18px;padding:clamp(10px,1.5vw,20px);
  background-image:radial-gradient(120% 90% at 50% 45%,rgba(255,226,180,.07),rgba(0,0,0,0) 60%);
  box-shadow:0 40px 70px -40px rgba(36,28,21,.6),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(0,0,0,.4)}
.hb-floor{position:relative;display:grid;gap:var(--g)}
.hb-pieces{display:contents;list-style:none;margin:0;padding:0}

/* the medallion: one lockup (the emblem over its name), centered on the medallion, which is centered on the floor */
.hb-med{position:relative;z-index:1;display:grid;place-items:center;border-radius:4px;background:#fbf8f2;
  box-shadow:inset 0 0 0 8px var(--oak-light,#dfc7a3),inset 0 0 0 10px #8e6c45,inset 0 0 0 11px var(--seam),inset 0 0 0 14px #fbf8f2,
    inset 0 2px 0 15px rgba(255,255,255,.6),0 2px 0 rgba(0,0,0,.35)}
.hb-lock{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:-4px}   /* the fan is heavier than the name: a touch up */
.hb-emb{display:block;width:clamp(96px,11vw,150px)}
.hb-emb img{display:block;width:100%;height:auto}
.hb-wm{display:block;font:800 clamp(1rem,.8rem + .5vw,1.2rem)/1 var(--fd,'Bricolage Grotesque',system-ui,sans-serif);letter-spacing:-.02em;color:var(--ink,#241c15);text-align:center}
.hb-wm b{font-weight:800;color:#8e6c45}
.hb-med::after{content:"";position:absolute;inset:-2px;border-radius:6px;pointer-events:none;opacity:0}

/* a piece: a cut board in the emblem's colors, with a grain along its length, a micro bevel and a shadow on the subfloor */
.hb-p{--pc:#fff;--pt:var(--ink,#241c15);--gr:.05;--sh:.16;position:relative;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  padding:14px 16px 13px;border-radius:3px;color:var(--pt);background-color:var(--pc);
  background-image:linear-gradient(180deg,rgba(255,255,255,var(--sh)),rgba(255,255,255,0) 42%),
    repeating-linear-gradient(177deg,rgba(36,28,21,var(--gr)) 0 1px,transparent 1px 6px,rgba(36,28,21,calc(var(--gr) * .55)) 6px 7px,transparent 7px 16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.13),0 2px 0 rgba(0,0,0,.4)}
.hb-n{font:700 1.04rem/1.15 var(--fd,'Bricolage Grotesque',system-ui,sans-serif);letter-spacing:-.01em;text-wrap:balance}
.hb-l{font-size:.85rem;line-height:1.35;text-wrap:pretty}
.hb-s1{--pc:#F7972A}
.hb-s2{--pc:#C8361C;--pt:#fff;--sh:0;--gr:.07}
.hb-s3{--pc:#32B2E1}
.hb-s4{--pc:#296EB2;--pt:#fff;--sh:0;--gr:.07}
.hb-oak{--pc:#c9a87c}
.hb-white{--pc:#fff;--gr:.016;--sh:0;justify-content:space-between}
.hb-marks{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:8px}
.hb-marks img{display:block;width:auto;height:24px}
.hb-marks .sh-x[class*="sh-x-g-"]{height:30px;margin:-3px}
.hb-marks .sh-x-quickbooks{height:28px}
.hb-marks .sh-x-twilio{height:21px}
.hb-marks .sh-x-elevenlabs{height:14px}
/* the names under the marks: each name whole, a dot in front of every name; each name is pulled 13 px left into the one before,
   so the dot of the first name on any line falls outside the box and is clipped: no line ever starts or ends with a dot */
.hb-names{flex:none;display:flex;flex-wrap:wrap;margin:4px 0 0;padding-bottom:1px;overflow:hidden;font:500 .72rem/1.3 var(--fb,'Instrument Sans',system-ui,sans-serif);color:var(--muted,#6b5c49)}
.hb-names span{position:relative;margin:0 13px 0 -13px;padding-left:13px;white-space:nowrap}
.hb-names span::before{content:"\00B7";content:"\00B7" / "";position:absolute;left:5px;top:0}
.hb-p.is-cust .hb-n{font-size:clamp(1.7rem,1.2rem + 1.3vw,2.4rem);font-weight:800;letter-spacing:-.025em;line-height:1}
.hb-p.is-cust .hb-l{font-size:1rem;margin-top:5px;max-width:34ch}
.hb-p.is-open{background:none;box-shadow:none;border:2px dashed rgba(223,199,163,.45);padding:0}
.hb-go{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 14px;color:var(--oak-light,#dfc7a3);text-decoration:none;border-radius:2px}
.hb-go .hb-n{font-weight:600;font-size:.98rem;display:flex;align-items:center;gap:.45rem}
.hb-go .hb-n::before{content:"+";font:500 1.25rem/1 var(--fm,'IBM Plex Mono',monospace);color:var(--s1,#F7972A)}
.hb-go .hb-l{color:#fff;text-decoration:underline;text-decoration-color:rgba(223,199,163,.6);text-underline-offset:3px}
@media (hover:hover){.hb-go:hover{background:rgba(255,255,255,.05)}.hb-go:hover .hb-l{text-decoration-color:var(--s1,#F7972A)}}
.hb-go:focus-visible{outline:3px solid var(--s3,#32B2E1);outline-offset:2px}

/* the click. A tab: a neck across the seam and a round head set into the next piece, the seam running around it like a cut.
   The head sits 3 px into the gap, so its seam ring never touches its own piece. A piece (or the medallion) gives a tab into
   whatever sits right after it in the row; the customer gives its tab up into the medallion on narrow screens. */
.hb-tab::after,.hb-mk::after{content:"";position:absolute;z-index:2;top:50%;right:calc(-1 * (var(--g) + var(--kd) - 3px));width:var(--kd);height:var(--kd);
  margin-top:calc(var(--kd) / -2);border-radius:50%;background:var(--pc);
  box-shadow:0 0 0 3px var(--seam),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.12)}
.hb-tab::before,.hb-mk::before{content:"";position:absolute;z-index:3;top:50%;left:calc(100% - 3px);width:calc(var(--g) + 13px);height:12px;margin-top:-6px;background:var(--pc)}
.hb-mk{--pc:#fbf8f2;position:absolute;z-index:2;right:0;width:0;height:0;display:none}
.hb-mk::before{left:-3px}
.hb-mk::after{right:calc(-1 * (var(--g) + var(--kd) - 3px))}
.hb-p.hb-tab-in{padding-left:var(--rp)}

.hb-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:1.1rem}
.hb-again{appearance:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-b,rgba(36,28,21,.18));background:#fff;color:var(--ink,#241c15);font:600 .92rem/1 var(--fb,'Instrument Sans',system-ui,sans-serif)}
.hb-again::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s1,#F7972A);box-shadow:10px 0 0 var(--s2,#EF4C2D),20px 0 0 var(--s3,#32B2E1),30px 0 0 var(--s4,#296EB2);margin-right:30px}
@media (hover:hover){.hb-again:hover{border-color:var(--ink,#241c15)}}
.hb-again:active{background:var(--paper-2,#efe9df)}
.hb-again[aria-busy=true]{opacity:.6;cursor:progress}
.hb-fine{font-size:.8rem;line-height:1.5;color:var(--muted,#6b5c49);max-width:62ch}

/* ------------------------------------------------------------------ wide: twelve slots on 24 columns. The medallion takes
   columns 10 to 15, the exact middle, over rows 2 and 3. The customer is always the long piece against it on the left; the
   open piece always the small slot at the right of row 3. Rows are a fixed height, so a shuffle never moves the board. */
@media (min-width:1100px){
  .hb-floor{grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:repeat(4,136px)}
  .hb-med{grid-area:2/10/4/16}
  .hb-p:nth-child(1){grid-area:2/1/3/10}
  .hb-p:nth-child(2){grid-area:1/1/2/6}
  .hb-p:nth-child(3){grid-area:1/6/2/12}
  .hb-p:nth-child(4){grid-area:1/12/2/19}
  .hb-p:nth-child(5){grid-area:1/19/2/25}
  .hb-p:nth-child(6){grid-area:2/16/3/25}
  .hb-p:nth-child(7){grid-area:3/1/4/10}
  .hb-p:nth-child(8){grid-area:3/16/4/21}
  .hb-p:nth-child(12){grid-area:3/21/4/25}
  .hb-p:nth-child(9){grid-area:4/1/5/8}
  .hb-p:nth-child(10){grid-area:4/8/5/17}
  .hb-p:nth-child(11){grid-area:4/17/5/25}
  .hb-p:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10))::after{
    content:"";position:absolute;z-index:2;top:50%;right:calc(-1 * (var(--g) + var(--kd) - 3px));width:var(--kd);height:var(--kd);margin-top:calc(var(--kd) / -2);
    border-radius:50%;background:var(--pc);box-shadow:0 0 0 3px var(--seam),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.12)}
  .hb-p:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10))::before{
    content:"";position:absolute;z-index:3;top:50%;left:calc(100% - 3px);width:calc(var(--g) + 13px);height:12px;margin-top:-6px;background:var(--pc)}
  .hb-p:is(:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(8),:nth-child(10),:nth-child(11)){padding-left:var(--rp)}
  .hb-p:nth-child(12) .hb-go{padding-left:calc(var(--rp) - 2px)}
  /* the medallion's own tabs, out into the pieces on its right: rows 2 and 3 */
  .hb-mk{display:block}
  .hb-mk-a{top:calc((100% - var(--g)) / 4)}
  .hb-mk-b{top:calc(75% + var(--g) / 4)}
}

/* ------------------------------------------------------------------ narrow: the medallion on top, the customer under it
   clicking up into it, then pairs of pieces with staggered seams and the logo pieces whole. hub.js orders them and sets the
   pairs' widths and tabs; without it, plain pairs. */
@media (max-width:1099px){
  .hb-board{--rp:34px}
  .hb-floor{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(116px,auto);grid-auto-flow:row dense}
  .hb-med{grid-column:1/-1;order:-2;justify-self:center;width:min(220px,48%);aspect-ratio:1/1}
  .hb-p{grid-column:span 6}
  .hb-p.is-logo,.hb-p.is-cust{grid-column:1/-1}
  .hb-p.is-cust{order:-1;min-height:124px}
  .hb-floor.hb-nar .hb-p.w7{grid-column:span 7}
  .hb-floor.hb-nar .hb-p.w5{grid-column:span 5}
  .hb-floor.hb-nar .hb-p.w6{grid-column:span 6}
  .hb-p.is-cust::after{content:"";position:absolute;z-index:2;left:50%;bottom:calc(100% + 3px);width:var(--kd);height:var(--kd);margin-left:calc(var(--kd) / -2);
    border-radius:50%;background:var(--pc);box-shadow:0 0 0 3px var(--seam),inset 0 1px 0 rgba(255,255,255,.3)}
  .hb-p.is-cust::before{content:"";position:absolute;z-index:3;left:50%;bottom:calc(100% - 3px);width:12px;height:calc(var(--g) + 13px);margin-left:-6px;background:var(--pc)}
}
/* a phone held sideways: the small medallion, so the pieces show sooner */
@media (max-width:1099px) and (max-height:480px){.hb-med{width:150px}.hb-emb{width:88px}.hb-lock{gap:7px}}

/* tablet: a whole-width logo piece puts its words on the left and its marks on the right, so the row is full, not half empty */
@media (min-width:700px) and (max-width:1099px){
  .hb-p.is-logo{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n m" "l nm";column-gap:28px;row-gap:4px;align-content:center}
  .hb-p.is-logo .hb-n{grid-area:n;align-self:end}
  .hb-p.is-logo .hb-l{grid-area:l;align-self:start}
  .hb-p.is-logo .hb-marks{grid-area:m;margin:0;justify-self:end;align-self:end}
  .hb-p.is-logo .hb-names{grid-area:nm;margin:0;justify-self:end;align-self:start}
}
@media (max-width:560px){
  .hb-board{--g:5px;--kd:20px;--rp:30px;border-radius:14px}
  .hb-floor{grid-auto-rows:minmax(118px,auto)}
  .hb-med{width:150px}
  .hb-emb{width:88px}
  .hb-lock{gap:7px}
  .hb-p{padding:12px 12px 11px}
  .hb-n{font-size:.98rem}
  .hb-l{font-size:.8rem}
  .hb-marks{gap:9px 11px}
  .hb-marks img{height:20px}
  .hb-marks .sh-x[class*="sh-x-g-"]{height:26px}
  .hb-marks .sh-x-quickbooks{height:24px}
  .hb-marks .sh-x-twilio{height:18px}
  .hb-marks .sh-x-elevenlabs{height:12px}
  .hb-cap{gap:.7rem}
}

/* ------------------------------------------------------------------ motion (hub.js adds .hb-js only when motion is welcome;
   without it the floor is simply laid, every tab in place). The pieces start as a heap behind the medallion and fly to their
   places with a little settle; once a piece lands its tab clicks in (a pop and a ring of light along the seam), and when the
   last one is down the medallion glows once. */
.hb-js .hb-p{transition:transform .95s cubic-bezier(.22,1.06,.36,1) var(--d,0ms),box-shadow .8s ease var(--d,0ms)}
.hb-js:not(.is-laid) .hb-p{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg)) scale(.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.13),0 18px 30px -6px rgba(0,0,0,.55)}
.hb-js .hb-p::before{transition:opacity .15s ease calc(var(--d,0ms) + 820ms)}
.hb-js:not(.is-laid) .hb-p::before,.hb-js:not(.is-laid) .hb-p::after,.hb-js:not(.is-laid) .hb-mk{opacity:0;transition-delay:0ms}
.hb-js.is-laid .hb-p::after{animation:hbClick .55s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + 800ms) both}
.hb-js .hb-mk{transition:opacity .2s ease var(--md,1.3s)}
.hb-js.is-laid .hb-mk::after{animation:hbClick .55s cubic-bezier(.3,1.5,.5,1) var(--md,1.3s) both}
.hb-js.is-laid .hb-med::after{animation:hbGlow 1.6s ease var(--dl,2.2s) both}
.hb-js.no-tr .hb-p,.hb-js.no-tr .hb-p::before,.hb-js.no-tr .hb-mk{transition:none!important}
.hb-js.is-set .hb-p::after,.hb-js.is-set .hb-mk::after,.hb-js.is-set .hb-med::after{animation:none!important}
@keyframes hbClick{
  0%{opacity:0;transform:scale(.35);box-shadow:0 0 0 3px var(--seam),0 0 0 3px rgba(255,214,150,0)}
  55%{opacity:1;transform:scale(1.14);box-shadow:0 0 0 3px var(--seam),0 0 0 8px rgba(255,214,150,.55)}
  100%{opacity:1;transform:scale(1);box-shadow:0 0 0 3px var(--seam),0 0 0 16px rgba(255,214,150,0)}
}
@keyframes hbGlow{
  0%{opacity:0;box-shadow:0 0 0 0 rgba(247,151,42,0)}
  30%{opacity:1;box-shadow:0 0 0 4px rgba(247,151,42,.55),0 0 26px 6px rgba(50,178,225,.28)}
  100%{opacity:0;box-shadow:0 0 0 14px rgba(247,151,42,0),0 0 40px 14px rgba(50,178,225,0)}
}
@media (prefers-reduced-motion:reduce){
  .hb-js .hb-p,.hb-js .hb-p::before,.hb-js .hb-mk{transition:none!important}
  .hb-js .hb-p::after,.hb-js .hb-mk::after,.hb-js .hb-med::after{animation:none!important}
}