/* ==========================================================================
   Features — a boxy bento grid. Keywords and ticks, no paragraphs.
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.box {
  position: relative; overflow: hidden;
  grid-column: span 3;
  border: 1px solid transparent;
  background: linear-gradient(var(--surf-1), var(--surf-1)) padding-box, var(--edge-soft) border-box;
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 186px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, box-shadow .22s;
}
.box:hover {
  transform: translateY(-4px);
  background: linear-gradient(var(--surf-1), var(--surf-1)) padding-box, var(--edge) border-box;
  box-shadow: 0 18px 42px -24px var(--accent-glow), 0 8px 22px -16px var(--red-glow);
}
.box.w4 { grid-column: span 4; }
.box.w6 { grid-column: span 6; }
.box.w8 { grid-column: span 8; }
.box.w12 { grid-column: span 12; }
.box.tall { min-height: 268px; }

.box.hot {
  background:
    linear-gradient(150deg, rgba(124,58,237,.13), rgba(225,29,72,.08) 70%, transparent) padding-box,
    linear-gradient(var(--surf-1), var(--surf-1)) padding-box,
    var(--edge) border-box;
}
.box.hot .box-num {
  background: var(--edge); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Accent boxes stay white. The colour lives on the boundary and in the
   highlights inside — never as a filled background. */
.box.invert {
  background:
    linear-gradient(150deg, rgba(225,29,72,.09), rgba(124,58,237,.05) 70%, transparent) padding-box,
    linear-gradient(var(--surf-1), var(--surf-1)) padding-box,
    var(--edge) border-box;
}
.box.invert .box-title, .box.invert .box-num {
  background: var(--edge); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.box.invert .key.on, .box.coral .key.on { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 1px rgba(225,29,72,.28); }

.box.coral {
  background:
    linear-gradient(140deg, rgba(124,58,237,.1), rgba(225,29,72,.07)) padding-box,
    linear-gradient(var(--surf-1), var(--surf-1)) padding-box,
    var(--edge) border-box;
}
.box.coral .box-title, .box.coral .box-num {
  background: var(--edge); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.box-ico { font-size: 26px; line-height: 1; }
.box-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.02; margin: 0;
}
.box-sub { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.box-num {
  font-family: var(--display); font-weight: 800; letter-spacing: -.05em;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: .9;
}

.keys { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.key {
  font-size: 12px; font-weight: 600; letter-spacing: -.01em;
  padding: 6px 11px; border-radius: 9px;
  background: var(--surf-3); color: var(--fg-2);
  white-space: nowrap;
}
.key.on { background: var(--accent-soft); color: var(--accent-700); box-shadow: inset 0 0 0 1px rgba(124,58,237,.3); }

/* ---- methodologies: one continuously running deck ------------------------
   The track holds the cards twice and slides exactly half its width, so the
   loop is seamless. It pauses on hover and for anyone who prefers less
   motion, and the rail can still be dragged or scrolled by hand.           */
.deck-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  cursor: grab;
}
.deck-rail::-webkit-scrollbar { display: none; }
.deck-rail.dragging { cursor: grabbing; }

.deck-track {
  display: flex; gap: 16px; width: max-content;
  animation: run 46s linear infinite;
}
.deck-rail:hover .deck-track,
.deck-rail.dragging .deck-track { animation-play-state: paused; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .deck-track { animation: none; } }

.method {
  flex: 0 0 288px;
  border: 1px solid transparent;
  background: linear-gradient(var(--surf-1), var(--surf-1)) padding-box, var(--edge-soft) border-box;
  border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .2s;
}
.method:hover {
  transform: translateY(-5px);
  background: linear-gradient(var(--surf-1), var(--surf-1)) padding-box, var(--edge) border-box;
  box-shadow: 0 20px 44px -24px var(--accent-glow), 0 8px 22px -16px var(--red-glow);
}
.method-head { display: flex; align-items: center; gap: 12px; }
.method-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 22px; flex: none;
  background: linear-gradient(140deg, var(--accent-soft), var(--red-soft));
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.2);
}
.method-name { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.method-tag {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  background: var(--edge); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.method-for { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.method-for span { font-size: 11px; color: var(--fg-3); }
.method-for span::before { content: "\2192 "; color: var(--red); }

.deck-hint {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 16px; font-size: 12px; color: var(--fg-3);
}

/* ---- capability matrix: ticks only ---- */
.matrix-wrap {
  overflow-x: auto; border-radius: var(--r-lg); border: 1px solid transparent;
  background: linear-gradient(var(--surf-1), var(--surf-1)) padding-box, var(--edge-soft) border-box;
}
table.matrix { width: 100%; border-collapse: collapse; min-width: 640px; }
table.matrix th, table.matrix td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line-soft); }
table.matrix thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2); background: var(--surf-2); white-space: nowrap;
}
table.matrix tbody th {
  text-align: left; font-size: 14px; font-weight: 650; color: var(--fg);
  white-space: nowrap; background: var(--surf-1);
}
table.matrix tbody tr:last-child th, table.matrix tbody tr:last-child td { border-bottom: none; }
table.matrix tbody tr:hover td, table.matrix tbody tr:hover th { background: var(--accent-soft); }
.tick { color: var(--accent); font-size: 17px; font-weight: 800; }
.tick.red { color: var(--red); }
.tick.soft { color: var(--fg-3); font-size: 14px; }
.dash { color: rgba(17,16,26,.16); }

