/* Bento grid built from product captures. Uses tokens.css and components.css. */

.bx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }

/* ---------- Tile ---------- */
.bx-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line-200); border-radius: var(--radius-lg); background: linear-gradient(180deg, #ffffff06, transparent 160px), #131417; }
.bx-tile::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 1px 0 #ffffff0f; pointer-events: none; }
.bx-tile__copy { position: relative; z-index: 2; display: grid; align-content: start; justify-items: start; gap: 8px; max-width: 440px; padding: 28px 28px 0; }
.bx-tile__kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; color: var(--ink-300); font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.bx-tile__kicker::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
.bx-tile h3 { color: var(--ink-050); font: 450 19px/1.3 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.bx-tile__text { color: var(--ink-300); font: 400 14px/1.55 var(--font-sans); text-wrap: pretty; }
.bx-tile__copy .b-link { margin-top: 8px; }
.bx-tile__stage { position: relative; flex: 1; min-height: 0; margin-top: 24px; }
.bx-tile__body { margin-top: auto; padding: 24px 28px 28px; }
.bx-tile--fade .bx-tile__stage { -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent); mask-image: linear-gradient(#000 calc(100% - 96px), transparent); }
.bx-tile--compact .bx-tile__text, .bx-tile--compact .bx-merge { display: none; }
.bx-tile--compact .bx-tile__body { padding-top: 16px; }

/* ---------- Shots ---------- */
.bx-shot { position: absolute; top: 0; left: 24px; right: 24px; margin: 0; overflow: hidden; border-radius: 10px; background: var(--bg-000); box-shadow: 0 0 0 1px var(--line-300), 0 24px 60px -20px #000000d9, 0 2px 6px #00000066; transition: transform 500ms var(--ease-out); }
.bx-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 #ffffff14; pointer-events: none; }
.bx-shot img { display: block; width: 100%; height: auto; }
.bx-shot--window { left: 28px; right: -40px; }
.bx-shot--pad { padding: 16px; background: var(--card); }
.bx-shot__bar { display: grid; grid-template-columns: 1fr minmax(0, 300px) 1fr; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line-300); background: #1c1d21; }
.bx-shot__dots { display: flex; gap: 6px; }
.bx-shot__dots i { width: 10px; height: 10px; border-radius: 50%; background: #3f4146; }
.bx-shot__url { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 20px; padding: 0 10px; overflow: hidden; border: 1px solid #2c2e33; border-radius: var(--radius-sm); background: var(--bg-100); color: var(--ink-300); font: 400 11px/1 var(--font-mono); white-space: nowrap; }
.bx-shot__url .b-icon { width: 10px; height: 10px; flex: none; color: var(--ink-400); stroke-width: 2.2; }
.bx-tile--shot:hover .bx-shot { transform: translateY(-4px); }
/* Cards that fit sit in the flow, so the tile grows to hold them */
.bx-tile:not(.bx-tile--fade) .bx-shot--card { position: relative; left: auto; right: auto; margin: 0 24px 24px; }

/* Split: copy on the left, the screen beside it with almost no crop */
.bx-tile--split { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.bx-tile--split .bx-tile__copy { align-self: center; padding: 0 24px 0 40px; }
.bx-tile--split .bx-tile__stage { margin: 40px 0 0; }
.bx-tile--split .bx-shot--window { left: 0; right: 40px; }

/* ---------- Blocks ---------- */
.bx-mod { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-200); }
.bx-mod li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line-200); }
.bx-mod__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--bg-050); color: var(--ink-200); }
.bx-mod__icon .b-icon { width: 15px; height: 15px; stroke-width: 1.7; }
.bx-mod b { color: var(--ink-050); font: 450 14px/1.25 var(--font-sans); }
.bx-mod li > span:last-child { color: var(--ink-300); font: 400 13px/1.3 var(--font-sans); }

.bx-meter { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.bx-meter li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 8px; }
.bx-meter span { color: var(--ink-200); font: 400 13px/1.3 var(--font-sans); }
.bx-meter b { color: var(--ink-050); font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.bx-meter i { grid-column: 1 / -1; height: 2px; background: linear-gradient(var(--signal), var(--signal)) 0 0 / var(--w) 100% no-repeat, var(--line-200); }

.bx-checks { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-050); }
.bx-checks li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 36px; padding: 0 12px; }
.bx-checks li + li { border-top: 1px solid var(--line-200); }
.bx-checks .b-icon { width: 13px; height: 13px; stroke-width: 2; color: var(--status-verified); }
.bx-checks code { overflow: hidden; color: var(--ink-100); font: 400 12px/1 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.bx-checks small { color: var(--ink-300); font: 400 12px/1 var(--font-sans); }
.bx-checks [data-fail] .b-icon, .bx-checks [data-fail] small { color: var(--status-critical); }
.bx-checks [data-fail] code { color: var(--ink-050); }
.bx-merge { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--signal-edge); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--signal) 7%, var(--bg-050)); }
.bx-merge b { display: block; color: var(--ink-050); font: 450 13px/1.3 var(--font-sans); }
.bx-merge small { display: block; margin-top: 2px; color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); }
.bx-chips { gap: 8px; }

