/* Agentic Workflows on the home page: the first card under "Selected work", in the same template as the product panels (copy on the left, a laptop on a staged scene on the right), in its own coral world (tokens.css), above GourmetAI. The screen shows the shared header component, live, scaled to fit (its look is shared/agentic-header.css). */
.panel-numbers { margin: 0; } /* the numbers row inside the facts */
.panel-numbers .agentic-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; } /* four tiles across in the card's facts, no extra space above */
.panel-numbers .agentic-stat { --stat-mark: var(--world-on-color); border-color: rgb(28 15 8 / 0.28); background: rgb(28 15 8 / 0.08); } /* dark tiles on the coral card */
.panel-numbers .agentic-stat:hover { border-color: var(--world-on-color); background: rgb(28 15 8 / 0.16); } /* a quiet hover cue */
.panel-numbers .agentic-stat dt { padding: 0; color: var(--world-on-color); font: 500 12px/1.25 var(--mono); letter-spacing: 0; opacity: 1; } /* labels in the card's dark text, not the facts-list label style */
.panel-numbers .agentic-stat { padding: 12px 10px 10px; } /* a little tighter, so four fit the facts column */
.panel-numbers .agentic-stat dd { font-size: 36px; } /* big numerals, fixed size in the card */
.agentic-screen { container-type: inline-size; background: var(--ink); color: var(--paper); } /* the laptop screen measures itself, so the component inside can be scaled to it; light text on its dark screen */
.agentic-screen-fit { display: grid; align-content: center; box-sizing: border-box; width: 840px; height: 525px; padding: 20px; transform: scale(tan(atan2(100cqw, 840px))); transform-origin: 0 0; pointer-events: none; user-select: none; } /* a 16 : 10 design screen, shrunk to the real one */
.stage .laptop { --laptop-width: min(640px, 46vw); } /* a little wider than the code laptops, the header needs room */
@media (max-width: 1080px) { .stage .laptop { --laptop-width: min(640px, 40vw); } .panel-numbers .agentic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* tablets: the laptop stays clear of the words, the tiles go two by two */
@media (max-width: 760px) { /* phones */
  .stage .laptop { --laptop-width: min(300px, 80vw); } /* the laptop fits the phone */
}
@media (max-width: 600px) { .world-agentic-card .stage { display: none; } .panel-numbers .agentic-stat { padding: 10px 10px 8px; gap: 4px; } .panel-numbers .agentic-stat dd { font-size: 30px; } .panel-numbers .agentic-stats { gap: 6px; } } /* on a phone the laptop is hidden (too small to read, the numbers are in the card) and the number tiles get a little tighter */
@media (max-width: 380px) { .panel-numbers { grid-column: 1 / -1; } } /* the narrowest phones: the tiles take the whole row, so no label breaks inside a word */ /* on a phone the laptop is too small to read, and the numbers are already in the card: hide it to keep the page short */