:root {
  --sa-bg: var(--sm-bg, #fff8ef);
  --sa-paper: #fffdf7;
  --sa-text: var(--sm-text, #10231a);
  --sa-heading: var(--sm-heading, #7f1d1d);
  --sa-primary: var(--sm-primary, #b91c1c);
  --sa-secondary: var(--sm-secondary, #166534);
  --sa-action: #166534;
  --sa-action-hover: #14532d;
  --sa-body-font: var(--sm-font-body, "Open Sans", system-ui, sans-serif);
  --sa-heading-font: var(--sm-font-heading, "Berkshire Swash", Georgia, serif);
  --sa-border: rgba(127, 29, 29, 0.15);
  --sa-shadow: 0 24px 60px rgba(127, 29, 29, 0.12);
  --sa-radius: 26px;
}

.sa-shell,
.sa-shell * {
  box-sizing: border-box;
}

.sa-shell [hidden] {
  display: none !important;
}

.sa-shell {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--sa-text);
  font-family: var(--sa-body-font);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(180deg, rgba(22, 101, 52, 0.08), rgba(255, 248, 239, 0.92));
}

.sa-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 72px;
}

.sa-hero {
  position: relative;
  overflow: hidden;
  margin: 24px 0;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 36px;
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #0f5132, #b91c1c 58%, #f59e0b);
  box-shadow: var(--sa-shadow);
}

.sa-hero::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -80px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 66%);
}

.sa-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 0 14px;
  color: #fff !important;
  font: 400 clamp(2.4rem, 6vw, 4.8rem) / 0.98 var(--sa-heading-font) !important;
}

.sa-hero p {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65;
}

.sa-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.sa-layout,
.sa-card,
.sa-progress,
.sa-form,
.sa-grid,
.sa-field,
.sa-group,
.sa-photo-card,
.sa-photo-handoff,
.sa-document-upload,
.sa-document-upload__row {
  min-width: 0;
}

.sa-shell img,
.sa-shell video,
.sa-shell table {
  max-width: 100%;
}

.sa-progress,
.sa-card,
.sa-gate {
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  background: var(--sa-paper);
  box-shadow: var(--sa-shadow);
}

.sa-progress {
  position: sticky;
  top: 18px;
  padding: 20px;
}

.sa-progress__heading {
  margin: 0 0 14px;
  color: var(--sa-heading) !important;
  font: 400 1.55rem / 1.1 var(--sa-heading-font) !important;
}

.sa-progress ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: application-step;
}

.sa-progress li {
  counter-increment: application-step;
}

.sa-progress a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 14px;
  color: #475569;
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.25;
}

.sa-progress a::before {
  content: counter(application-step);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(127, 29, 29, 0.2);
  border-radius: 50%;
  background: #fff;
  color: var(--sa-heading);
  font-weight: 800;
}

.sa-progress a:hover,
.sa-progress a:focus-visible {
  background: rgba(22, 101, 52, 0.08);
  color: #14532d;
}

.sa-progress a[aria-current="step"] {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.12), rgba(185, 28, 28, 0.1));
  color: #7f1d1d;
  font-weight: 800;
}

.sa-progress a[aria-current="step"]::before {
  border-color: var(--sa-primary);
  background: var(--sa-primary);
  color: #fff;
}

.sa-save-state {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 22px;
  margin: 16px 4px 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.sa-save-state[data-state="saving"]::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid rgba(185, 28, 28, 0.18);
  border-top-color: var(--sa-primary);
  border-radius: 50%;
  animation: sa-spin 0.75s linear infinite;
}

.sa-save-state[data-state="saved"] {
  color: #166534;
}

.sa-save-state[data-state="error"] {
  color: #991b1b;
}

.sa-card {
  padding: clamp(22px, 4vw, 36px);
}

.sa-section-heading {
  margin: 0 0 8px;
  color: var(--sa-heading) !important;
  font: 400 clamp(2rem, 4vw, 2.75rem) / 1 var(--sa-heading-font) !important;
}

.sa-section-copy {
  margin: 0 0 26px;
  color: #526070;
  line-height: 1.65;
}

.sa-form {
  display: grid;
  gap: 19px;
}

.sa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sa-field {
  display: grid;
  gap: 8px;
}

.sa-field--full {
  grid-column: 1 / -1;
}

