/* ============================================================
   Emirae.Pro shared public FORM kit (.sr-* / fields / buttons /
   steps / sidebar / success). Extracted from the design prototype
   (byte-identical across contact/submit/join). Loaded only on the
   3 form pages. Tokens resolve via `.uaec-ds` on the page <main>.
   Footer + :root + body from the prototype are intentionally dropped
   (owned by Phase 1 theme). Page-warm vars are re-declared on .uaec-ds.
   ============================================================ */
.uaec-ds { --page-warm:#f6f5f1; --page-warm-2:#efece5; --sr-maxw:1240px; }
.sr-wrap { max-width: var(--sr-maxw); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 620px) {
.sr-wrap { padding-inline: 16px; }
}
.sr-intro { position: relative; background: var(--page-warm); border-bottom: 1px solid var(--border); }
.sr-intro::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 220px at 88% -60%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.sr-intro__inner { position: relative; z-index: 1; padding-top: 38px; padding-bottom: 24px; }
@media (max-width: 620px) {
.sr-intro__inner { padding-top: 18px; padding-bottom: 18px; }
}
.sr-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); margin-bottom: 15px; }
.sr-crumbs a { color: var(--text-muted); transition: color var(--dur) var(--ease); }
.sr-crumbs a:hover { color: var(--accent); }
.sr-crumbs svg { width: 13px; height: 13px; color: var(--border-strong); flex: none; }
.sr-crumbs span[aria-current] { color: var(--text-secondary); font-weight: var(--fw-medium); }
.sr-intro__label { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.sr-intro__label::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.sr-intro__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; font-weight: var(--fw-bold); color: var(--text-strong); margin: 0; }
.sr-intro__sub { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; color: var(--text-secondary); max-width: 62ch; margin: 8px 0 0; }
@media (max-width: 620px) {
.sr-intro__title { font-size: clamp(24px, 7vw, 30px); }
}
.sr-layout { position: relative; z-index: 2; margin-top: 28px; padding-bottom: 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
@media (max-width: 1080px) {
.sr-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
}
@media (max-width: 900px) {
.sr-layout { grid-template-columns: 1fr; margin-top: 22px; }
}
@media (max-width: 620px) {
.sr-layout { margin-top: 18px; }
}
.sr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: 0 30px 70px -34px rgba(12,20,44,.4), 0 4px 14px -8px rgba(12,20,44,.14); overflow: hidden; }
.sr-card__head { padding: 22px 30px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 40%, #fff), #fff 70%); }
@media (max-width: 620px) {
.sr-card__head { padding: 18px 18px; }
}
.sr-steps { display: flex; align-items: center; gap: 6px; }
.sr-step-dot { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.sr-step-dot__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
  background: var(--surface); border: 1.5px solid var(--border-strong); transition: all var(--dur) var(--ease); }
.sr-step-dot__n svg { width: 15px; height: 15px; stroke-width: 2.4; }
.sr-step-dot__label { min-width: 0; }
.sr-step-dot__k { display: block; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sr-step-dot__t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-secondary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-step-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--border); min-width: 12px; transition: background var(--dur) var(--ease); }
.sr-step-dot.is-active .sr-step-dot__n { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--accent) 60%, transparent); }
.sr-step-dot.is-active .sr-step-dot__t { color: var(--text-strong); }
.sr-step-dot.is-active .sr-step-dot__k { color: var(--accent); }
.sr-step-dot.is-done .sr-step-dot__n { color: #fff; background: var(--accent); border-color: var(--accent); }
.sr-step-dot.is-done .sr-step-dot__t { color: var(--text-secondary); }
.sr-step-bar.is-done { background: var(--accent); }
@media (max-width: 720px) {
.sr-step-dot__label { display: none; }
.sr-step-dot { flex: none; }
.sr-steps { gap: 4px; }
}
.sr-mprog { display: none; }
@media (max-width: 720px) {
.sr-steps { display: none; }
.sr-mprog { display: block; }
.sr-mprog__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sr-mprog__k { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.sr-mprog__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.sr-mprog__track { height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.sr-mprog__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transition: width .35s var(--ease-out); }
}
.sr-body { padding: 28px 30px; }
@media (max-width: 620px) {
.sr-body { padding: 22px 18px; }
}
.sr-step { display: none; }
.sr-step.is-active { display: block; animation: srFade .32s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
.sr-step.is-active { animation: none; }
}
@keyframes srFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sr-step__head { margin-bottom: 22px; }
.sr-step__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); margin: 0; }
.sr-step__desc { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); margin: 7px 0 0; max-width: 62ch; }
.sr-field { margin-bottom: 20px; }
.sr-field:last-child { margin-bottom: 0; }
.sr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) {
.sr-grid-2 { grid-template-columns: 1fr; gap: 0; }
.sr-grid-2 > .sr-field { margin-bottom: 20px; }
}
.sr-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 8px; }
.sr-req { color: var(--accent); }
.sr-opt { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; background: var(--surface-alt); border-radius: 999px; padding: 2px 8px; }
.sr-help { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); margin: 7px 0 0; }
.sr-input, .sr-select, .sr-textarea {
  width: 100%; font-family: inherit; font-size: var(--fs-body); color: var(--text-strong);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 12px 14px; line-height: 1.4; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); appearance: none; -webkit-appearance: none;
}
.sr-input::placeholder, .sr-textarea::placeholder { color: var(--text-muted); }
.sr-input:hover, .sr-select:hover, .sr-textarea:hover { border-color: var(--text-muted); }
.sr-input:focus, .sr-select:focus, .sr-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: #fff; }
.sr-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; cursor: pointer; }
.sr-select:disabled { background-color: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); }
.sr-select[data-empty="true"] { color: var(--text-muted); }
.sr-textarea { resize: vertical; min-height: 168px; line-height: 1.6; }
.sr-field.has-error .sr-input, .sr-field.has-error .sr-select, .sr-field.has-error .sr-textarea { border-color: var(--error-500); }
.sr-field.has-error .sr-input:focus, .sr-field.has-error .sr-textarea:focus, .sr-field.has-error .sr-select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--error-500) 18%, transparent); }
.sr-error { display: none; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--error-500); margin-top: 7px; }
.sr-error svg { width: 14px; height: 14px; flex: none; }
.sr-field.has-error .sr-error { display: flex; }
.sr-field.has-error .sr-optgrid { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--error-500) 40%, transparent); border-radius: var(--radius-lg); }
.sr-optgrid { display: grid; gap: 10px; }
.sr-optgrid--3 { grid-template-columns: repeat(3, 1fr); }
.sr-optgrid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) {
.sr-optgrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
.sr-optgrid--3, .sr-optgrid--2 { grid-template-columns: 1fr; }
}
.sr-opt-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sr-opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.sr-opt-card__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); transition: all var(--dur) var(--ease); }
.sr-opt-card__ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sr-opt-card__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.25; }
.sr-opt-card__s { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; font-weight: var(--fw-medium); }
.sr-opt-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)); }
.sr-opt-card:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-ring); }
.sr-opt-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.sr-opt-card:has(input:checked) .sr-opt-card__ico { background: var(--accent); border-color: var(--accent); color: #fff; }
.sr-opt-card__check { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(.6); transition: all var(--dur) var(--ease); }
.sr-opt-card__check svg { width: 12px; height: 12px; stroke-width: 3; }
.sr-opt-card:has(input:checked) .sr-opt-card__check { opacity: 1; transform: scale(1); }
.sr-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.sr-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
  transition: all var(--dur) var(--ease); }
