/* =====================================================================================================================
   OneBook agent registration (AgentRegistration.aspx). Loads after onebook-trade.css and uses its tokens: ink + white,
   thin rules, one indigo accent, Inter Tight / Inter / IBM Plex Mono. Left: an ink rail that tells the agent what
   happens next (the current step lit). Right: the form on white. Every class is prefixed rg-.
   ===================================================================================================================== */
.rg-body { background: var(--tx-paper-2); }
.rg-main { padding-top: 76px; min-height: 100vh; }
.rg-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.rg-main > .rg-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; }
.rg-top-note { font-size: 13.5px; color: rgba(255, 255, 255, .62); }

/* ------------------------------------------------------------------ the rail */
.rg-side { position: relative; background: var(--tx-ink); color: #fff; isolation: isolate; overflow: hidden; }
.rg-side::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.rg-side-in { position: sticky; top: 76px; padding: 64px 48px 56px 32px; max-width: 520px; margin-left: auto; }
.rg-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 26px; font-family: var(--tx-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.rg-kicker span { width: 28px; height: 1px; background: currentColor; }
.rg-h1 { font-family: var(--tx-display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: .98; margin: 0 0 22px; color: #fff; }
.rg-h1 em { font-style: normal; color: rgba(255, 255, 255, .55); }
.rg-lede { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0 0 40px; max-width: 30em; }

.rg-steps { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--tx-line-d); }
.rg-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; padding: 18px 0 18px 0; border-bottom: 1px solid var(--tx-line-d); color: rgba(255, 255, 255, .5); transition: color .4s ease; }
.rg-steps li::before { content: ""; position: absolute; left: -32px; top: -1px; bottom: -1px; width: 2px; background: var(--tx-accent-2); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--tx-ease); }
.rg-steps b { font-family: var(--tx-mono); font-weight: 500; font-size: 13px; padding-top: 2px; }
.rg-steps strong { display: block; font-family: var(--tx-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: inherit; }
.rg-steps span { display: block; font-size: 14px; line-height: 1.5; margin-top: 2px; }
.rg-steps li.is-now { color: #fff; }
.rg-steps li.is-now::before { transform: scaleY(1); }
.rg-steps li.is-now span { color: rgba(255, 255, 255, .72); }
.rg-steps li.is-done { color: rgba(255, 255, 255, .78); }
.rg-steps li.is-done b { font-size: 0; }
.rg-steps li.is-done b::before { content: ""; display: inline-block; width: 16px; height: 9px; border-left: 2px solid var(--tx-live); border-bottom: 2px solid var(--tx-live); transform: rotate(-45deg) translate(2px, -2px); }

/* the same list as plain information (the partner page): every row readable, no current step */
.rg-steps--info li { color: #fff; }
.rg-steps--info li span { color: rgba(255, 255, 255, .66); }

.rg-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--tx-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.rg-trust li { display: inline-flex; align-items: center; gap: 8px; }
.rg-trust svg { width: 16px; height: 16px; color: #fff; }

/* ------------------------------------------------------------------ the card */
.rg-card { position: relative; background: var(--tx-paper); padding: 56px clamp(24px, 4.4vw, 64px) 64px; min-height: calc(100vh - 76px); }
.rg-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--tx-ink); transform-origin: left; animation: tx-bar 1.2s var(--tx-ease) .1s both; }
.rg-pane { max-width: 720px; }
.rg-card-head { margin-bottom: 26px; }
.rg-card-kicker { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--tx-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-muted); }
.rg-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-ink); }
.rg-secure svg { width: 14px; height: 14px; }
.rg-card h2 { font-family: var(--tx-display); font-size: clamp(28px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 10px; color: var(--tx-ink); }
.rg-sub { font-size: 15px; color: var(--tx-muted); margin: 0; max-width: 40em; }
.rg-sub strong { color: var(--tx-ink); font-weight: 600; }
.rg-req { font-style: normal; color: var(--tx-accent); font-weight: 600; }

/* sections */
.rg-set { border: 0; margin: 0 0 8px; padding: 26px 0 8px; border-top: 1px solid var(--tx-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; min-width: 0; }
.rg-set legend { float: left; width: 100%; grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 0 18px; font-family: var(--tx-display); font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--tx-ink); }
.rg-set legend b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--tx-ink); font-family: var(--tx-mono); font-size: 12px; font-weight: 500; }

