/* ============================================================
   ShortList landing — Lab grid: the routine steps (4 across) and the
   verdict cards (3 across). Ported from concepts/landing-lab-grid.
   Used by index.html and sensitive-skin.html. Values from tokens.css.
   ============================================================ */

/* ---------- steps ---------- */
.steps { list-style: none; display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.step { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 16px 16px 20px; position: relative; box-shadow: inset 0 6px 0 var(--a); }
.step-n { display: inline-block; font: 800 16px/1 'Gabarito', sans-serif; color: #fff; background: var(--a); padding: 5px 7px; margin: 6px 0 12px; }
.step h3 { font: 700 19px/1.2 'Barlow', sans-serif; margin: 0 0 8px; }
.step p { font-size: 15px; line-height: 1.5; }
.ticks { list-style: none; margin-top: 12px; display: grid; gap: 6px; }
.ticks li { display: flex; align-items: center; gap: 8px; font: 600 13px 'Barlow', sans-serif; }
.ticks i { width: 14px; height: 14px; background: var(--a); position: relative; flex: none; }
.ticks i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.step .bubble { margin-top: 12px; border: 2px solid var(--a); padding: 9px 11px; font-weight: 600; font-style: italic; }

/* ---------- verdicts: the three safety states keep the verdict palette, never the playful accents ---------- */
.verdicts { display: grid; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.v { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 16px 16px 20px; box-shadow: inset 0 6px 0 var(--vc); border-left: 8px solid var(--vc); }
.v h3 { font: 700 19px/1.2 'Barlow', sans-serif; margin: 12px 0 8px; }
.v p { font-size: 15px; line-height: 1.5; }
.v-chip { display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--vc); padding: 5px 9px; }
.v-flag { --vc: var(--flag); }
.v-ok { --vc: var(--ok); }
.v-unv { --vc: var(--unv); }
/* Reason: white on bright amber is unreadable, so the amber chip carries dark ink instead. */
.v-unv .v-chip { color: var(--unv-ink); }

@media (min-width: 720px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .verdicts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}