.sr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sr-chip svg { width: 15px; height: 15px; stroke-width: 2; opacity: .8; }
.sr-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); color: var(--text-strong); }
.sr-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-ring); }
.sr-chip:has(input:checked) { border-color: var(--accent); background: var(--accent); color: #fff; }
.sr-chip:has(input:checked) svg { opacity: 1; }
.sr-chip__x { display: none; }
.sr-chip:has(input:checked) .sr-chip__plus { display: none; }
.sr-chip:has(input:checked) .sr-chip__x { display: inline-flex; }
.sr-ta-wrap { position: relative; }
.sr-ta-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.sr-count { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sr-count.is-ok { color: var(--success-700); }
.sr-count b { color: var(--text-secondary); }
.sr-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sr-prompt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); cursor: pointer; transition: all var(--dur) var(--ease); }
.sr-prompt svg { width: 14px; height: 14px; color: var(--accent); }
.sr-prompt:hover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); color: var(--accent-hover); }
.sr-prompt.is-used { opacity: .45; }
.sr-selfhelp { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.sr-selfhelp svg { width: 16px; height: 16px; }
.sr-selfhelp:hover { color: var(--accent-hover); text-decoration: underline; }
.sr-privacy { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 26%, var(--warning-50)); }
.sr-privacy svg { width: 17px; height: 17px; flex: none; color: var(--warning-700); margin-top: 1px; }
.sr-privacy p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: color-mix(in srgb, var(--warning-700) 82%, #000); }
.sr-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.sr-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sr-check__box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: #fff; transition: all var(--dur) var(--ease); margin-top: 1px; }
.sr-check__box svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.6); transition: all var(--dur) var(--ease); }
.sr-check:has(input:checked) .sr-check__box { background: var(--accent); border-color: var(--accent); }
.sr-check:has(input:checked) .sr-check__box svg { opacity: 1; transform: scale(1); }
.sr-check:has(input:focus-visible) .sr-check__box { box-shadow: 0 0 0 4px var(--accent-ring); }
.sr-check__t { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }
.sr-check__t a { color: var(--accent); font-weight: var(--fw-medium); }
.sr-check__t a:hover { color: var(--accent-hover); text-decoration: underline; }
.sr-field.has-error .sr-check__box { border-color: var(--error-500); }
.sr-notice { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); }
.sr-notice__ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); color: var(--accent); }
.sr-notice__ico svg { width: 17px; height: 17px; stroke-width: 1.8; }
.sr-notice p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-secondary); }
.sr-notice p b { color: var(--text-strong); font-weight: var(--fw-bold); }
.sr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 30px; border-top: 1px solid var(--border); background: var(--surface); }
@media (max-width: 620px) {
.sr-card__foot { padding: 14px 16px; position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -8px 20px -14px rgba(12,20,44,.3); }
}
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-md); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sr-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }
.sr-btn--primary { background: var(--accent); color: #fff; }
.sr-btn--primary:hover { background: var(--accent-hover); }
.sr-btn--primary:active { background: var(--accent-pressed); }
.sr-btn--ghost { background: var(--surface); color: var(--text-secondary); border-color: var(--border-strong); }
.sr-btn--ghost:hover { color: var(--text-strong); border-color: var(--text-muted); background: var(--surface-alt); }
.sr-btn--block { flex: 1; }
.sr-foot-spacer { flex: 1; }
@media (max-width: 620px) {
.sr-btn { flex: 1; height: 50px; }
.sr-foot-spacer { display: none; }
}
.sr-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
@media (max-width: 900px) {
.sr-side { position: static; }
}
.sr-scard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm); }
.sr-scard__h { display: flex; align-items: center; gap: 9px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }
.sr-scard__h svg { width: 16px; height: 16px; color: var(--accent); }
.sr-flow { display: flex; flex-direction: column; gap: 0; }
.sr-flow__step { position: relative; display: flex; gap: 13px; padding-bottom: 18px; }
.sr-flow__step:last-child { padding-bottom: 0; }
.sr-flow__step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--border); }
.sr-flow__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-bold); position: relative; z-index: 1; }
.sr-flow__t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.sr-flow__s { display: block; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); margin-top: 2px; }
.sr-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.sr-sum__row:last-child { border-bottom: 0; }
.sr-sum__k { color: var(--text-muted); font-weight: var(--fw-medium); flex: none; }
.sr-sum__v { color: var(--text-strong); font-weight: var(--fw-bold); text-align: right; min-width: 0; }
.sr-sum__v.is-empty { color: var(--text-muted); font-weight: var(--fw-medium); font-style: italic; }
.sr-scard p.sr-scard__body { margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-secondary); }
.sr-scard--soft { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 60%, #fff), #fff 80%); border-color: color-mix(in srgb, var(--accent) 14%, var(--border)); }
.sr-assist { position: relative; overflow: hidden; background: linear-gradient(158deg, #101a2e 0%, #16243f 70%); border: 1px solid rgba(255,255,255,.08); color: #fff; }
.sr-assist::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px 160px at 100% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%); }
.sr-assist > * { position: relative; z-index: 1; }
.sr-assist__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-tint); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.sr-assist__t { font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.sr-assist__s { font-size: var(--fs-xs); line-height: 1.55; color: rgba(255,255,255,.68); margin-top: 7px; }
.sr-side__mtoggle { display: none; }
@media (max-width: 900px) {
.sr-side { gap: 12px; margin-top: 20px; }
.sr-scard--collapsible .sr-scard__h { cursor: pointer; margin-bottom: 0; justify-content: space-between; }
.sr-scard--collapsible .sr-scard__h .sr-side__mtoggle { display: inline-flex; margin-left: auto; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.sr-scard--collapsible[data-open="false"] .sr-scard__body-wrap { display: none; }
.sr-scard--collapsible[data-open="true"] .sr-scard__h { margin-bottom: 16px; }
.sr-scard--collapsible[data-open="true"] .sr-side__mtoggle { transform: rotate(180deg); }
}
@media (min-width: 901px) {
.sr-scard__h > .sr-scard__hlabel { display: inline; }
}
.sr-success { display: none; }
.sr-success.is-active { display: block; }
.sr-success__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: 0 30px 70px -34px rgba(12,20,44,.4); overflow: hidden; max-width: 720px; margin-inline: auto; }
.sr-success__top { position: relative; overflow: hidden; padding: 40px 40px 34px; text-align: center; color: #fff; background: linear-gradient(165deg, #0c1325 0%, #16243f 60%, #1b2f52 100%); }
.sr-success__top::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 200px at 50% -20%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 64%); }
.sr-success__top > * { position: relative; z-index: 1; }
@media (max-width: 620px) {
.sr-success__top { padding: 32px 20px 28px; }
}
.sr-success__badge { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.4); animation: srPop .5s var(--ease-out) both; }
.sr-success__badge svg { width: 32px; height: 32px; stroke-width: 2.6; color: #fff; }
@keyframes srPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.sr-success__t { font-size: clamp(22px, 3vw, 28px); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 0; }
.sr-success__s { font-size: var(--fs-sm); line-height: 1.6; color: rgba(255,255,255,.75); margin: 10px auto 0; max-width: 46ch; }
.sr-success__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: #fff; }
.sr-success__mail svg { width: 16px; height: 16px; color: var(--navy-tint); }
.sr-success__body { padding: 30px 40px 34px; }
@media (max-width: 620px) {
.sr-success__body { padding: 24px 20px; }
}
.sr-success__h { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }
.sr-next { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.sr-next__step { display: flex; align-items: flex-start; gap: 13px; padding: 11px 0; }
.sr-next__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); }
.sr-next__t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.sr-next__s { display: block; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-secondary); margin-top: 1px; }
.sr-success__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) {
.sr-success__cta { flex-direction: column; }
.sr-success__cta .sr-btn { width: 100%; }
}

/* Honeypot (visually hidden, must remain in the DOM & submittable). */
.sr-hp { position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Loading state keeps button width; prevents double submit. */
.sr-btn[data-loading] { opacity:.72; pointer-events:none; }

/* Phase 7 fix — taller, comfortable tap targets for the shared form-kit buttons
   on mobile (contact / submit-request / join / auth / how-it-works).
   IMPORTANT: these CTA rows collapse to `flex-direction: column` on mobile while
   the buttons carry `flex: 1` (flex-basis: 0). In a column that makes `height`
   ineffective and the button shrinks to its content height (~26px). `min-height`
   is respected regardless of the flex-basis collapse, so it is what actually
   enforces the size here. */
@media (max-width: 640px) {
  .sr-btn { height: 54px; min-height: 54px; }
}