.attn-flow {
  --attn-flow-blue: #0087c7;
  --attn-flow-cyan: #4dd2ff;
  padding: clamp(62px, 8vw, 102px) 0;
  scroll-margin-top: 100px;
  border-block: 1px solid #75bfd824;
  background: radial-gradient(ellipse at 50% 7%, #112d3b78 0, transparent 63%), #09141c;
  color: #eff6fb;
}
.attn-flow-wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.attn-flow-heading { max-width: 730px; margin: 0 auto 36px; text-align: center; }
.attn-flow .attn-flow-eyebrow { margin-bottom: 14px; color: var(--attn-flow-cyan); font: 700 11px/1.5 Inter, system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.attn-flow #attn-flow-title { font-size: clamp(37px, 5.4vw, 61px); line-height: 1.04; font-weight: 800; letter-spacing: -.05em; text-wrap: balance; }
.attn-flow #attn-flow-title span { color: var(--attn-flow-cyan); }
.attn-flow .attn-flow-intro { margin: 18px auto 0; color: #b7c7d3; font-size: 16px; line-height: 1.6; }

.attn-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.attn-flow-step {
  position: relative;
  min-width: 0;
  padding: 17px 22px 24px;
  border: 1px solid #dce7ed;
  border-radius: 14px;
  background: #fff;
  color: #153346;
  box-shadow: 0 8px 24px #00000014;
  text-align: left;
}
.attn-flow-number { display: block; color: #537285; font: 600 11px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.attn-flow-drawing { display: block; width: 100%; max-width: 190px; height: 132px; margin: 5px auto 12px; color: #17374a; overflow: visible; }
.attn-flow-art-blue, .attn-flow-form-draw { color: var(--attn-flow-blue); }
.attn-flow-art-muted { color: #648699; }
.attn-flow-art-fill { fill: #c9edff; }
.attn-flow-art-soft { fill: #eff8fc; }
.attn-flow .attn-flow-step h3 { margin: 0; color: #102c3e; font-size: 21px; font-weight: 750; line-height: 1.2; letter-spacing: -.03em; }
.attn-flow .attn-flow-step > p { margin: 9px 0 0; color: #496476; font-size: 13px; line-height: 1.6; }

.attn-flow-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; opacity: 0; }
.attn-flow-ring rect { stroke: var(--attn-flow-blue); stroke-width: 3px; stroke-dasharray: 100; stroke-dashoffset: 100; }
.attn-flow-step-current .attn-flow-ring { opacity: 1; filter: drop-shadow(0 0 5px #4dd2ff75); }
.attn-flow-step-current .attn-flow-ring rect { animation: attn-flow-ring-draw 2.2s linear both; }
@keyframes attn-flow-ring-draw { to { stroke-dashoffset: 0; } }

.attn-flow-step-current .attn-flow-cursor { transform-box: fill-box; transform-origin: 25% 20%; animation: attn-flow-click .72s .25s ease-in-out; }
@keyframes attn-flow-click { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-5px, -5px) scale(.94); } 73% { transform: translate(-2px, -2px); } }
.attn-flow-step-current .attn-flow-form-draw { stroke-dasharray: 100; animation: attn-flow-lines .9s .3s ease-out; }
@keyframes attn-flow-lines { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.attn-flow-step-current .attn-flow-alert-draw { animation: attn-flow-notify .7s .25s cubic-bezier(.2,.8,.25,1); }
@keyframes attn-flow-notify { from { transform: translateY(-8px); opacity: .65; } to { transform: translateY(0); opacity: 1; } }
.attn-flow-step-current .attn-flow-alert-rays { animation: attn-flow-rays .9s .2s ease-out; }
@keyframes attn-flow-rays { 0%, 100% { opacity: 1; } 45% { opacity: .2; } }
.attn-flow-step-current .attn-flow-calendar-check { stroke-dasharray: 100; animation: attn-flow-check-draw .85s .3s ease-out; }
@keyframes attn-flow-check-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.attn-flow[data-running="false"] .attn-flow-step-current :is(.attn-flow-ring rect, .attn-flow-cursor, .attn-flow-form-draw, .attn-flow-alert-draw, .attn-flow-alert-rays, .attn-flow-calendar-check) { animation-play-state: paused; }

.attn-flow .attn-flow-handoff { max-width: 760px; margin: 25px auto 0; color: #b8c8d3; font-size: 13px; line-height: 1.6; text-align: center; }
.attn-flow-handoff strong { color: #f1f8fc; font-weight: 650; }

@media (max-width: 900px) {
  .attn-flow-wrap { width: min(720px, calc(100% - 44px)); }
  .attn-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attn-flow-step { padding: 17px 25px 25px; }
}
@media (max-width: 480px) {
  .attn-flow-wrap { width: calc(100% - 32px); }
  .attn-flow-steps { gap: 12px; }
  .attn-flow-step { padding: 14px 13px 18px; }
  .attn-flow-drawing { height: 100px; margin-top: 2px; margin-bottom: 8px; }
  .attn-flow .attn-flow-step h3 { font-size: 18px; }
  .attn-flow .attn-flow-step > p { margin-top: 7px; font-size: 12.5px; line-height: 1.5; }
  .attn-flow .attn-flow-intro { font-size: 14px; }
}
@media (max-width: 360px) {
  .attn-flow-wrap { width: calc(100% - 36px); }
  .attn-flow-steps { grid-template-columns: 1fr; gap: 16px; }
  .attn-flow-step { padding: 16px 25px 22px; }
  .attn-flow-drawing { height: 124px; }
  .attn-flow .attn-flow-step h3 { font-size: 22px; }
  .attn-flow .attn-flow-step > p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .attn-flow-step-current :is(.attn-flow-ring rect, .attn-flow-cursor, .attn-flow-form-draw, .attn-flow-alert-draw, .attn-flow-alert-rays, .attn-flow-calendar-check) { animation: none; }
  .attn-flow-ring { display: none; }
}