/* The five-levels band. Loaded only on pages that carry it (homepage EN + AR),
 * so it never forces a ?v bump on the other 100 pages (L-WEB-037).
 *
 * Grammar mirrors the five-levels creative on a dark ground: cards in a row,
 * layer pips filling left to right, the command shrinking as the body fills,
 * L4 and L5 command boxes in the Claude hue. Logical properties throughout so
 * ar/index.html needs no extra rules.
 *
 * minmax(0,1fr) tracks, never bare 1fr: a grid item's automatic minimum is its
 * min-content contribution, and a long unbroken command string could otherwise
 * blow the row out to a horizontal scrollbar. */

.fv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .fv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }

.fv-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px;
  background: var(--card-deep, #020617); border: 1px solid var(--border-dark, #1f2937);
  border-block-start: 2px solid var(--claude, #d97757);
  transition: transform .2s ease, border-color .2s ease; }
.fv-card:hover { transform: translateY(-4px); border-color: rgba(217, 119, 87, .55); }

.fv-top { display: flex; align-items: center; gap: 8px; }
.fv-n { font-size: 12px; font-weight: 800; color: var(--claude, #d97757); letter-spacing: .06em; }
.fv-name { font-size: 15.5px; font-weight: 700; color: var(--text, #fff); }
.fv-pips { display: flex; gap: 3px; margin-inline-start: auto; }
.fv-pip { inline-size: 7px; block-size: 7px; border-radius: 2px; background: #23232a; }
.fv-pip.on { background: var(--p); }

.fv-desc { margin: 0; font-size: 13px; color: var(--text-muted, #cbd5e1); line-height: 1.55;
  min-block-size: 3.2em; }

.fv-lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim, #94a3b8); }
.fv-cmd { display: flex; align-items: center; min-block-size: 92px; padding: 10px 12px;
  background: #0b0b0b; border: 1px solid var(--border-dark, #1f2937); border-radius: 8px; }
.fv-cmd .fv-q { font-size: 12px; line-height: 1.55; color: var(--text-muted, #cbd5e1);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* L4 and L5: the command box goes Claude, matching the creative's orange order box. */
.fv-hot .fv-cmd { background: var(--claude, #d97757); border-color: var(--claude, #d97757); }
.fv-hot .fv-cmd .fv-q { color: #0b0b0b; font-weight: 700; font-size: 14px; }
.fv-clen { font-size: 11.5px; font-weight: 700; color: var(--claude, #d97757); text-align: center; }

.fv-bot { display: flex; justify-content: center; padding-block: 4px; }
.fv-bot svg { inline-size: min(150px, 70%); block-size: auto; }

.fv-res { padding: 10px 12px; background: rgba(217, 119, 87, .07);
  border: 1px solid rgba(217, 119, 87, .22); border-radius: 8px; }
.fv-res-t { font-size: 12.5px; font-weight: 700; color: var(--text, #fff); line-height: 1.45; }

.fv-cta { margin-block-start: auto; padding-block-start: 10px; font-size: 12px; font-weight: 600;
  color: var(--claude, #d97757); text-decoration: none; border-block-start: 1px solid var(--border-dark, #1f2937); }
.fv-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.fv-cta:focus-visible { outline: 2px solid var(--claude, #d97757); outline-offset: 2px; }

.fv-punch { margin: 26px auto 0; max-inline-size: 640px; text-align: center;
  font-size: clamp(15px, 2vw, 17.5px); font-weight: 700; color: var(--text, #fff); line-height: 1.5; }