/* Talent form: a dark brand panel with the four steps beside the form card; on phones the panel becomes a compact header. */
.reg-shell { padding-block: clamp(16px, 4vw, 44px) 120px; }
.reg { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 22px; align-items: start; max-width: 1080px; }

/* ---- the brand panel ---- */
.reg-aside { position: sticky; top: 88px; overflow: hidden; isolation: isolate; display: grid; gap: 28px; padding: 30px 26px 26px; border-radius: var(--r-xl); color: #F4F6F8;
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 70px -34px rgba(198, 44, 47, .55);
  background: radial-gradient(120% 90% at 100% 0%, rgba(198, 44, 47, .5), transparent 58%), linear-gradient(165deg, #1B222A, #0F1317); }
.reg-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.reg-aside::after { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; inset: auto -22% -34% auto; border-radius: 50%; border: 18px solid rgba(198, 44, 47, .2); border-left-color: transparent; border-bottom-color: transparent; animation: regSpin 40s linear infinite; }
@keyframes regSpin { to { transform: rotate(360deg); } }
.reg-aside h1 { font-size: var(--fs-2xl); font-weight: 900; color: #fff; }
.reg-aside .stepper { grid-template-columns: 1fr; gap: 24px; margin: 0; align-items: start; }
.reg-aside .stepper .tiles { width: 128px; height: 128px; }
.reg-aside .stepper .tiles .st { stroke: rgba(255, 255, 255, .28); }
.reg-aside .stepper .tiles .st.active { stroke: #fff; fill: rgba(255, 255, 255, .12); }
.reg-aside .stepper .tiles .st.done { fill: #F4F6F8; stroke: #F4F6F8; }
.reg-aside .stepper .tiles .sb { stroke: #E2484B; }
.reg-aside .stepper .labels { gap: 10px; }
.reg-aside .stepper .labels .now { display: none; }
.reg-aside .stepper ol { display: grid; gap: 6px; }
.reg-aside .stepper ol li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: var(--fs-md); font-weight: 700; color: rgba(244, 246, 248, .62); transition: background-color var(--t-med), color var(--t-med); }
.reg-aside .stepper ol li + li::before { content: none; }
.reg-aside .stepper ol li .n { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .1); font-weight: 900; font-size: var(--fs-sm); transition: background-color var(--t-med), transform 460ms var(--ease-spring); }
.reg-aside .stepper ol li[aria-current="step"] { background: rgba(255, 255, 255, .1); color: #fff; }
.reg-aside .stepper ol li[aria-current="step"] .n { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.06); }
.reg-aside .stepper ol li.done { color: #fff; }
.reg-aside .stepper ol li.done .n { background: var(--ok); font-size: 0; position: relative; }
.reg-aside .stepper ol li.done .n::after { content: ""; position: absolute; inset: 0; background: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.reg-aside .ra-prog { display: none; }

/* ---- the card ---- */
.reg-card { padding: clamp(18px, 3.4vw, 38px); }
.reg-card .step { gap: 22px; }
.reg-card .step-h { display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 4px; font-size: var(--fs-xl); font-weight: 900; line-height: 1.3; }
.sh-ico { width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.sh-ico svg { width: 26px; height: 26px; }
.reg-card .step:not([hidden]) > :not(legend) { animation: regIn 560ms var(--ease-out) both; }
.reg-card .step:not([hidden]) > :nth-child(2) { animation-delay: 60ms; } .reg-card .step:not([hidden]) > :nth-child(3) { animation-delay: 130ms; }
.reg-card .step:not([hidden]) > :nth-child(4) { animation-delay: 200ms; } .reg-card .step:not([hidden]) > :nth-child(5) { animation-delay: 270ms; }
.reg-card .step:not([hidden]) > :nth-child(n+6) { animation-delay: 340ms; }
.reg-card .step:not([hidden]) .ocard { animation: regPop 520ms var(--ease-spring) both; animation-delay: calc(120ms + var(--i, 0) * 55ms); }
@keyframes regIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes regPop { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .reg-card .step:not([hidden]) > :not(legend), :root:not([data-motion="full"]) .reg-card .step:not([hidden]) .ocard { animation-name: regFade; } @keyframes regFade { from { opacity: 0; } } }

/* leading icons in fields; the check that confirms a valid value moves to the end */
.reg .control .adorn { color: var(--muted); transition: color var(--t-med); }
.reg .control:focus-within .adorn { color: var(--accent); }
.reg .control input, .reg .control textarea { padding-inline-start: 6px; }
.reg .control .adorn + input, .reg .control .adorn ~ input { padding-inline-start: 8px; }
.reg .control .adorn { padding-inline: 16px 8px; }
/* fields with a check: the check sits at the start (right), as in the challenge form; the icon moves to the far end and the text keeps clear of both */
.reg .control.has-seal .adorn { order: 2; padding-inline: 8px 16px; }
.reg .control.has-seal input { order: 1; padding-inline: 0; padding-right: 54px; padding-left: 8px; }
.reg .control textarea { padding-top: 14px; }
.reg .control:has(textarea) { align-items: flex-start; }
.reg .control:has(textarea) .adorn { padding-top: 16px; }
.reg .row-2 { align-items: start; }
.reg .quick-in { margin-inline-end: 10px; }
.reg .combo .control { min-height: 54px; }

.reg-card .form-nav { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--line-strong); }
.reg-card .form-nav .btn { min-height: 52px; }

/* ---- phone: the panel becomes a header with a progress bar ---- */
@media (max-width: 960px) {
  .reg { grid-template-columns: 1fr; gap: 14px; }
  .reg-aside { position: relative; top: auto; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; padding: 18px; border-radius: var(--r-lg); }
  .reg-aside h1 { grid-column: 2; font-size: var(--fs-lg); }
  .reg-aside .stepper { display: contents; }
  .reg-aside .stepper .tiles { grid-row: 1 / span 3; grid-column: 1; width: 64px; height: 64px; }
  .reg-aside .stepper .labels { grid-column: 2; display: block; }
  .reg-aside .stepper ol { display: none; }
  .reg-aside .stepper .labels .now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
  .reg-aside .stepper .labels .now small { color: rgba(244, 246, 248, .66); }
  .reg-aside .ra-prog { display: grid; grid-column: 2; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .reg-aside .ra-prog i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); transition: background-color 420ms var(--ease-out); }
  .reg-aside .ra-prog i.on { background: var(--accent); }
  .reg-aside::after { width: 120%; inset: auto -40% -90% auto; }
}
@media (max-width: 620px) {
  .reg-card .step-h { font-size: var(--fs-lg); }
  .sh-ico { width: 44px; height: 44px; border-radius: 15px; }
}

/* the open suggestion list must sit above the navigation row and be opaque */
@media (min-width: 621px) {
  .reg-card .step { position: relative; z-index: 3; }
  .reg-card .form-nav { position: relative; z-index: 1; }
}
.reg .combo .dd-pop { background: var(--surface); z-index: 80; }
.dd-opt.add { color: var(--accent); font-weight: 800; border-bottom: 1px dashed var(--line); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.dd-opt.add svg { width: 16px; height: 16px; flex: none; }
.step-flash { animation: stepFlash 900ms var(--ease-out); }
@keyframes stepFlash { 30% { box-shadow: 0 0 0 5px var(--accent-soft); } }
.reg .field { scroll-margin-block: 110px 130px; }