/* how-covers.css — homepage AI section, "How it works" panels (Claude Design "OG Covers3").
   Tokens are scoped to the panel; values are the design's own dark and light themes. */
.v5-how-slot { container-type: inline-size; }
.v5-how {
  --bg-card: #131D31; --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14);
  --ink: #EEF2F8; --ink-dim: #AAB6C8; --tint: rgba(255,255,255,0.05);
  --accent-ink: #59ABEA; --good: #34D399; --warn: #F7B500; --bad: #FF6B8A;
}
[data-theme="light"] .v5-how {
  --bg-card: #FFFFFF; --line: rgba(9,46,82,0.10); --line-strong: rgba(9,46,82,0.14);
  --ink: #0B1220; --ink-dim: #4A5468; --tint: rgba(9,46,82,0.04);
  --accent-ink: #2F5A9E; --good: #00875A; --warn: #8A6500; --bad: #D4183D;
}
/* Column bands by slot width. The step grid is an inline style, hence !important. */
@container (min-width: 600px) {
  .v5-how > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@container (min-width: 600px) and (max-width: 719.98px) {
  .v5-how { zoom: 1 !important; }
}
@container (max-width: 599.98px) {
  .v5-how > div { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Step screens (fixed 124px in the design): let captions and sign-off lines wrap instead of hiding copy. */
.v5-how [style*="height: 124px"] > span[style*="text-overflow: ellipsis"] { white-space: normal !important; }
/* Three columns: one fixed height keeps the row aligned and fits the tallest wrapped screen. */
@container (min-width: 600px) {
  .v5-how [style*="height: 124px"] { height: 164px !important; }
}
/* One column: each screen takes its own height. */
@container (max-width: 599.98px) {
  .v5-how [style*="height: 124px"] { height: auto !important; min-height: 124px; }
}