/* ---------- Combinations ---------- */
.bx-grid--overview { grid-template-rows: 300px 300px 360px 360px; grid-template-areas:
  "home home home home home home home home find find find find"
  "home home home home home home home home find find find find"
  "runs runs runs runs runs runs runs runs std std std std"
  "brief brief brief brief autom autom autom autom ask ask ask ask"; }
.bx-grid--index { grid-template-rows: 320px 320px 380px; grid-template-areas:
  "idx idx idx idx inv inv inv inv inv inv inv inv"
  "idx idx idx idx inv inv inv inv inv inv inv inv"
  "ev ev ev ev pr pr pr pr rep rep rep rep"; }
.bx-grid--stack { grid-template-rows: 216px 216px 216px 380px; grid-template-areas:
  "home home home home home home home std std std std std"
  "home home home home home home home pr pr pr pr pr"
  "home home home home home home home int int int int int"
  "find find find find brief brief brief brief ask ask ask ask"; }
.bx-grid--spot { grid-template-rows: 600px 380px; grid-template-areas:
  "home home home home home home home home home home home home"
  "find find find find brief brief brief brief scope scope scope scope"; }

@media (max-width: 1100px) {
  .bx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none !important; grid-template-areas: none !important; grid-auto-rows: minmax(400px, auto); grid-auto-flow: dense; }
  .bx-tile { grid-area: auto !important; }
  .bx-tile--wide { grid-column: span 2 !important; }
  .bx-tile--wide.bx-tile--fade { min-height: 520px; }
  .bx-grid--overview > :last-child, .bx-grid--spot > :last-child { grid-column: span 2 !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .bx-grid--overview > :last-child .bx-tile__copy, .bx-grid--spot > :last-child .bx-tile__copy { align-self: center; padding-bottom: 28px; }
  .bx-grid--overview > :last-child .bx-tile__stage, .bx-grid--spot > :last-child .bx-tile__stage { margin-top: 28px; }
  .bx-tile--split { display: flex; }
  .bx-tile--split .bx-tile__copy { align-self: stretch; padding: 28px 28px 0; }
  .bx-tile--split .bx-tile__stage { margin: 24px 0 0; }
  .bx-tile--split .bx-shot--window { left: 28px; right: -40px; }
  .bx-tile--compact .bx-tile__text { display: block; }
}
@media (max-width: 700px) {
  .bx-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  .bx-tile--wide { grid-column: auto !important; }
  .bx-tile--fade { min-height: 420px; }
  .bx-grid--overview > :last-child, .bx-grid--spot > :last-child { grid-column: auto !important; display: flex; }
  .bx-grid--overview > :last-child .bx-tile__copy, .bx-grid--spot > :last-child .bx-tile__copy { align-self: stretch; padding-bottom: 0; }
  .bx-grid--overview > :last-child .bx-tile__stage, .bx-grid--spot > :last-child .bx-tile__stage { margin-top: 24px; }
  .bx-tile__copy { padding: 24px 24px 0; }
  .bx-tile__body { padding: 20px 24px 24px; }
  .bx-shot { left: 20px; right: 20px; }
  .bx-tile:not(.bx-tile--fade) .bx-shot--card { margin: 0 20px 20px; }
  .bx-shot--window, .bx-tile--split .bx-shot--window { left: 20px; right: -120px; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-shot { transition: none; }
}

/* Explorations page: lay each candidate out as it sits on the landing page */
.s-item__demo .v2-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.s-item__demo .v2-section > * { min-width: 0; }