/* Intro: strokes settle into the DeepView mark, then the reference's "INTRODUCING" stack. */
.intro { padding-block: clamp(120px, 14vw, 220px) clamp(110px, 12vw, 190px); }
.in-wrap { display: flex; flex-direction: column; align-items: center; }
.in-mark { position: relative; width: 220px; height: 190px; margin-bottom: 34px; }
.in-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.in-logo { position: absolute; left: 50%; top: 50%; width: 112px; height: auto; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 0 22px rgba(61, 111, 245, 0.45)); will-change: opacity; }
.in-eye { color: #fff; font-size: 12px; letter-spacing: 0.1em; }
.in-title { margin-top: 22px; font: 300 clamp(44px, 4.4vw, 66px)/1.02 var(--f-serif); letter-spacing: -0.025em; font-variation-settings: "opsz" 72; }
.in-line { margin-top: 18px; color: var(--fg-2); font-size: 17px; line-height: 1.5; max-width: 30ch; text-wrap: balance; }
.in-by { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 4px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--mist); font: 500 11px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.in-by img { width: 14px; height: 14px; opacity: 0.85; }
.in-ctas { margin-top: 30px; }
@media (max-width: 700px) {
  .in-mark { width: 180px; height: 156px; margin-bottom: 26px; }
  .in-logo { width: 96px; }
  .in-line { font-size: 16px; }
}