.sa-field label,
.sa-field legend,
.sa-group > legend {
  color: #7c2d12;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.sa-group > legend {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.sa-field input,
.sa-field select,
.sa-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid rgba(127, 29, 29, 0.2);
  border-radius: 16px;
  color: #1e293b;
  background: #fff;
  font: 500 1rem / 1.45 var(--sa-body-font);
}

.sa-field textarea {
  min-height: 126px;
  resize: vertical;
}

.sa-field input:focus,
.sa-field select:focus,
.sa-field textarea:focus,
.sa-choice input:focus-visible + span,
.sa-checkbox input:focus-visible + span {
  outline: 3px solid rgba(245, 158, 11, 0.34);
  outline-offset: 2px;
  border-color: var(--sa-primary);
}

/* Keep focused controls at the same size as the application field text. */
.sa-field input:focus {
  font-size: 1rem;
}

.sa-field input[readonly] {
  color: #475569;
  background: #f8fafc;
}

.sa-field input[type="date"] {
  color: #1e293b;
  -webkit-text-fill-color: #1e293b;
  color-scheme: light;
}

.sa-field input[type="date"]::-webkit-datetime-edit {
  color: #1e293b;
  -webkit-text-fill-color: #1e293b;
  opacity: 1;
}

.sa-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}

.sa-help {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.sa-required {
  color: #b91c1c;
}

.sa-group {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sa-group > legend ~ * {
  margin-block-start: 12px;
}

.sa-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sa-interview-method {
  margin-bottom: 32px;
}

.sa-interview-method .sa-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sa-choice,
.sa-checkbox {
  position: relative;
  display: block;
  cursor: pointer;
}

.sa-choice input,
.sa-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sa-choice span {
  position: relative;
  display: grid;
  min-height: 100%;
  gap: 7px;
  align-content: start;
  padding: 18px 52px 18px 18px;
  border: 2px solid #d8c4aa;
  border-radius: 18px;
  background: linear-gradient(145deg, #fffdf7, #fff5e6);
  box-shadow: 0 4px 0 rgba(127, 29, 29, 0.09), 0 10px 20px rgba(15, 81, 50, 0.06);
  color: #475569;
  line-height: 1.45;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sa-choice span::after {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 19px;
  height: 19px;
  border: 2px solid #64748b;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.sa-choice strong {
  color: #7f1d1d;
  font-size: 1rem;
}

.sa-choice input:checked + span {
  border-color: #15803d;
  background: #dcfce7;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.14), 0 10px 24px rgba(22, 101, 52, 0.14);
  color: #173a27;
}

.sa-choice input:checked + span::after {
  border-color: #15803d;
  background: #15803d;
  box-shadow: inset 0 0 0 4px #fff;
}

.sa-choice:hover span {
  transform: translateY(-1px);
  border-color: #166534;
  background: #f0fdf4;
  box-shadow: 0 5px 0 rgba(22, 101, 52, 0.11), 0 14px 24px rgba(15, 81, 50, 0.1);
}

.sa-checkbox span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 14px 15px;
  border: 1px solid rgba(127, 29, 29, 0.16);
  border-radius: 15px;
  background: #fff;
  color: #334155;
  line-height: 1.5;
}

.sa-checkbox span::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
}

.sa-checkbox input:checked + span::before {
  border-color: #15803d;
  background: #15803d;
  box-shadow: inset 0 0 0 4px #fff;
}

.sa-region-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sa-region-option span {
  min-height: 58px;
  align-items: center;
  border: 2px solid #d8c4aa;
  background: linear-gradient(145deg, #fffdf7, #fff5e6);
  font-weight: 800;
}

.sa-region-option input:checked + span,
.sa-site-option input:checked + span {
  border-color: #15803d;
  background: #dcfce7;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.12);
  color: #173a27;
}

.sa-site-region-list {
  display: grid;
  gap: 14px;
}

.sa-site-region {
  padding: 16px;
  border: 1px solid rgba(22, 101, 52, 0.17);
  border-radius: 18px;
  background: rgba(22, 101, 52, 0.045);
}

.sa-site-region[hidden] {
  display: none;
}

.sa-site-region h3 {
  margin: 0 0 12px;
  color: #14532d !important;
  font: 800 1rem / 1.3 var(--sa-body-font) !important;
}

.sa-site-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sa-site-option span {
  min-height: 100%;
}

.sa-site-option span::before {
  grid-row: 1 / span 2;
}

.sa-site-option strong,
.sa-site-option small {
  grid-column: 2;
}

.sa-site-option strong {
  color: #7f1d1d;
  line-height: 1.3;
}

.sa-site-option small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
}

.sa-date-builder {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(22, 101, 52, 0.06);
}

.sa-study-details {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(22, 101, 52, 0.14);
  border-radius: 18px;
  background: rgba(22, 101, 52, 0.05);
}

.sa-address-details {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(22, 101, 52, 0.14);
  border-radius: 18px;
  background: rgba(22, 101, 52, 0.05);
}

.sa-address-details[hidden] {
  display: none;
}

.sa-social-profile-links {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(22, 101, 52, 0.18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.06), rgba(245, 158, 11, 0.06));
}

.sa-social-profile-links h3 {
  margin: 0 0 5px;
  color: #14532d !important;
  font: 800 1.05rem / 1.3 var(--sa-body-font) !important;
}

.sa-date-builder__row {
  display: grid;
  grid-template-columns: minmax(0, 260px) auto;
  gap: 10px;
  align-items: end;
}

.sa-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-date-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px 8px 13px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #14532d;
  font-weight: 700;
  font-size: 0.86rem;
}

