/* Mentor: first try -> note -> second try. Stacked with downward arrows on phones, one row from 1024px. */
.mentor__flow { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mentor__frame { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; --phone-w: 210px; }
.mentor__label { font-size: var(--size-text); font-weight: 600; color: var(--color-ink-2); text-align: center; }

.mentor__arrow { flex: none; display: grid; place-items: center; width: 56px; height: 64px; }
.mentor__arrow-svg { width: 72px; height: 48px; max-width: none; fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transform: rotate(90deg); }

/* paper note */
.mentor__note {
  position: relative;
  width: 270px;
  max-width: 100%;
  margin-top: 12px;
  padding: 34px 22px 22px;
  background-color: color-mix(in srgb, var(--color-card) 88%, var(--color-sun));
  background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--color-ink-2) 16%, transparent) 31px 32px);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  transform: rotate(-2deg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 32px;
  color: var(--color-ink);
}
.mentor__note::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  background: var(--color-sun);
  opacity: .7;
  transform: rotate(2deg);
}
.mentor__note-list { margin: 0; padding-left: 1.5em; list-style: decimal; }
.mentor__note-list li::marker { color: var(--color-accent-text); }
.mentor__note-mark { display: block; width: 44px; height: 28px; margin-top: 6px; fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* drawn phone screens (sizes follow the phone width through container units) */
.mentor__screen {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(170deg, var(--color-peach), var(--color-lavender));
  color: var(--color-ink);
}
.mentor__s-title, .mentor__s-question { margin: 0; padding: 16cqw 8cqw 0; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.mentor__s-title { font-size: 6cqw; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-2); }
.mentor__s-question { font-size: 11cqw; font-family: var(--font-body); font-weight: 700; }
.mentor__scene { position: relative; flex: 1; margin-top: 4cqw; overflow: hidden; }
.mentor__sun { position: absolute; top: 6%; right: 12%; width: 24cqw; height: 24cqw; border-radius: 50%; background: var(--color-sun); opacity: .75; }
.mentor__cup {
  position: absolute; left: 50%; bottom: 20%; width: 40cqw; height: 32cqw; margin-left: -20cqw;
  background: var(--color-card); border-radius: 3px 3px 20cqw 20cqw; box-shadow: var(--shadow-card);
}
.mentor__cup::after { content: ''; position: absolute; right: -9cqw; top: 6cqw; width: 11cqw; height: 13cqw; border: 2.4cqw solid var(--color-card); border-left: 0; border-radius: 0 8cqw 8cqw 0; }
.mentor__saucer { position: absolute; left: 50%; bottom: calc(20% - 2cqw); width: 56cqw; height: 4cqw; margin-left: -28cqw; border-radius: 50%; background: var(--color-card); box-shadow: var(--shadow-card); }
.mentor__steam { position: absolute; left: 42%; bottom: calc(20% + 34cqw); width: 3cqw; height: 16cqw; border-radius: 3cqw; background: var(--color-card); opacity: .8; }
.mentor__steam--b { left: 54%; height: 12cqw; margin-bottom: 2cqw; }
.mentor__hill { position: absolute; left: -10%; right: -10%; bottom: -14%; height: 32%; border-radius: 50% 50% 0 0; background: var(--color-accent-soft); }
.mentor__s-caps { position: relative; margin: 0; padding: 0 8cqw 14cqw; display: flex; flex-direction: column; gap: 1.5cqw; align-items: flex-start; }
.mentor__s-caps span { background: var(--color-phone); color: var(--color-white); padding: .6cqw 2.4cqw; border-radius: 1.6cqw; font-weight: 600; line-height: 1.3; }
.mentor__screen--before .mentor__s-caps span { font-size: 4cqw; }
.mentor__screen--after .mentor__s-caps span { font-size: 8cqw; padding: 1cqw 3.5cqw; border-radius: 2.4cqw; }

/* three calm lines */
.mentor__lines { list-style: none; margin: clamp(36px, 5vw, 60px) auto 0; padding: 0; max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.mentor__lines li { display: flex; align-items: center; gap: 16px; font-size: var(--size-text-lg); color: var(--color-ink); }
.mentor__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent-soft); display: grid; place-items: center; }
.mentor__icon .icon { width: 22px; height: 22px; color: var(--color-accent-text); }

@media (min-width: 1024px) {
  .mentor__flow { flex-direction: row; justify-content: center; align-items: flex-start; gap: clamp(8px, 1.6vw, 24px); }
  .mentor__frame--note { padding-top: 0; }
  .mentor__arrow { width: 72px; height: 48px; margin-top: 250px; }
  .mentor__arrow-svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mentor__note { transform: none; } }