@media (max-width: 1000px) {
  .box { grid-column: span 6; }
  .box.w4, .box.w8 { grid-column: span 6; }
  .box.w12 { grid-column: span 12; }
}
@media (max-width: 620px) {
  .box, .box.w4, .box.w6, .box.w8, .box.w12 { grid-column: span 12; min-height: 0; }
  .box.tall { min-height: 0; }
}

/* ==========================================================================
   Member card, built from the same boxes as the features grid
   ========================================================================== */
.box-face {
  width: 92px; height: 92px; border-radius: 24px; overflow: hidden; flex: none;
  display: grid; place-items: center; font-family: var(--display);
  font-weight: 800; font-size: 38px; color: var(--fg);
  background: linear-gradient(140deg, var(--accent), var(--accent-900));
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.9);
}
.box-face img { width: 100%; height: 100%; object-fit: cover; }

.box-row { display: flex; align-items: center; gap: 18px; }
.box-delta { font-family: var(--mono); font-size: 13px; }
.box-delta.up { color: var(--green); }
.box-delta.down { color: #fca5a5; }

/* compact lift list inside a box */
.box-lifts { display: grid; gap: 11px; margin-top: auto; width: 100%; }
.box-lift { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.box-lift b { font-size: 13.5px; font-weight: 650; }
.box-lift span { font-family: var(--mono); font-size: 12.5px; color: var(--fg-2); }
.box-lift i {
  grid-column: 1 / -1; height: 4px; border-radius: 99px;
  background: var(--surf-3); display: block; position: relative; overflow: hidden;
}
.box-lift i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  background: var(--edge); border-radius: 99px;
}
.box.invert .box-lift i { background: var(--surf-3); }
.box.invert .box-lift span { color: var(--fg-2); }

.box-strip { display: flex; height: 8px; border-radius: 99px; overflow: hidden; width: 100%; }
.box-strip div { opacity: .85; }
.box-scale { position: relative; width: 100%; }
.box-mark { position: absolute; top: -4px; transform: translateX(-50%); }
.box-mark i { display: block; width: 4px; height: 16px; border-radius: 3px;
              background: var(--fg); box-shadow: 0 0 0 2px var(--surf-1); }
.box.invert .box-mark i { background: var(--fg); box-shadow: 0 0 0 2px var(--surf-1); }