/* fields */
.rg-field { position: relative; margin-bottom: 18px; min-width: 0; }
.rg-full { grid-column: 1 / -1; }
.rg-field > label:not(.rg-drop):not(.rg-check), .rg-label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; font-family: var(--tx-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-text); font-weight: 500; }
.rg-opt { font-size: 10.5px; letter-spacing: .08em; color: var(--tx-muted); text-transform: none; font-weight: 400; }
.rg-opt::before { content: "\00b7  "; }
.rg-field input[type=text], .rg-field input[type=email], .rg-field input[type=tel], .rg-field input[type=url], .rg-field select {
    width: 100%; height: 50px; border: 1px solid #CDD2DB; border-radius: 0; background: #fff; padding: 0 14px; font: 400 15.5px/1 var(--tx-body); color: var(--tx-ink);
    transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
.rg-field textarea {
    display: block; width: 100%; min-height: 128px; resize: vertical; border: 1px solid #CDD2DB; border-radius: 0; background: #fff; padding: 12px 14px;
    font: 400 15.5px/1.55 var(--tx-body); color: var(--tx-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.rg-field input::placeholder, .rg-field textarea::placeholder { color: #9CA3AF; }
.rg-field input:hover, .rg-field select:hover, .rg-field textarea:hover { border-color: #9AA2B1; }
.rg-field input:focus, .rg-field select:focus, .rg-field textarea:focus { outline: none; border-color: var(--tx-ink); box-shadow: 0 0 0 3px rgba(91, 63, 214, .16); }
.rg-field.is-invalid textarea, .rg-field:has(.rg-err) textarea { border-color: #B42318; }
.rg-select { position: relative; }
.rg-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--tx-ink); border-bottom: 1.5px solid var(--tx-ink); transform: rotate(45deg); pointer-events: none; }
.rg-select select { padding-right: 40px; cursor: pointer; }
.rg-help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--tx-muted); }
.rg-err { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 500; color: #B42318; }
.rg-err::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #B42318; color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.rg-field.is-invalid input, .rg-field.is-invalid select, .rg-field:has(.rg-err) input:not([type=radio]):not([type=checkbox]):not([type=file]), .rg-field:has(.rg-err) select { border-color: #B42318; }
.rg-field.is-invalid .rg-seg span, .rg-field:has(.rg-err) .rg-seg span { border-color: #B42318; }
.rg-field.is-invalid .rg-check > span::before, .rg-field:has(.rg-err) .rg-check > span::before { border-color: #B42318; }

/* title: a segmented control */
.rg-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); }
.rg-seg label { position: relative; margin: 0; cursor: pointer; }
.rg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rg-seg span { display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 16px; border: 1px solid #CDD2DB; margin-left: -1px; font-family: var(--tx-display); font-size: 15px; font-weight: 500; color: var(--tx-text); background: #fff; transition: background .2s ease, color .2s ease; }
.rg-seg label:first-child span { margin-left: 0; }
.rg-seg label:hover span { background: var(--tx-paper-2); }
.rg-seg input:checked + span { background: var(--tx-ink); border-color: var(--tx-ink); color: #fff; position: relative; z-index: 1; }
.rg-seg input:focus-visible + span { outline: 2px solid var(--tx-accent-2); outline-offset: 2px; position: relative; z-index: 2; }

/* phone: dialling code + number in one frame */
.rg-phone { display: flex; }
.rg-dial { display: inline-flex; align-items: center; flex: 0 0 96px; height: 50px; padding-left: 12px; border: 1px solid #CDD2DB; border-right: 0; background: var(--tx-paper-2); font-family: var(--tx-mono); color: var(--tx-ink); }
.rg-dial input[type=text] { border: 0 !important; height: 48px !important; background: transparent !important; padding: 0 6px !important; font-family: var(--tx-mono) !important; box-shadow: none !important; }
.rg-dial:focus-within { border-color: var(--tx-ink); }
.rg-phone > input { flex: 1 1 auto; min-width: 0; }

/* certificate drop zone */
.rg-drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px dashed #AEB5C2; background: var(--tx-paper-2); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.rg-drop:hover, .rg-drop.is-over { border-color: var(--tx-ink); background: #fff; }
.rg-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.rg-drop svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--tx-ink); }
.rg-drop-txt strong { display: block; font-family: var(--tx-display); font-size: 15px; font-weight: 600; color: var(--tx-ink); word-break: break-all; }
.rg-drop-txt small { display: block; font-size: 13px; color: var(--tx-muted); margin-top: 2px; }
.rg-drop.has-file { border-style: solid; border-color: var(--tx-ink); background: #fff; }
.rg-drop.is-bad { border-color: #B42318; }
.rg-drop.is-bad strong { color: #B42318; }

/* captcha */
.rg-captcha { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.rg-captcha img { display: block; width: 180px; height: 56px; border: 1px solid #CDD2DB; border-right: 0; background: var(--tx-paper-2); user-select: none; }
.rg-refresh { width: 56px; height: 56px; border: 1px solid #CDD2DB; background: #fff; color: var(--tx-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rg-refresh:hover { background: var(--tx-paper-2); }
.rg-refresh svg { width: 20px; height: 20px; }
.rg-refresh.spin svg { animation: rg-spin .6s var(--tx-ease); }
@keyframes rg-spin { to { transform: rotate(360deg); } }
.rg-captcha input[type=text] { flex: 1 1 180px; width: auto; height: 56px; margin-left: 12px; font-size: 18px; font-family: var(--tx-mono); letter-spacing: .3em; text-transform: uppercase; }

/* terms */
.rg-check { display: flex !important; gap: 12px; align-items: flex-start; font-family: var(--tx-body) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tx-text) !important; font-weight: 400 !important; cursor: pointer; line-height: 1.55; }
.rg-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rg-check > span { position: relative; padding-left: 32px; }
.rg-check > span::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 1px solid #9AA2B1; background: #fff; transition: background .2s ease, border-color .2s ease; }
.rg-check > span::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform .2s var(--tx-ease); }
.rg-check input:checked + span::before { background: var(--tx-ink); border-color: var(--tx-ink); }
.rg-check input:checked + span::after { transform: rotate(45deg) scale(1); }
.rg-check input:focus-visible + span::before { outline: 2px solid var(--tx-accent-2); outline-offset: 2px; }
.rg-check a { color: var(--tx-ink); font-weight: 600; border-bottom: 1px solid currentColor; }
.rg-check a:hover { color: var(--tx-accent); }

/* honeypot */
.rg-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* alerts */
.rg-alert { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid #B42318; background: #FEF3F2; color: #7A271A; font-size: 14px; }
.rg-alert strong { color: #B42318; }
.rg-alert a { color: #7A271A; font-weight: 600; border-bottom: 1px solid currentColor; }
.rg-note { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--tx-ink); background: var(--tx-paper-2); font-size: 14px; color: var(--tx-text); }

/* actions */
.rg-actions { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--tx-line); }
.rg-submit { width: 100%; height: 56px; font-size: 16px; cursor: pointer; border: 1px solid var(--tx-ink); background: var(--tx-ink); color: #fff; z-index: 0; overflow: hidden; }
.rg-submit.is-busy { opacity: .75; cursor: progress; }
.rg-actions-note { margin: 12px 0 0; font-size: 13px; color: var(--tx-muted); }
.rg-actions--row { display: flex; gap: 12px; flex-wrap: wrap; }
.rg-verify-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.rg-linkbtn { font-size: 14px; font-weight: 600; color: var(--tx-ink); border-bottom: 1px solid currentColor; }
.rg-linkbtn:hover { color: var(--tx-accent); }
.rg-linkbtn.is-wait { color: var(--tx-muted); border-bottom-color: transparent; cursor: default; }

/* done */
.rg-done-mark { width: 64px; height: 64px; color: var(--tx-ink); margin-bottom: 22px; }
.rg-done-mark svg { width: 100%; height: 100%; }
.rg-done-mark circle { stroke-dasharray: 140; stroke-dashoffset: 140; animation: rg-draw .9s var(--tx-ease) forwards; }
.rg-done-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: rg-draw .5s var(--tx-ease) .7s forwards; }
@keyframes rg-draw { to { stroke-dashoffset: 0; } }
.rg-next { list-style: none; margin: 30px 0 8px; padding: 0; border-top: 1px solid var(--tx-line); }
.rg-next li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--tx-line); font-size: 15px; }
.rg-next b { font-family: var(--tx-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-muted); padding-top: 3px; }
.rg-done .rg-card-kicker { margin-bottom: 12px; }

/* footer */
.rg-foot { background: var(--tx-ink); color: rgba(255, 255, 255, .62); font-size: 13px; }
.rg-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.rg-foot nav { display: flex; gap: 20px; }
.rg-foot a:hover { color: #fff; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
    .rg-top-note { display: none; }
}
@media (max-width: 960px) {
    .rg-main > .rg-wrap { grid-template-columns: minmax(0, 1fr); }
    .rg-side-in { position: static; max-width: none; margin: 0; padding: 40px 24px 32px; }
    .rg-h1 { font-size: 40px; }
    .rg-lede { margin-bottom: 26px; }
    .rg-steps { margin-bottom: 24px; }
    .rg-steps li::before { left: -24px; }
    .rg-card { min-height: 0; padding: 36px 24px 48px; }
    .tx-nav { display: none; }
}
@media (max-width: 620px) {
    .rg-wrap { padding: 0 16px; }
    .rg-set { grid-template-columns: minmax(0, 1fr); }
    .rg-side-in { padding: 32px 16px 24px; }
    .rg-steps li::before { left: -16px; }
    .rg-card { padding: 28px 16px 40px; }
    .rg-seg { display: grid; width: 100%; }
    .rg-captcha img { flex: 1 1 auto; width: calc(100% - 56px); height: auto; aspect-ratio: 180 / 56; }
    .rg-captcha input[type=text] { flex: 1 1 100%; margin: 10px 0 0; }
    .rg-next li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .tx-top .tx-wrap { gap: 12px; }
    .tx-top-right .tx-btn--sm { padding: 0 12px; font-size: 13px; }
    .tx-logo svg { width: 124px; }
}
@media (prefers-reduced-motion: reduce) {
    .rg-card::before, .rg-done-mark circle, .rg-done-mark path, .rg-refresh.spin svg { animation: none !important; stroke-dashoffset: 0; }
    .rg-steps li::before { transition: none; }
}

/* ------------------------------------------------------------------ phones and tablets: the sign-in link stays in the bar, the rail
   becomes a compact intro with a four-step strip, so the form starts within the first screen */
@media (max-width: 1024px) {
    .rg-body .tx-top-right { display: flex; margin-left: auto; }
    .rg-body .tx-top-right .rg-top-note { display: none; }
}
@media (max-width: 960px) {
    .rg-lede { font-size: 15px; }
    .rg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; margin-bottom: 0; }
    .rg-steps li { display: block; padding: 10px 8px 0 0; border-bottom: 0; border-top: 2px solid var(--tx-line-d); }
    .rg-steps li::before { display: none; }
    .rg-steps li.is-now { border-top-color: var(--tx-accent-2); }
    .rg-steps li.is-done { border-top-color: var(--tx-live); }
    .rg-steps b { display: block; font-size: 11px; }
    .rg-steps strong { font-size: 13px; line-height: 1.25; margin-top: 2px; }
    .rg-steps span, .rg-trust { display: none; }
    .rg-steps--info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rg-steps--info li { border-top-color: rgba(255, 255, 255, .3); }
}
@media (max-width: 480px) {
    .rg-main { padding-top: 64px; }
    .rg-h1 { font-size: 34px; margin-bottom: 14px; }
    .rg-lede { margin-bottom: 18px; }
}