/* ============ MODELLEN : three phases ============
   index.html #modellen. White section: the heading on top, then one row per
   phase, name left and paragraph right. Each row is a link to that phase's
   card on startups.html; on hover the name and the arrow slide right, like
   the event rows below. The rows stack at 768px and below. */

.flow__head .lead { max-width: 52ch; }

.flow__steps {
  list-style: none;
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.flow__step { border-top: 1px solid var(--line); }

.flow__link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  grid-template-areas: "name text arw";
  column-gap: clamp(32px, 5vw, 96px);
  align-items: baseline;
  padding-block: clamp(30px, 3.6vw, 52px);
}

.flow__link h3 {
  grid-area: name;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.035em;
  transition: transform .45s var(--ease);
}

.flow__link p {
  grid-area: text;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink-body);
}

.flow__link .arw {
  grid-area: arw;
  color: var(--accent);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1;
  transition: transform .4s var(--ease);
}

.flow__link:hover h3,
.flow__link:focus-visible h3 { transform: translateX(10px); }
.flow__link:hover .arw,
.flow__link:focus-visible .arw { transform: translateX(6px); }

@media (max-width: 768px) {
  .flow__link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name arw" "text text";
    row-gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__link h3, .flow__link .arw { transition: none; }
}