/* Get started: one question per screen. The two sides as big glass cards, then each side's road in three steps.
   Screens swap with a blur-slide; the cards come in one after the other and lift under the cursor. */
.st-body .bar .wrap { justify-content: space-between; }
.steps-dots { display: flex; gap: 6px; }
.steps-dots i { width: 22px; height: 4px; border-radius: 4px; background: var(--line-2); transition: background 0.4s, width 0.4s var(--ease); }
.steps-dots i.on { background: var(--ink); width: 34px; }
.st { min-height: calc(100dvh - 76px); display: grid; place-items: center; padding: 40px var(--gut) 72px; }
.stage { width: 100%; max-width: 1120px; text-align: center; }
.stage[data-step="creator"], .stage[data-step="worker"] { text-align: left; }
.kick { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.st-h { margin: 14px 0 0; font-size: clamp(42px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.05em; }
.st-lede { margin: 18px auto 0; max-width: 32em; color: var(--ink-2); font-size: 18px; }

/* the two cards */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; text-align: left; }
.choice { position: relative; display: grid; grid-template-rows: 210px auto auto 1fr auto; gap: 8px; padding: 0 28px 26px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.95); background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); cursor: pointer; color: var(--ink); font: inherit; text-align: left; overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s; opacity: 0; transform: translateY(18px); }
.choice.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), box-shadow 0.45s var(--ease); }
.choice:hover { transform: translateY(-6px); box-shadow: 0 1px 0 #fff inset, 0 40px 80px -40px rgba(40, 48, 90, 0.45), 0 2px 8px -4px rgba(40, 48, 90, 0.1); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.choice::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 10%, rgba(214, 206, 255, 0.5), transparent 70%); opacity: 0.7; transition: opacity 0.4s; pointer-events: none; }
.choice[data-go="worker"]::before { background: radial-gradient(60% 50% at 70% 10%, rgba(206, 236, 255, 0.6), transparent 70%); }
.choice:hover::before { opacity: 1; }
.ch-art { position: relative; display: grid; place-items: center; margin: 0 -28px; }
.ch-art img { width: 250px; height: 250px; object-fit: contain; margin-top: -10px; transition: transform 0.8s var(--ease); filter: drop-shadow(0 30px 40px rgba(40, 48, 90, 0.18)); }
.choice:hover .ch-art img { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
.ch-tag { position: relative; font: 500 11.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ch-title { position: relative; font-size: clamp(28px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.ch-sub { position: relative; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.ch-go { position: relative; margin-top: 14px; display: inline-flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 16px; }
.ch-go svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.choice:hover .ch-go svg { transform: translateX(4px); }
.choice.picked { transform: scale(0.98); }
.choice.dim { opacity: 0.35 !important; filter: blur(2px); transition: opacity 0.3s, filter 0.3s; }

/* a side's road */
.back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 0 14px 0 10px; height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.8); font: 500 13px var(--mono); color: var(--ink-2); cursor: pointer; }
.back svg { width: 16px; height: 16px; }
.back:hover { color: var(--ink); background: #fff; }
.road { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.road-art { display: grid; place-items: center; }
.road-art img { width: min(440px, 100%); height: auto; animation: float 9s ease-in-out infinite alternate; filter: drop-shadow(0 40px 60px rgba(40, 48, 90, 0.2)); }
.flow { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: f; }
.flow li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: var(--shadow); opacity: 0; transform: translateX(16px); }
.flow li.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.fn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 500 15px var(--mono); }
.flow b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.flow span:not(.fn) { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.st-go { display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .pick { grid-template-columns: 1fr; }
  .choice { grid-template-rows: 150px auto auto auto auto; }
  .ch-art img { width: 180px; height: 180px; }
  .road { grid-template-columns: 1fr; gap: 0; }
  .road-art { order: -1; margin: -20px 0 -10px; }
  .road-art img { width: 220px; }
  .steps-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .choice, .flow li { opacity: 1 !important; transform: none !important; } .road-art img { animation: none; } }