/* =============================================================================
   ODUEX — /automation/ page layout.
   Arrangement only. Every component is styled by core.css and every value
   below is a token from PAGE-CONTRACT section 4. Nothing here redefines a
   token, restyles a component or declares a font.
   ============================================================================= */

/* Hero rhythm. The eyebrow and cta-note carry their own margins in core.css;
   the lede and button row need theirs set here. */
.page-automation .hero-copy > .lede{ margin-top: var(--space-6); }
.page-automation .hero-copy > .btn-row{ margin-top: var(--space-8); }

/* Catalogue cards: column layout so the call link sits on the card foot and a
   row of cards keeps its links aligned however long the copy runs. */
.page-automation .card{
  display: flex;
  flex-direction: column;
}
.page-automation .card .link-arrow{
  margin-top: auto;
  padding-top: var(--space-6);
  align-self: flex-start;
}

/* Catalogue rows: the item number and title grouped inside the disclosure
   trigger, so the trigger keeps its two-part flex layout (label, icon). */
.page-automation .cat-row{
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
}
.page-automation .cat-row .mono{ color: var(--ink-faint); }

/* Tighter vertical rhythm inside an open catalogue row. */
.page-automation .disclosure .stack{ --stack-gap: var(--space-3); }

/* The H1 steps down on a narrow phone, because a masked line that wraps reveals
   as one block. --fs-hero bottoms out at its 2.90rem floor while the column
   keeps shrinking, so the longest line overruns below 370px. Same step, and
   the same reason, as the homepage and teardown heroes. */
@media (max-width: 400px){
  .page-automation h1.display-hero{ font-size: var(--fs-4xl); }
}