.sa-date-item > span {
  white-space: nowrap;
}

.sa-date-remove {
  display: inline-flex;
  width: auto !important;
  min-width: auto !important;
  min-height: 30px;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(185, 28, 28, 0.24) !important;
  border-radius: 999px;
  color: #7f1d1d !important;
  background: #fee2e2 !important;
  box-shadow: none !important;
  font: 800 0.72rem / 1 var(--sa-body-font) !important;
  text-decoration: none !important;
  cursor: pointer;
}

.sa-date-remove:hover,
.sa-date-remove:focus-visible {
  border-color: #dc2626 !important;
  background: #fecaca !important;
}

.sa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(127, 29, 29, 0.1);
}

.sa-actions__right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.sa-button {
  display: inline-flex;
  width: auto !important;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 13px 20px;
  border: 2px solid var(--sa-action);
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--sa-action), #15803d);
  box-shadow: 0 12px 24px rgba(22, 101, 52, 0.25);
  font-family: var(--sa-body-font) !important;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sa-button:hover,
.sa-button:focus-visible {
  border-color: var(--sa-action-hover);
  color: #fff !important;
  background: linear-gradient(135deg, var(--sa-action-hover), #166534);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(22, 101, 52, 0.3);
}

.sa-button:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.45);
  outline-offset: 3px;
}

