:root {
  --feo-blue: #007ec4;
  --feo-blue-deep: #005f96;
  --feo-ink: #2f3741;
  --feo-muted: #5e6d79;
  --feo-sky: #eef7fc;
  --feo-line: #cfe2ee;
  --feo-white: #fff;
  --feo-error: #a22d2d;
}

.feo-shell,
.feo-manager-shell {
  color: var(--feo-ink);
  font-family: Roboto, Arial, sans-serif;
  margin: 2rem auto 4rem;
  max-width: 1060px;
}

.feo-welcome {
  background: var(--feo-blue);
  border-radius: 1.6rem 1.6rem .55rem .55rem;
  color: var(--feo-white);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) 18rem;
  padding: clamp(2rem, 5vw, 4rem);
}

.feo-welcome h1,
.feo-confirmation h1,
.feo-case-header h1 {
  color: inherit;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0 0 1.25rem;
}

.feo-welcome p {
  color: #f4fbff;
  font-size: 1.08rem;
  line-height: 1.6;
  margin: .65rem 0 0;
  max-width: 68ch;
}

.feo-progress-wrap {
  align-self: end;
  color: #fff;
  font-weight: 700;
}

.feo-progress {
  background: rgba(255,255,255,.28);
  border-radius: 999px;
  height: .55rem;
  margin-top: .75rem;
  overflow: hidden;
}

.feo-progress span {
  background: #fff;
  border-radius: inherit;
  display: block;
  height: 100%;
  transform: scaleX(.1667);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  width: 100%;
}

.feo-form {
  background: var(--feo-white);
  border: 1px solid var(--feo-line);
  border-radius: .55rem 1.6rem 1.6rem 1.6rem;
  box-shadow: 0 .8rem 2.4rem rgba(47,55,65,.12);
  margin-top: .45rem;
  padding: clamp(1.4rem, 4vw, 3.2rem);
}

.feo-step-heading {
  border-bottom: 1px solid var(--feo-line);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

.feo-step-heading h2,
.feo-team-summary h2 {
  color: var(--feo-blue);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  letter-spacing: -.025em;
  margin: 0 0 .5rem;
}

.feo-step-heading p,
.feo-team-summary p {
  color: var(--feo-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}

.feo-grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feo-grid label {
  color: var(--feo-ink);
  display: grid;
  font-weight: 700;
  gap: .55rem;
}

.feo-step[data-feo-step="0"] .feo-grid > label {
  align-content: start;
  grid-template-rows: minmax(3.4rem, auto) auto auto;
}

.feo-grid input,
.feo-grid select,
.feo-grid textarea {
  appearance: none;
  background: #fff;
  border: 1px solid #aacbdf;
  border-radius: .8rem;
  color: var(--feo-ink);
  font: inherit;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  width: 100%;
}

.feo-grid select {
  background-image: linear-gradient(45deg, transparent 50%, var(--feo-ink) 50%), linear-gradient(135deg, var(--feo-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - .95rem) 1.35rem;
  background-repeat: no-repeat;
  background-size: .35rem .35rem, .35rem .35rem;
  padding-right: 3rem;
}

.feo-grid select:disabled {
  background-color: #f3f7fa;
  color: #6c7882;
  cursor: not-allowed;
}

.feo-grid textarea { min-height: 7rem; resize: vertical; }
.feo-grid small { color: var(--feo-muted); font-size: .9rem; font-weight: 400; line-height: 1.45; }
.feo-span { grid-column: 1 / -1; }

.feo-grid input:focus,
.feo-grid select:focus,
.feo-grid textarea:focus,
.feo-button:focus-visible {
  outline: 3px solid rgba(0,126,196,.25);
  outline-offset: 3px;
}

.feo-grid input:invalid:not(:placeholder-shown),
.feo-grid textarea:invalid:not(:placeholder-shown) { border-color: var(--feo-error); }

.feo-actions {
  align-items: center;
  border-top: 1px solid var(--feo-line);
  display: flex;
  gap: .8rem;
  justify-content: flex-end;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
}

.feo-button {
  background: var(--feo-blue);
  border: 0;
  border-radius: .75rem;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 3rem;
  padding: .75rem 1.4rem;
}

.feo-button:hover { background: var(--feo-blue-deep); }
.feo-button:disabled { cursor: wait; opacity: .65; }
.feo-button-secondary { background: transparent; color: var(--feo-blue-deep); }
.feo-button-secondary:hover { background: var(--feo-sky); }

.feo-errors,
.feo-error {
  background: #fff3f3;
  border: 1px solid #e6b8b8;
  border-radius: .75rem;
  color: #812323;
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
}

.feo-review {
  display: grid;
  gap: 0;
}

.feo-review > div {
  border-bottom: 1px solid var(--feo-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(10rem, 35%) 1fr;
  padding: .9rem 0;
}

.feo-review span { overflow-wrap: anywhere; }

.feo-privacy-placeholder {
  background: var(--feo-sky);
  border-radius: .8rem;
  display: grid;
  gap: .4rem;
  line-height: 1.5;
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
}

.feo-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

[data-feo-apprenticeship-field][hidden],
[data-feo-year-12][hidden] {
  display: none !important;
}

.feo-confirmation {
  background: var(--feo-blue);
  border-radius: 1.6rem;
  color: #fff;
  padding: clamp(2rem, 6vw, 4.5rem);
}

.feo-confirmation p { color: #f4fbff; font-size: 1.05rem; max-width: 68ch; }

.feo-case-header {
  align-items: center;
  background: var(--feo-blue);
  border-radius: 1.4rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 2rem 2.4rem;
}

.feo-case-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: .45rem; }
.feo-case-header p { color: #f4fbff; margin: 0; }
.feo-case-status { align-items: flex-end; display: flex; flex-direction: column; gap: .45rem; text-align: end; }
.feo-case-badge { align-items: center; color: #fff; display: inline-flex; font-weight: 800; gap: .55rem; padding: 0; }
.feo-case-badge::before { background: #bfe6d2; border-radius: 50%; content: ""; height: .65rem; width: .65rem; }
.feo-case-status small { color: #f4fbff; font-size: .88rem; max-width: 24rem; }

.feo-team-summary {
  background: var(--feo-sky);
  border-radius: .8rem 1.4rem 1.4rem 1.4rem;
  margin: .45rem 0 2rem;
  padding: clamp(1.4rem, 4vw, 2.5rem);
}

.feo-team-summary dl {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.5rem 0 0;
}

.feo-team-summary dl div { background: #fff; padding: .9rem 1rem; }
.feo-team-summary dt { color: var(--feo-muted); font-size: .82rem; font-weight: 700; }
.feo-team-summary dd { font-weight: 700; margin: .25rem 0 0; overflow-wrap: anywhere; }
.feo-manager-duplicate-details { display: none !important; }
.feo-manager-shell .fso-intro,
.feo-manager-shell .fso-success { display: none !important; }

@media (max-width: 760px) {
  .feo-shell,
  .feo-manager-shell { margin: 1rem auto 3rem; }
  .feo-welcome { grid-template-columns: 1fr; }
  .feo-grid,
  .feo-team-summary dl { grid-template-columns: 1fr; }
  .feo-step[data-feo-step="0"] .feo-grid > label { grid-template-rows: auto; }
  .feo-span { grid-column: auto; }
  .feo-review > div { gap: .25rem; grid-template-columns: 1fr; }
  .feo-case-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .feo-case-status { align-items: flex-start; text-align: start; }
  .feo-actions { justify-content: stretch; }
  .feo-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .feo-progress span { transition: none; }
}