/* ── Agentic page ─────────────────────────────────────────────────────────────
   Ported from the Claude Design canvas. Three deliberate changes from the
   mockup, all of them because the canvas is a desktop artboard:

   1. The instruction column was `position: sticky; top: 50%;
      transform: translateY(-50%)`. Vertically centring a sticky element that
      way makes it overhang its own container, and once the layout is one column
      it pins itself on top of the cards it is meant to introduce. Here the
      sticky only exists at the two-column width, and it sticks near the top
      rather than at the middle.
   2. Every size was a clamp() against the viewport, which is right for a hero
      and wrong for body text — the step cards ended up bigger on a phone in
      landscape than on a laptop. Card text is now fixed and only the display
      type scales.
   3. The assistant marks were hotlinked from Wikipedia. They are local files,
      sized against a fixed box so a slow decode cannot shift the layout.

   Everything else is the design as drawn. Tokens are the site's own, which the
   canvas already shared, so no new custom properties. */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ag-hero { padding: clamp(28px, 6vw, 64px) 0 clamp(56px, 8vw, 110px); }
.ag-hero-copy { max-width: 860px; }

.ag-h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}

.ag-lead {
  font-family: var(--sans);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--ink-3);
  max-width: 52ch;
  margin: 22px 0 0;
  text-wrap: pretty;
}
.ag-lead + .ag-lead { margin-top: 16px; }

/* ── Assistant marks ──────────────────────────────────────────────────────── */
.ag-marks {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(30px, 4vw, 44px);
  flex-wrap: wrap;
}
/* One blooms at a time; the rest recede. Greyscale rather than opacity alone so
   a coloured mark never competes with the headline. */
.ag-mark {
  width: auto;
  filter: grayscale(1);
  opacity: 0.28;
  animation: ag-bloom 5.4s var(--ease) infinite;
}
@keyframes ag-bloom {
  0%, 24%  { filter: grayscale(0); opacity: 1; }
  33%, 91% { filter: grayscale(1); opacity: 0.28; }
  100%     { filter: grayscale(0); opacity: 1; }
}

/* ── The cascade ──────────────────────────────────────────────────────────── */
.ag-cascade { padding: clamp(56px, 10vw, 150px) 0 clamp(56px, 8vw, 110px); }

.ag-cascade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.ag-said-inner { max-width: 28ch; }
.ag-kicker,
.ag-step-kind {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ag-kicker { margin-bottom: 16px; }

.ag-prompt {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: pretty;
}
.ag-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  background: var(--ink);
  vertical-align: -0.12em;
  animation: ag-caret 1.1s steps(1) infinite;
}
@keyframes ag-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.ag-steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ag-step {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: clamp(18px, 2vw, 24px);
}
/* Fixed, not clamped: this is body copy, and a viewport-scaled card was larger
   on a phone in landscape than on a laptop. */
.ag-step-label {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.ag-step-detail {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Sticky only where there are two columns to be sticky beside. */
@media (min-width: 981px) {
  .ag-said { position: sticky; top: 96px; }
}

@media (max-width: 980px) {
  .ag-cascade-grid { grid-template-columns: 1fr; gap: 32px; }
  .ag-said-inner { max-width: 40ch; }
  .ag-steps { gap: 14px; }
}

@media (max-width: 560px) {
  .ag-h1 { max-width: none; }
  .ag-marks { gap: 20px; }
  /* The marks are decorative; at this width the headline needs the room. */
  .ag-mark { height: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-mark, .ag-caret { animation: none; }
  .ag-mark { filter: grayscale(0); opacity: 1; }
}