/* Trust bento: Apple bento grid (hubeiqiao/apple-bento-grid, MIT), dark theme, made interactive.
   The grid tracks are CSS variables. The active card grows, and the others make room.
   Each card is a size container, so its visual scales with the card and fills it. */
.trust{padding-bottom:96px}
.bento-hint{margin:12px auto 0;text-align:center;color:var(--mut);font-size:15px;line-height:22px}

.bento{
  --c1:1fr;--c2:1fr;--c3:1fr;--r1:1fr;--r2:1fr;--r3:1fr;
  margin:40px auto 0;max-width:1080px;height:430px;
  display:grid;gap:6px;
  grid-template-columns:var(--c1) var(--c2) var(--c3);
  grid-template-rows:var(--r1) var(--r2);
  grid-template-areas:"free keys mit" "free ctrl ctrl";
  transition:grid-template-columns .62s cubic-bezier(.3,1.16,.5,1),grid-template-rows .62s cubic-bezier(.3,1.16,.5,1);
}
.bc-free{grid-area:free}.bc-keys{grid-area:keys}.bc-mit{grid-area:mit}.bc-ctrl{grid-area:ctrl}

.bc{
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--s:1;
  container-type:size;
  position:relative;overflow:hidden;border-radius:20px;min-width:0;min-height:0;
  background:linear-gradient(145deg,#171c19,#0c0f0d);
  border:1px solid rgba(255,255,255,.06);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition:transform .5s cubic-bezier(.34,1.4,.5,1),border-color .3s;
  cursor:pointer;outline:none;isolation:isolate;
}
.bc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(111,224,174,.12),transparent 55%)}
.bc::after{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 70%)}
.bc.on{border-color:rgba(111,224,174,.28)}
.bc.on::before,.bc:hover::before{opacity:1}
.bc:focus-visible{border-color:#6fe0ae}
.bc.press{--s:.97}

.bc-in{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;gap:6px}
.trust .bc h3{margin-top:auto;font-size:20px;line-height:26px;font-weight:500;color:#f5f5f7;letter-spacing:-.2px;max-width:360px}
.trust .bc p{color:var(--mut);font-size:16px;line-height:22px;max-width:360px;margin:0}
.bc code{font:400 14px/1 "xGeist Mono","Geist Mono",monospace;color:var(--soft);background:rgba(255,255,255,.07);padding:3px 7px;border-radius:7px}

/* $0 */
.bc-free{background:linear-gradient(150deg,#0b2218,#0a0e0c 70%)}
.bc-free::after{background:radial-gradient(circle,rgba(31,174,116,.22) 0%,transparent 70%);width:320px;height:320px;top:-80px;right:-80px}
.trust .bc .bk-num{display:block;flex:none;font-weight:600;letter-spacing:-.05em;line-height:.86;color:#f5f5f7;
  font-size:clamp(60px,min(46cqh,60cqw),250px);transform-origin:left top;transition:transform .7s cubic-bezier(.34,1.32,.5,1)}
.bk-n{display:inline-block;white-space:nowrap;transform-origin:left top;font-variant-numeric:tabular-nums}
.bc-free .bk-n{background:linear-gradient(180deg,#fff 30%,#6fe0ae);-webkit-background-clip:text;background-clip:text;color:transparent}
.bc.on .bk-num{transform:scale(1.04)}
.trust .bc .bk-num.sm{font-size:clamp(34px,min(25cqh,24cqw),110px)}

/* key */
.bk-key{display:block;flex:none;width:clamp(36px,min(34cqh,30cqw),130px);height:auto;aspect-ratio:1;color:#6fe0ae;
  transition:transform .7s cubic-bezier(.34,1.5,.5,1)}
.bc-keys.on .bk-key{transform:rotate(-35deg) translateX(4px)}

/* MIT code lines fill the middle */
.bk-code{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,2.6cqh,11px);margin:10px 0 6px}
.bk-code i{flex:none;display:block;height:clamp(5px,2.4cqh,10px);width:var(--w);border-radius:5px;background:rgba(255,255,255,.09);transform-origin:left;transition:background .4s}
.bc-mit.on .bk-code i{background:rgba(111,224,174,.38);animation:bk-line 2.4s cubic-bezier(.22,1,.36,1) var(--d) infinite}
@keyframes bk-line{0%{transform:scaleX(.2)}40%,100%{transform:scaleX(1)}}

/* control switch + notice */
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bk-sw{position:relative;flex:none;width:76px;height:44px;border-radius:999px;background:rgba(255,255,255,.12);border:0;padding:0;cursor:pointer;transition:background .35s}
.bk-sw span{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.bk-sw[aria-pressed=true]{background:#1fae74}
.bk-sw[aria-pressed=true] span{transform:translateX(32px)}
.trust .bc .bk-note{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--soft);font-size:14px;line-height:20px;max-width:none;white-space:nowrap;transition:background .3s,color .3s}
.bk-note b{width:7px;height:7px;border-radius:50%;background:#7d8480;transition:background .3s}
.bk-note .n-on{display:none}
.bc-ctrl.live .bk-note{background:rgba(31,174,116,.16);color:#f5f5f7}
.bc-ctrl.live .bk-note b{background:#6fe0ae;animation:bk-pulse 1.4s ease-in-out infinite}
.bc-ctrl.live .bk-note .n-on{display:inline}.bc-ctrl.live .bk-note .n-off{display:none}
@keyframes bk-pulse{50%{opacity:.35}}


@media(max-width:860px){
  .bento{height:600px;grid-template-columns:var(--c1) var(--c2);grid-template-rows:var(--r1) var(--r2) var(--r3);
    grid-template-areas:"free free" "keys mit" "ctrl ctrl"}
  .bc-in{padding:18px}
  .trust .bc h3{font-size:17px;line-height:22px}
  .bk-sw{width:64px;height:38px}.bk-sw span{width:30px;height:30px}.bk-sw[aria-pressed=true] span{transform:translateX(26px)}
}
@media(prefers-reduced-motion:reduce){
  .bento,.bc,.bk-num,.bk-key,.bk-code i,.bk-sw span{transition:none!important;animation:none!important}
}

/* v18d: state-based detail (no pops while resizing) */
.trust .bc h3{font-size:clamp(15px,8.5cqw,20px);line-height:1.3}
.bc .more{display:none}
.bc.on .more{display:block;animation:bk-in .45s cubic-bezier(.22,1,.36,1) .18s both}
@keyframes bk-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bk-code{justify-content:flex-start}
.bc-ctrl:not(.on):not(.live) .bk-note{opacity:.55}
.bc{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(hover:none){.bc{transform:scale(var(--s))}}

/* the countdown number is a span: undo the section-wide 16px span rule */
.trust .bc .bk-num .bk-n{font-size:inherit;line-height:inherit;letter-spacing:inherit}

/* v18e: gradient text was clipped to a tight box (line-height .86, letter-spacing -.05em).
   Give the glyphs room to paint, and stop the extra 1.04 scale on the counting number. */
.trust .bc .bk-num .bk-n{line-height:1.08;padding:.06em .1em .1em .02em;margin:-.06em -.1em -.1em -.02em}
.bc-free.on .bk-num{transform:none}

/* v19 smooth: the grid switches in one frame. bento.js glides each card (FLIP spring).
   Drop the CSS track transition and the tilt, so only GPU transforms animate. */
.bento{transition:none!important}
.bc{transform:none;transition:border-color .3s;will-change:transform;backface-visibility:hidden;transform-origin:0 0}
.bc-in{transform-origin:0 0;will-change:transform}
.bento.anim .bc::before,.bento.anim .bc::after{transition:none}
.bc.press{transform:none}
.bc-free.on .bk-num,.bc.on .bk-num{transform:none}
@media(hover:none){.bc{transform:none}}