/* Feature bento — The Align.
   Structure ported from a shadcn/Tailwind card grid: a 6-column bento of
   mixed spans, each card carrying its own inline illustration. Rebuilt on the
   site's own tokens so it inherits the brand instead of shadcn defaults. */

.bento {
  display: grid;
  margin-top: 42px;
  gap: 14px;
  grid-template-columns: repeat(6, 1fr);
}
.bento-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  transition: border-color .28s ease, transform .38s var(--ease), box-shadow .38s var(--ease);
}
.bento-card:hover { border-color: rgba(106,63,224,.34); transform: translateY(-5px); box-shadow: 0 18px 40px rgba(21,18,33,.07); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card.split { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; align-items: center; }

.bento-eyebrow { margin: 0 0 auto; color: var(--violet-dark); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bento-card:not(.split) h3 { margin-top: auto; }
.bento-card h3 { margin: 22px 0 6px; font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; }
.bento-card p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }

/* the big-figure card: a hand-drawn stroke under the number */
.bento-figure { position: relative; display: flex; height: 96px; align-items: center; justify-content: center; margin-top: 18px; }
.bento-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(106,63,224,.16); }
.bento-figure strong { position: relative; font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 500; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }

/* the ringed icon used by the compact cards */
.bento-ring { position: relative; display: grid; width: 52px; height: 52px; place-items: center; margin-top: 20px; border: 1px solid var(--line); border-radius: 50%; }
.bento-ring::before { position: absolute; inset: -7px; border: 1px solid rgba(21,18,33,.07); border-radius: 50%; content: ""; }
.bento-ring svg { width: 22px; height: 22px; color: var(--violet); }

/* a small mock of the device readout */
.bento-screen { display: grid; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--ink); gap: 8px; }
.bento-screen .scr-top { display: flex; align-items: center; justify-content: space-between; color: #8E8799; font-size: .55rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bento-screen .scr-val { color: #F1EEF8; font-size: 1.9rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.bento-screen .scr-val span { color: #8E8799; font-size: .7rem; font-weight: 400; letter-spacing: 0; }
.bento-screen .scr-bar { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); }
.bento-screen .scr-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 999px; background: var(--violet); }

/* alert card: LED dots over a waveform */
.bento-alert { display: grid; gap: 14px; }
.bento-leds { display: flex; gap: 7px; }
.bento-leds i { width: 9px; height: 9px; border-radius: 50%; background: rgba(21,18,33,.13); }
.bento-leds i:nth-child(1) { background: var(--violet); }
.bento-leds i:nth-child(2) { background: rgba(106,63,224,.55); }
.bento-wave { width: 100%; height: 54px; color: var(--violet); }

/* fit card: the clamp diagram */
.bento-fit { display: flex; height: 100%; min-height: 150px; align-items: center; justify-content: center; }
.bento-fit picture { display: block; width: 100%; max-width: 320px; }
.bento-fit img { width: 100%; height: auto; border-radius: 14px; }

.bento-coverage { display: grid; overflow: hidden; border-radius: 14px; background: var(--ink); grid-template-columns: repeat(3, 1fr); }
.bento-coverage div { padding: 18px 10px; text-align: center; }
.bento-coverage div + div { border-left: 1px solid rgba(255,255,255,.15); }
.bento-coverage strong { display: block; color: #CFC4FF; font-size: 1.32rem; font-weight: 500; letter-spacing: -.03em; }
.bento-coverage span { display: block; margin-top: 2px; color: #D8D3E0; font-size: .72rem; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.span-2, .bento-card.span-3 { grid-column: span 1; }
  .bento-card.span-6 { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card.span-2, .bento-card.span-3, .bento-card.span-6 { grid-column: span 1; }
  .bento-card.split { grid-template-columns: 1fr; gap: 20px; }
  .bento-coverage { grid-template-columns: 1fr; }
  .bento-coverage div + div { border-top: 1px solid rgba(255,255,255,.15); border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-card:hover { transform: none; }
}