.sa-button:disabled,
.sa-button[aria-busy="true"] {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.sa-button--secondary {
  border: 2px solid rgba(22, 101, 52, 0.32);
  color: #166534 !important;
  background: #f0fdf4;
  box-shadow: none;
}

.sa-button--secondary:hover,
.sa-button--secondary:focus-visible {
  border-color: #166534;
  color: #14532d !important;
  background: #dcfce7;
  box-shadow: 0 10px 22px rgba(22, 101, 52, 0.12);
}

.sa-button--danger {
  min-height: 36px;
  padding: 9px 13px;
  border: 1px solid #fecaca;
  color: #991b1b !important;
  background: #fef2f2;
  box-shadow: none;
  font-size: 0.8rem;
}

.sa-button--danger:hover,
.sa-button--danger:focus-visible {
  border-color: #ef4444;
  color: #7f1d1d !important;
  background: #fee2e2;
  box-shadow: 0 8px 18px rgba(153, 27, 27, 0.12);
}

.sa-actions__right .sa-button {
  min-width: 190px;
  padding-right: 26px;
  padding-left: 26px;
}

.sa-message {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  line-height: 1.55;
}

.sa-message--success {
  border: 1px solid #86efac;
  color: #166534;
  background: #f0fdf4;
}

.sa-message--error {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fef2f2;
}

.sa-message ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.sa-policy-notice {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 3vw, 24px);
  border: 2px solid #dc2626;
  border-radius: 20px;
  color: #3f1d1d;
  background: linear-gradient(145deg, #fff7ed, #fef2f2);
  box-shadow: 0 10px 26px rgba(127, 29, 29, 0.09);
}

.sa-policy-notice--reward {
  border-color: #15803d;
  color: #173a27;
  background: linear-gradient(145deg, #f0fdf4, #fffbeb);
  box-shadow: 0 10px 26px rgba(22, 101, 52, 0.09);
}

.sa-policy-notice h3,
.sa-policy-notice p {
  margin: 0;
}

.sa-policy-notice h3 {
  color: #7f1d1d;
  font: 700 clamp(1.25rem, 2.5vw, 1.55rem) / 1.2 var(--sa-heading-font);
}

.sa-policy-notice--reward h3 {
  color: #166534;
}

.sa-policy-acknowledgement span {
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.86);
}

.sa-interview-summary {
  display: grid;
  gap: 9px;
  padding: 20px;
  border: 1px solid rgba(22, 101, 52, 0.2);
  border-radius: 18px;
  color: #334155;
  background: linear-gradient(145deg, #f0fdf4, #fffdf7);
}

.sa-interview-summary h3,
.sa-interview-summary p {
  margin: 0;
}

.sa-interview-summary h3 {
  color: #14532d !important;
  font: 800 1.15rem / 1.3 var(--sa-body-font) !important;
}

.sa-interview-summary p {
  line-height: 1.55;
}

.sa-interview-summary__eyebrow {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #9a3412;
  background: #ffedd5;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.sa-photo-card {
  display: grid;
  gap: 18px;
  margin: 0 0 28px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(22, 101, 52, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 36%),
    linear-gradient(135deg, #f0fdf4, #fffdf7 58%);
}

.sa-photo-card__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.sa-photo-card__heading h3 {
  margin: 6px 0 7px;
  color: #14532d !important;
  font: 800 clamp(1.2rem, 2.4vw, 1.48rem) / 1.2 var(--sa-body-font) !important;
}

.sa-photo-card__heading p,
.sa-photo-handoff__copy p,
.sa-photo-notice {
  margin: 0;
  color: #526070;
  line-height: 1.55;
}

.sa-photo-card__optional {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-photo-preview {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin: 0;
}

.sa-photo-preview img,
.sa-photo-placeholder {
  width: 120px;
  height: 120px;
  border: 4px solid #fff;
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(15, 81, 50, 0.18);
}

.sa-photo-preview img {
  display: block;
  object-fit: cover;
}

.sa-photo-preview figcaption {
  color: #166534;
  font-size: 0.78rem;
  font-weight: 800;
}

.sa-photo-placeholder {
  display: grid;
  place-items: center;
  color: #527262;
  background:
    radial-gradient(circle at 50% 34%, #d1fae5 0 19%, transparent 20%),
    radial-gradient(ellipse at 50% 94%, #d1fae5 0 42%, transparent 43%),
    #f8fafc;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sa-photo-actions,
.sa-photo-handoff__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sa-photo-actions form,
.sa-photo-handoff__actions form {
  margin: 0;
}

.sa-photo-status {
  padding: 11px 13px;
  border-radius: 12px;
  color: #166534;
  background: #dcfce7;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.sa-photo-status--error {
  color: #991b1b;
  background: #fee2e2;
}

.sa-photo-handoff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(22, 101, 52, 0.18);
  border-radius: 18px;
  background: #fff;
}

.sa-photo-handoff__qr {
  display: grid;
  min-width: 168px;
  min-height: 168px;
  place-items: center;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #64748b;
  background: #fff;
  font-size: 0.78rem;
  text-align: center;
}

.sa-photo-handoff__qr .qr {
  border-collapse: collapse;
  background: #fff;
}

.sa-photo-handoff__qr .qr td {
  width: 4px;
  height: 4px;
  padding: 0;
}

.sa-photo-handoff__qr .qr td.on {
  background: #111;
}

.sa-photo-handoff__qr .qr td.off {
  background: #fff;
}

.sa-photo-handoff__copy {
  display: grid;
  gap: 9px;
}

.sa-photo-handoff__copy h4 {
  margin: 0;
  color: #14532d !important;
  font: 800 1.05rem / 1.3 var(--sa-body-font) !important;
}

.sa-photo-notice {
  padding-top: 15px;
  border-top: 1px solid rgba(22, 101, 52, 0.14);
  font-size: 0.82rem;
}

.sa-photo-notice a {
  color: #0f5f38;
  font-weight: 800;
}

.sa-camera-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 22px;
  border: 0;
  border-radius: 24px;
  color: var(--sa-text);
  background: #fffdf7;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.38);
}

.sa-camera-dialog:not([open]) {
  display: none;
}

.sa-camera-dialog::backdrop {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
}

html.sa-camera-fallback-open {
  overflow: hidden;
}

html.sa-camera-fallback-open::before {
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  content: "";
}

.sa-camera-dialog.sa-camera-dialog--fallback {
  position: fixed;
  z-index: 10001;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 50%;
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: 0;
  transform: translateX(-50%);
}

.sa-camera-dialog__head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sa-camera-dialog__head h3 {
  margin: 0 0 5px;
  color: #7f1d1d !important;
  font: 800 1.35rem / 1.2 var(--sa-body-font) !important;
}

.sa-camera-dialog__head p {
  margin: 0;
  color: #526070;
  line-height: 1.5;
}

.sa-camera-dialog__close {
  display: grid;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 auto;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  color: #7f1d1d !important;
  background: #fee2e2 !important;
  box-shadow: none !important;
  font: 700 1.7rem / 1 var(--sa-body-font) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  cursor: pointer;
}

.sa-camera-dialog__close:hover,
.sa-camera-dialog__close:focus-visible {
  color: #fff !important;
  background: #b91c1c !important;
}

.sa-camera-dialog__viewer {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: #111827;
}

.sa-camera-dialog__viewer video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
}

.sa-camera-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.sa-document-upload {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 24px);
  border: 2px solid rgba(22, 101, 52, 0.25);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.11), transparent 35%),
    linear-gradient(145deg, #f0fdf4, #fffdf7 62%);
}

.sa-document-upload__header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.sa-document-upload__header h3 {
  margin: 7px 0 6px;
  color: #14532d !important;
  font: 800 clamp(1.25rem, 2.5vw, 1.55rem) / 1.2 var(--sa-body-font) !important;
}

.sa-document-upload__header p,
.sa-document-upload__note {
  margin: 0;
  color: #526070;
  line-height: 1.5;
}

.sa-document-upload__required,
.sa-document-upload__count {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.sa-document-upload__required {
  color: #9a3412;
  background: #ffedd5;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.sa-document-upload__count {
  color: #166534;
  background: #dcfce7;
}

.sa-document-upload__list {
  display: grid;
  gap: 12px;
}

.sa-document-upload__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(260px, 1.15fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(127, 29, 29, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.sa-document-upload__row[data-uploaded="1"] {
  border-color: rgba(22, 101, 52, 0.28);
}

.sa-document-upload__status {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #526070;
  font-size: 0.86rem;
}

.sa-document-upload__status h4 {
  margin: 0;
  color: #334155 !important;
  font: 800 1rem / 1.25 var(--sa-body-font) !important;
}

.sa-document-upload__state {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.sa-document-upload__state--uploaded {
  color: #166534;
  background: #dcfce7;
}

.sa-document-upload__state--selected {
  color: #1d4ed8;
  background: #dbeafe;
}

.sa-document-upload__state--missing {
  color: #9a3412;
  background: #ffedd5;
}

.sa-document-upload__file {
  margin: 0;
}

.sa-document-upload__file input[type="file"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  font-size: 0.82rem;
  overflow: hidden;
}

.sa-document-upload__file input[type="file"]::file-selector-button {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #166534;
  font: 800 0.8rem / 1 var(--sa-body-font);
  cursor: pointer;
}

.sa-document-upload__file input[type="file"]:hover::file-selector-button,
.sa-document-upload__file input[type="file"]:focus-visible::file-selector-button {
  background: #14532d;
}

.sa-review {
  display: grid;
  gap: 14px;
}

.sa-review details {
  border: 1px solid rgba(127, 29, 29, 0.13);
  border-radius: 16px;
  background: #fff;
}

.sa-review summary {
  padding: 15px 17px;
  color: #7f1d1d;
  font-weight: 800;
  cursor: pointer;
}

.sa-review dl {
  display: grid;
  grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr);
  gap: 9px 16px;
  margin: 0;
  padding: 0 17px 17px;
}

.sa-review dt {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 700;
}

.sa-review dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #1e293b;
  line-height: 1.45;
}

.sa-status-panel,
.sa-gate {
  max-width: 780px;
  margin: 24px auto 0;
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
}

.sa-status-panel h2,
.sa-gate h2 {
  margin: 0 0 12px;
  color: var(--sa-heading) !important;
  font: 400 clamp(2rem, 5vw, 3rem) / 1 var(--sa-heading-font) !important;
}

.sa-status-panel p,
.sa-gate p {
  max-width: 620px;
  margin: 10px auto;
  color: #526070;
  line-height: 1.65;
}

.sa-status-badge {
  display: inline-flex;
  margin: 8px 0 12px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
  font-weight: 800;
}

.sa-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

.sa-hidden {
  display: none !important;
}

@keyframes sa-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
  .sa-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sa-progress {
    position: static;
    overflow: visible;
    padding: 16px;
  }

  .sa-progress__heading,
  .sa-save-state {
    position: static;
  }

  .sa-progress ol {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .sa-progress a {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    grid-template-columns: 1fr;
    gap: 5px;
    align-content: start;
    justify-items: center;
    padding: 7px 4px;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    line-height: 1.15;
    text-align: center;
  }

  .sa-progress a::before {
    width: 28px;
    height: 28px;
  }

  .sa-date-remove {
    min-width: 44px !important;
    min-height: 44px;
    padding: 8px 12px !important;
  }

  .sa-button--danger {
    min-height: 44px;
  }

  .sa-shell .smHeader__links {
    display: none;
  }

  .sa-shell #smHamburger {
    display: inline-flex;
    margin-left: auto;
  }

  .sa-shell .smHeader__menu,
  body > .smHeader__menu {
    max-width: 360px;
    padding-bottom: calc(1.2em + env(safe-area-inset-bottom, 0px));
  }

  .sa-shell > .smfooter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .sa-wrap {
    width: 100%;
    padding: 16px max(10px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  }

  .sa-layout {
    gap: 16px;
  }

  .sa-hero {
    margin: 12px 0 16px;
    padding: 24px 20px;
  }

  .sa-hero h1 {
    font-size: clamp(2.05rem, 10vw, 2.7rem) !important;
  }

  .sa-hero p {
    line-height: 1.55;
  }

  .sa-hero,
  .sa-card,
  .sa-progress,
  .sa-gate {
    border-radius: 22px;
  }

  .sa-card,
  .sa-gate {
    padding: 20px 18px;
  }

  .sa-progress {
    padding: 14px;
  }

  .sa-section-heading {
    font-size: clamp(1.85rem, 9vw, 2.25rem) !important;
  }

  .sa-section-copy {
    margin-bottom: 20px;
    line-height: 1.55;
  }

  .sa-form,
  .sa-grid {
    gap: 16px;
  }

  .sa-grid,
  .sa-choice-grid,
  .sa-site-grid {
    grid-template-columns: 1fr;
  }

  .sa-interview-method .sa-choice-grid {
    grid-template-columns: 1fr;
  }

  .sa-document-upload__header {
    display: grid;
  }

  .sa-document-upload__count {
    width: fit-content;
  }

  .sa-document-upload__row {
    grid-template-columns: 1fr;
  }

  .sa-date-builder,
  .sa-study-details,
  .sa-address-details,
  .sa-social-profile-links,
  .sa-site-region,
  .sa-photo-card,
  .sa-photo-handoff,
  .sa-document-upload,
  .sa-document-upload__row {
    padding: 14px;
  }

  .sa-photo-card__heading,
  .sa-photo-handoff {
    grid-template-columns: 1fr;
  }

  .sa-photo-preview,
  .sa-photo-placeholder {
    justify-self: center;
  }

  .sa-photo-handoff__qr {
    justify-self: center;
  }

  .sa-photo-actions,
  .sa-photo-actions form,
  .sa-photo-handoff__actions,
  .sa-photo-handoff__actions form,
  .sa-camera-dialog__actions {
    width: 100%;
  }

  .sa-photo-actions .sa-button,
  .sa-photo-actions form .sa-button,
  .sa-photo-handoff__actions .sa-button,
  .sa-photo-handoff__actions form .sa-button,
  .sa-camera-dialog__actions .sa-button {
    width: 100%;
  }

  .sa-camera-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
  }

  .sa-camera-dialog__head {
    gap: 12px;
  }

  .sa-date-builder__row {
    grid-template-columns: 1fr;
  }

  .sa-date-item {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    border-radius: 14px;
  }

  .sa-date-item > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sa-actions,
  .sa-actions__right {
    align-items: stretch;
  }

  .sa-actions,
  .sa-actions__right {
    width: 100%;
  }

  .sa-shell .sa-button {
    width: 100% !important;
  }

  .sa-button--danger {
    min-height: 48px;
  }

  .sa-review dl {
    grid-template-columns: 1fr;
  }

  .sa-shell .smHeader__nav {
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  .sa-shell .smHeader__menu,
  body > .smHeader__menu {
    width: min(86vw, 360px);
  }

  .sa-shell > .smfooter .smfooter__content {
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 360px) {
  .sa-progress ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sa-progress a {
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-content: center;
    justify-items: stretch;
    padding: 7px;
    font-size: 0.78rem;
    text-align: left;
  }

  .sa-card,
  .sa-gate {
    padding: 18px 16px;
  }

  .sa-hero {
    padding: 20px 16px;
  }

  .sa-date-builder,
  .sa-study-details,
  .sa-address-details,
  .sa-social-profile-links,
  .sa-site-region,
  .sa-photo-card,
  .sa-photo-handoff,
  .sa-document-upload,
  .sa-document-upload__row {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-choice span,
  .sa-button {
    transition: none;
  }
}

/* Applicant recruitment progress and interview booking */
.sa-recruitment-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0;padding:0;list-style:none}.sa-recruitment-timeline li{display:grid;gap:5px;padding:13px;border:1px solid #d9e1dc;border-radius:12px;background:#fff}.sa-recruitment-timeline li span{color:#65736d;font-size:.78rem}.sa-recruitment-timeline li[data-state="complete"]{border-color:#8ec7a3;background:#effaf3}.sa-recruitment-timeline li[data-state="current"]{border-color:#deb85f;background:#fff8e8}.sa-interview-card{margin-top:18px;padding:18px;border:1px solid #d8e5dc;border-radius:16px;background:#fbfefc;text-align:left}.sa-interview-card__heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.sa-interview-card h3{margin:0;color:var(--sm-heading);font-size:1.25rem}.sa-device-check{margin:16px 0;padding:16px;border:1px solid #cfe2d5;border-radius:14px;background:#fff}.sa-device-check__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.sa-device-check__heading>div{display:grid;gap:3px}.sa-device-check__heading span{color:#66756e;font-size:.78rem}.sa-device-result{padding:6px 9px;border-radius:999px;background:#f3f4f6;font-size:.75rem;font-weight:800;white-space:nowrap}.sa-device-result[data-state="ready"]{background:#dcfce7;color:#166534}.sa-device-result[data-state="failed"]{background:#fee2e2;color:#991b1b}.sa-device-check__tester{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:12px;align-items:center;margin:14px 0}.sa-device-check video{display:block;width:100%;aspect-ratio:4/3;border-radius:12px;background:#15231b;object-fit:cover}.sa-device-meter{height:12px;border-radius:999px;background:#e5e7eb;overflow:hidden}.sa-device-meter span{display:block;width:3%;height:100%;background:#18a35b;transition:width 80ms linear}.sa-device-confirm{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;line-height:1.45}.sa-device-confirm input{flex:0 0 18px;width:18px;height:18px;margin-top:1px}.sa-slot-list{display:grid;gap:12px;margin-top:16px}.sa-slot{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(190px,1fr) auto;gap:12px;align-items:end;padding:14px;border:1px solid #d9e2dc;border-radius:12px;background:#fff}.sa-slot label{display:grid;gap:5px;font-size:.82rem;font-weight:800}.sa-slot select{width:100%;min-height:44px;border:1px solid #bccbc2;border-radius:9px;padding:8px;background:#fff;font:inherit}.sa-slot .sa-device-confirm{grid-column:1/-1}.sa-slot .sa-button{margin:0}
@media(max-width:760px){.sa-recruitment-timeline{grid-template-columns:1fr 1fr}.sa-device-check__tester,.sa-slot{grid-template-columns:1fr}.sa-slot .sa-button{width:100%}.sa-interview-card__heading,.sa-device-check__heading{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.sa-recruitment-timeline{grid-template-columns:1fr}.sa-interview-card{padding:14px}.sa-device-result{white-space:normal}}