/* Elevionis UX-4.5 — premium, high-fidelity visual layer.
   Presentation only: existing controls, state authority and business contracts remain intact. */

:root {
  --premium-indigo: #2d2058;
  --premium-indigo-deep: #1c1538;
  --premium-violet: #7550df;
  --premium-lavender: #ece7fb;
  --premium-lavender-soft: #f6f3fc;
  --premium-paper: #fffdf9;
  --premium-blue: #dce9f5;
  --premium-teal: #4f9a91;
  --premium-apricot: #dc896e;
  --premium-shadow: 0 28px 80px rgba(44, 31, 88, 0.14);
  --premium-shadow-soft: 0 16px 42px rgba(44, 31, 88, 0.09);
}

/* Public Auth: editorial story and interaction compose as one bounded scene. */
#login-screen.login-wrapper {
  background:
    radial-gradient(circle at 86% 14%, rgba(117, 80, 223, 0.12), transparent 28rem),
    radial-gradient(circle at 10% 88%, rgba(79, 154, 145, 0.1), transparent 30rem),
    #f5f1fa;
}

#login-screen .login-composition {
  grid-template-columns: minmax(0, 1.08fr) minmax(29rem, 0.92fr);
  border-color: rgba(255, 255, 255, 0.62);
  background: var(--premium-paper);
  box-shadow: 0 36px 100px rgba(35, 23, 70, 0.18);
}

#login-screen .login-brand {
  display: flex;
  flex-direction: column;
  min-height: 42rem;
  padding: clamp(30px, 3.8vw, 58px);
  background: var(--premium-indigo-deep);
}

#login-screen .login-brand::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 16, 48, 0.24), rgba(22, 16, 48, 0.03) 42%, rgba(22, 16, 48, 0.68)),
    radial-gradient(circle at 72% 16%, rgba(255, 244, 222, 0.2), transparent 22rem);
  content: "";
  pointer-events: none;
}

#login-screen .login-logo-wrap {
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

#login-screen .login-brand-copy {
  z-index: 4;
  width: min(35rem, 94%);
  margin-top: clamp(48px, 8vh, 92px);
}

#login-screen .login-brand-kicker { color: #d8cafc; }

#login-screen .login-brand h1 {
  max-width: 9ch;
  color: #fffdfa;
  font-size: clamp(3rem, 4.6vw, 4.8rem);
  font-weight: 750;
  letter-spacing: -0.062em;
  line-height: 0.95;
  text-wrap: balance;
}

#login-screen .login-brand-description {
  max-width: 27rem;
  color: rgba(255, 253, 250, 0.78);
  font-size: clamp(1rem, 1.3vw, 1.13rem);
}

#login-screen .login-brand-proof {
  color: rgba(255, 253, 250, 0.9);
}

#login-screen .login-proof-mark {
  border-color: rgba(255, 255, 255, 0.7);
  background: #6ccbb5;
}

#login-screen .login-mountain {
  z-index: 1;
  inset: 0;
  height: 100%;
  opacity: 1;
}

#login-screen .login-mountain img {
  object-position: 58% center;
  filter: saturate(0.82) contrast(1.02) brightness(0.72);
}

#login-screen .login-mountain::after {
  background:
    linear-gradient(90deg, rgba(27, 20, 55, 0.2), rgba(27, 20, 55, 0.02)),
    linear-gradient(180deg, rgba(27, 20, 55, 0.78) 0%, rgba(27, 20, 55, 0.12) 48%, rgba(27, 20, 55, 0.72) 100%);
}

#login-screen .login-art-caption {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 3vw, 48px);
  bottom: clamp(24px, 3vw, 42px);
  margin: 0;
  color: rgba(255, 253, 250, 0.88);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#login-screen .login-art-caption span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#login-screen .login-art-caption span::before {
  width: 34px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.65;
}

#login-screen .login-panel {
  position: relative;
  padding: clamp(36px, 5vw, 82px);
  background:
    radial-gradient(circle at 100% 0, rgba(117, 80, 223, 0.08), transparent 19rem),
    var(--premium-paper);
}

#login-screen .login-panel::before,
#login-screen .login-panel::after {
  position: absolute;
  border: 1px solid rgba(117, 80, 223, 0.15);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#login-screen .login-panel::before { top: -72px; right: -54px; width: 180px; height: 180px; }
#login-screen .login-panel::after { top: 32px; right: 42px; width: 28px; height: 28px; background: #efe8ff; }

#login-screen .login-card {
  width: min(32rem, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#login-screen .login-card-accent {
  position: static;
  margin-bottom: 30px;
}

#login-screen .login-card-accent span { width: 22px; height: 4px; border-radius: 999px; }
#login-screen .login-card-accent span:nth-child(1) { width: 46px; }

#login-screen .login-form-kicker { color: var(--premium-violet); }

#login-screen .login-view h2 {
  max-width: 12ch;
  color: var(--premium-indigo-deep);
  font-size: clamp(2rem, 2.45vw, 2.65rem);
  letter-spacing: -0.052em;
  line-height: 1.02;
}

#login-screen .public-oauth-button.experience-auth-method,
#login-screen .public-email-button.experience-auth-method {
  min-height: 58px;
  padding-inline: 19px;
  border-color: rgba(45, 32, 88, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 30px rgba(45, 32, 88, 0.06);
}

#login-screen .public-oauth-button.experience-auth-method:hover:not(:disabled),
#login-screen .public-email-button.experience-auth-method:hover:not(:disabled) {
  border-color: var(--premium-violet);
  background: #f5f0ff;
  box-shadow: 0 14px 34px rgba(63, 42, 120, 0.11);
  transform: translateY(-1px);
}

#login-screen .experience-auth-method__icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(45, 32, 88, 0.08);
  place-items: center;
}

#login-screen .form-control {
  border-color: rgba(45, 32, 88, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
}

#login-screen .btn-primary {
  min-height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--premium-violet), #5832bb);
  box-shadow: 0 14px 30px rgba(79, 45, 171, 0.23);
}

/* Shared admission canvas. */
.experience-admission {
  --premium-border: color-mix(in srgb, var(--accent) 15%, var(--line));
  background: #f6f2fa;
}

.experience-admission .admission-ambient {
  background:
    radial-gradient(circle at 4% 8%, rgba(159, 125, 235, 0.19), transparent 29rem),
    radial-gradient(circle at 94% 78%, rgba(88, 170, 158, 0.12), transparent 28rem),
    linear-gradient(145deg, #faf7fc, #f2edf8 62%, #f6f8f5);
}

.experience-admission .admission-header {
  width: min(1500px, calc(100% - 2 * clamp(18px, 3vw, 52px)));
  margin-inline: auto;
  padding: 0;
}

.experience-admission .admission-brand {
  color: var(--premium-indigo-deep);
  font-size: 1.08rem;
  letter-spacing: -0.03em;
}

.experience-admission .admission-brand img {
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(69, 43, 133, 0.15);
}

.experience-admission .admission-shell {
  grid-template-columns: minmax(250px, 284px) minmax(0, 1fr);
  width: min(1500px, calc(100% - 2 * clamp(18px, 3vw, 52px)));
  max-width: 1500px;
  gap: clamp(18px, 2.2vw, 34px);
}

.experience-admission .admission-progress {
  overflow: hidden;
  padding: 32px 25px;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  background:
    radial-gradient(circle at 110% -8%, rgba(255, 255, 255, 0.44), transparent 11rem),
    linear-gradient(160deg, rgba(232, 223, 250, 0.92), rgba(250, 247, 253, 0.92) 52%, rgba(228, 239, 238, 0.88));
  box-shadow: var(--premium-shadow-soft);
}

.experience-admission .admission-progress::after {
  display: block;
  width: 92px;
  height: 92px;
  margin: 26px auto -55px;
  border: 1px solid rgba(117, 80, 223, 0.18);
  border-radius: 48% 52% 62% 38%;
  content: "";
  transform: rotate(18deg);
}

.experience-admission .guided-progress h2 {
  color: var(--premium-indigo-deep);
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.experience-admission .step-list button,
.experience-admission .post-profile-steps li {
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.experience-admission .step-list button[aria-current="step"],
.experience-admission .post-profile-steps li[aria-current="step"] {
  border-color: rgba(117, 80, 223, 0.14);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(62, 39, 119, 0.07);
  transform: translateX(3px);
}

.experience-admission .admission-card {
  position: relative;
  min-height: 730px;
  overflow: clip;
  padding: clamp(34px, 4.8vw, 72px);
  border-color: rgba(255, 255, 255, 0.78);
  border-radius: 34px;
  background:
    radial-gradient(circle at 104% -12%, rgba(117, 80, 223, 0.08), transparent 23rem),
    rgba(255, 253, 249, 0.93);
  box-shadow: var(--premium-shadow);
}

.experience-admission .admission-card::before {
  display: none;
}

.experience-admission .guided-onboarding { max-width: 900px; }

.experience-admission .sr-only {
  display: block !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: normal !important;
}

.experience-admission .assessment-options > .sr-only {
  font-size: 0 !important;
  line-height: 0 !important;
}

.experience-admission .onboarding-step > .eyebrow,
.experience-admission .onboarding-step > h1,
.experience-admission .onboarding-step > .guided-intro {
  text-align: left;
}

.experience-admission .onboarding-step > h1 {
  max-width: 16ch;
  margin: 8px 0 14px;
  color: var(--premium-indigo-deep);
  font-size: clamp(2.15rem, 4.1vw, 3.55rem);
  font-weight: 740;
  letter-spacing: -0.058em;
  line-height: 1.01;
  text-wrap: balance;
}

.experience-admission .onboarding-step > .guided-intro {
  max-width: 650px;
  margin: 0 0 34px;
  font-size: 1rem;
  line-height: 1.72;
}

.experience-admission .eyebrow {
  color: var(--premium-violet);
  font-weight: 850;
  letter-spacing: 0.145em;
}

/* Welcome and completion use the illustration as a true editorial layer. */
.experience-admission .onboarding-welcome,
.experience-admission .onboarding-completion { text-align: left; }

.experience-admission .onboarding-welcome > .eyebrow,
.experience-admission .onboarding-welcome > h1,
.experience-admission .onboarding-welcome > p:not(.eyebrow),
.experience-admission .onboarding-completion > .eyebrow,
.experience-admission .onboarding-completion > h1,
.experience-admission .onboarding-completion > .guided-intro {
  text-align: left;
}

.experience-admission .guided-illustration {
  position: relative;
  width: 100%;
  height: clamp(230px, 31vw, 330px);
  margin: 0 0 34px;
  overflow: hidden;
  border: 0;
  border-radius: 28px 28px 58px 28px;
  background: var(--premium-lavender);
  box-shadow: 0 24px 54px rgba(47, 32, 92, 0.17);
}

.experience-admission .guided-illustration picture,
.experience-admission .guided-illustration img {
  display: block;
  width: 100%;
  height: 100%;
}

.experience-admission .guided-illustration img {
  object-fit: cover;
  object-position: 50% 54%;
  filter: saturate(0.82) contrast(0.98) brightness(0.96);
}

.experience-admission .guided-illustration::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(28, 21, 56, 0.28));
  content: "";
  pointer-events: none;
}

.experience-admission .guided-illustration--complete {
  display: block;
  background: var(--premium-lavender);
}

.experience-admission .guided-illustration--complete > span {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 22px;
  display: grid;
  width: 62px;
  height: 62px;
  border: 5px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: #fff;
  color: #19735b;
  font-size: 1.65rem;
  box-shadow: 0 12px 28px rgba(28, 21, 56, 0.18);
  place-items: center;
}

.experience-admission .guided-reassurance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  border-block: 1px solid rgba(45, 32, 88, 0.1);
}

.experience-admission .guided-reassurance li {
  padding: 18px 20px;
  border: 0;
  border-right: 1px solid rgba(45, 32, 88, 0.1);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.experience-admission .guided-reassurance li:last-child { border-right: 0; }
.experience-admission .guided-reassurance li::before { margin: 0 0 10px; }

/* Forms and choices: fewer boxes, stronger interaction hierarchy. */
.experience-admission .guided-form { gap: 30px; }

.experience-admission .field > span,
.experience-admission .choice-field legend { color: var(--premium-indigo-deep); }

.experience-admission :is(.field input, .field select, .field textarea, .availability-row input, .availability-row select) {
  border-color: rgba(45, 32, 88, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 24px rgba(45, 32, 88, 0.04);
}

.experience-admission :is(.field input, .field select, .field textarea):focus {
  border-color: var(--premium-violet);
  box-shadow: 0 0 0 4px rgba(117, 80, 223, 0.12), 0 12px 28px rgba(45, 32, 88, 0.07);
}

.experience-admission .guided-choice-grid { gap: 13px; }

.experience-admission .guided-choice-row span,
.experience-admission .guided-choice-grid span {
  min-height: 62px;
  padding: 14px 48px 14px 17px;
  border-color: rgba(45, 32, 88, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.68);
  color: #544c68;
  box-shadow: 0 9px 25px rgba(45, 32, 88, 0.045);
}

.experience-admission .guided-choice-row label:hover span,
.experience-admission .guided-choice-grid label:hover span {
  border-color: rgba(117, 80, 223, 0.42);
  background: #fff;
  box-shadow: 0 13px 32px rgba(45, 32, 88, 0.08);
  transform: translateY(-1px);
}

.experience-admission .guided-choice-row input:checked + span,
.experience-admission .guided-choice-grid input:checked + span {
  border-color: var(--premium-violet);
  background: linear-gradient(145deg, #f3edff, #ebe4fb);
  color: var(--premium-indigo-deep);
  box-shadow: 0 0 0 2px rgba(117, 80, 223, 0.09), 0 16px 34px rgba(82, 52, 157, 0.11);
  transform: translateY(-1px);
}

.experience-admission .journey-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.experience-admission .journey-icon-grid span {
  min-height: 94px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 11px;
  padding: 16px 42px 16px 16px;
}

.experience-admission .choice-icon {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  color: var(--premium-violet);
}

.experience-admission #self-level-options {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.experience-admission #self-level-options::before {
  position: absolute;
  z-index: 0;
  top: 28px;
  bottom: 28px;
  left: calc(50% - 0.5px);
  width: 1px;
  background: linear-gradient(var(--premium-blue), var(--premium-violet), var(--premium-apricot));
  content: "";
  opacity: 0.65;
}

.experience-admission #self-level-options label { z-index: 1; }

.experience-admission .guided-disclosure {
  border-color: rgba(45, 32, 88, 0.1);
  border-radius: 17px;
  background: rgba(245, 241, 251, 0.66);
}

/* Avatar system: recognizable, tactile cards without changing upload authority. */
.experience-admission .guided-avatar-layout {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 54px);
}

.experience-admission .avatar-preview--large {
  width: 180px;
  height: 180px;
  border: 7px solid rgba(255, 255, 255, 0.88);
  border-radius: 54px 54px 78px 54px;
  background: linear-gradient(145deg, #7854df, #9a79ea 56%, #6bbcb3);
  box-shadow: 0 24px 48px rgba(71, 42, 143, 0.21);
}

.experience-admission .avatar-preset-grid { gap: 12px; }

.experience-admission .avatar-preset-grid button {
  min-height: 118px;
  padding: 13px 8px 11px;
  border-color: rgba(45, 32, 88, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 25px rgba(45, 32, 88, 0.05);
}

.experience-admission .avatar-preset-grid button:hover,
.experience-admission .avatar-preset-grid button:focus-visible {
  border-color: var(--premium-violet);
  background: #fff;
  box-shadow: 0 14px 30px rgba(55, 35, 108, 0.1);
  transform: translateY(-2px);
}

.experience-admission .avatar-preset-art {
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.72);
  border-radius: 21px;
  box-shadow: 0 8px 18px rgba(45, 32, 88, 0.13);
}

.experience-admission .avatar-preset-art::before,
.experience-admission .avatar-preset-art::after {
  position: absolute;
  left: 50%;
  background: rgba(255, 255, 255, 0.72);
  content: "";
  transform: translateX(-50%);
}

.experience-admission .avatar-preset-art::before { top: 12px; width: 19px; height: 19px; border-radius: 50%; }
.experience-admission .avatar-preset-art::after { bottom: -11px; width: 46px; height: 35px; border-radius: 50% 50% 0 0; }

/* Availability and profile summary read as a personalized story. */
.experience-admission .availability-preset-preview span {
  border: 1px solid rgba(117, 80, 223, 0.12);
  background: #f1ecfb;
}

.experience-admission .availability-editor {
  border: 0;
  border-radius: 20px;
  background: #f4f0f8;
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.08);
}

.experience-admission .guided-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.experience-admission .guided-summary-card {
  position: relative;
  min-height: 138px;
  align-content: space-between;
  padding: 21px;
  border: 0;
  border-radius: 21px;
  background: #f6f2fa;
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.07);
}

.experience-admission .guided-summary-card::before {
  position: absolute;
  top: 0;
  left: 21px;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--premium-violet), var(--premium-teal));
  content: "";
}

.experience-admission .guided-summary-card h3 { margin-top: 5px; color: var(--premium-indigo-deep); font-size: 0.97rem; }
.experience-admission .guided-summary-card button { justify-self: end; }

.experience-admission .guided-lock-note {
  border: 0;
  border-radius: 16px;
  background: #eee8f8;
}

/* Post-profile milestones share one visual grammar. */
.experience-admission .journey-stage { max-width: 900px; }

.experience-admission .journey-stage > h2 {
  color: var(--premium-indigo-deep);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 740;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
}

.experience-admission .journey-vignette {
  position: relative;
  width: min(100%, 820px);
  height: clamp(155px, 22vw, 238px);
  margin: 0 auto 30px;
  overflow: hidden;
  border-radius: 26px 26px 54px 26px;
  background: #e9e3f6;
  box-shadow: 0 20px 48px rgba(45, 32, 88, 0.14);
}

.experience-admission .journey-vignette picture,
.experience-admission .journey-vignette img { display: block; width: 100%; height: 100%; }

.experience-admission .journey-vignette img {
  object-fit: cover;
  object-position: 50% 53%;
  filter: saturate(0.78) contrast(0.97) brightness(0.94);
}

.experience-admission .journey-vignette::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(28, 21, 56, 0.35));
  content: "";
}

.experience-admission .journey-vignette > span {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(28, 21, 56, 0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  backdrop-filter: blur(9px);
}

.experience-admission .journey-vignette--assessment {
  display: grid;
  height: 132px;
  background:
    radial-gradient(circle at 28% 50%, rgba(255, 255, 255, 0.86) 0 24px, transparent 25px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.62) 0 17px, transparent 18px),
    radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.4) 0 11px, transparent 12px),
    linear-gradient(120deg, #d9eaf0, #e6dcf7 55%, #f1d7ce);
  box-shadow: none;
  place-items: center;
}

.experience-admission .journey-vignette--assessment::before {
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(83, 56, 150, 0.42), transparent);
  content: "";
}

.experience-admission .journey-vignette--assessment::after { display: none; }

.experience-admission .locked-mark,
.experience-admission .path-milestone,
.experience-admission .stage-icon {
  border: 1px solid rgba(79, 154, 145, 0.15);
  background: linear-gradient(145deg, #e2f2ec, #cbe8df);
  box-shadow: 0 14px 34px rgba(49, 112, 96, 0.12);
}

.experience-admission .review-stage { max-width: 760px; }

.experience-admission .review-waiting {
  border: 0;
  border-radius: 20px;
  background: #f2eef7;
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.07);
}

.experience-admission .assessment-stage {
  max-width: 780px;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(246, 242, 250, 0.94), rgba(255, 255, 255, 0.72));
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.07);
}

.experience-admission .assessment-options label {
  min-height: 66px;
  border-color: rgba(45, 32, 88, 0.11);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 22px rgba(45, 32, 88, 0.04);
}

.experience-admission .assessment-options label:has(input:checked) {
  border-color: var(--premium-violet);
  background: #f0eafb;
  box-shadow: 0 0 0 3px rgba(117, 80, 223, 0.1), 0 12px 28px rgba(45, 32, 88, 0.07);
}

.experience-admission .path-experience { max-width: 920px; }

.experience-admission .path-milestone {
  position: absolute;
  z-index: 3;
  top: clamp(175px, 22vw, 258px);
  right: 22px;
  border: 5px solid rgba(255, 255, 255, 0.75);
  background: #fff;
}

.experience-admission .path-hero-grid { gap: 0; margin: 32px 0 26px; }

.experience-admission .path-hero-grid article {
  min-height: 132px;
  padding: 22px;
  border: 0;
  border-right: 1px solid rgba(45, 32, 88, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.experience-admission .path-hero-grid article:first-child { border-radius: 22px 0 0 22px; background: #f1ecf9; }
.experience-admission .path-hero-grid article:nth-child(2) { background: #f5f2f8; }
.experience-admission .path-hero-grid article:last-child { border-right: 0; border-radius: 0 22px 22px 0; background: #eef4f2; }

.experience-admission .path-detail-grid article {
  border: 0;
  border-radius: 18px;
  background: #f4f0f8;
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.07);
}

.experience-admission .offering-stage { max-width: 900px; }

.experience-admission .offering-card {
  min-height: 330px;
  padding: 24px;
  border-color: rgba(45, 32, 88, 0.1);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 38px rgba(45, 32, 88, 0.08);
}

.experience-admission .offering-card::before {
  display: block;
  width: 50px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--premium-violet), var(--premium-teal));
  content: "";
}

.experience-admission .offering-card[data-selected="true"] {
  border-color: var(--premium-violet);
  background: #f5f0fc;
  box-shadow: 0 0 0 3px rgba(117, 80, 223, 0.1), 0 22px 44px rgba(45, 32, 88, 0.12);
}

.experience-admission .offering-plan {
  margin-top: auto;
  border-radius: 17px;
  background: #f0ecf5;
}

.experience-admission .hold-stage,
.experience-admission .checkout-stage { max-width: 780px; }

.experience-admission .group-hold-card,
.experience-admission .admission-checkout-card {
  border: 0;
  border-radius: 22px;
  background: #eef5f2;
  box-shadow: inset 0 0 0 1px rgba(51, 122, 104, 0.13), 0 16px 38px rgba(45, 32, 88, 0.06);
}

.experience-admission .checkout-selection-summary article,
.experience-admission .checkout-assurance {
  border: 0;
  border-radius: 18px;
  background: #f3eff7;
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.07);
}

.experience-admission .checkout-stage[data-checkout-state="activated"] .journey-vignette--checkout {
  height: clamp(210px, 26vw, 285px);
  box-shadow: 0 24px 58px rgba(40, 28, 80, 0.18);
}

.experience-admission .checkout-stage[data-checkout-state="activated"] .journey-vignette--checkout > span::before {
  content: "✓ ";
}

.experience-admission .checkout-stage[data-checkout-state="activated"] .journey-vignette--checkout > span {
  background: rgba(28, 92, 75, 0.72);
}

.experience-admission .human-connection {
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 12%, rgba(117, 80, 223, 0.11), transparent 13rem),
    #f3eff8;
  box-shadow: inset 0 0 0 1px rgba(45, 32, 88, 0.08);
}

.experience-admission .human-connection.is-primary {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(117, 80, 223, 0.15), 0 20px 46px rgba(45, 32, 88, 0.09);
}

.experience-admission .appointment-day,
.experience-admission .appointment-card,
.experience-admission .appointment-slot {
  border-color: rgba(45, 32, 88, 0.11);
  background: rgba(255, 255, 255, 0.68);
}

.experience-admission .primary-button {
  border-radius: 15px;
  background: linear-gradient(135deg, var(--premium-violet), #5832bb);
  color: #fff;
  box-shadow: 0 13px 28px rgba(76, 44, 165, 0.22);
}

.experience-admission .secondary-button {
  border-color: rgba(45, 32, 88, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.experience-admission #chapter-actions {
  border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0), rgba(255, 253, 249, 0.95) 32%);
}

/* Dark mode keeps the editorial hierarchy without turning every surface purple. */
html[data-theme="dark"] #login-screen.login-wrapper { background: #141020; }
html[data-theme="dark"] #login-screen .login-panel { background: #1e1928; }
html[data-theme="dark"] #login-screen .login-panel::after { background: #33284b; }
html[data-theme="dark"] #login-screen .login-view h2 { color: #f8f5ff; }
html[data-theme="dark"] #login-screen .public-oauth-button.experience-auth-method,
html[data-theme="dark"] #login-screen .public-email-button.experience-auth-method,
html[data-theme="dark"] #login-screen .form-control { background: #282132; }

html[data-theme="dark"] .experience-admission { background: #15111d; }
html[data-theme="dark"] .experience-admission .admission-ambient {
  background: radial-gradient(circle at 6% 9%, rgba(113, 75, 190, 0.2), transparent 30rem), linear-gradient(145deg, #15111d, #1e1729);
}
html[data-theme="dark"] .experience-admission .admission-card {
  border-color: rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at 104% -12%, rgba(129, 91, 214, 0.12), transparent 22rem), rgba(29, 24, 39, 0.96);
}
html[data-theme="dark"] .experience-admission .admission-progress {
  border-color: rgba(255, 255, 255, 0.05);
  background: linear-gradient(160deg, rgba(51, 41, 72, 0.96), rgba(28, 23, 38, 0.96));
}
html[data-theme="dark"] .experience-admission .admission-brand { color: #f7f3ff; }
html[data-theme="dark"] .experience-admission .guided-progress h2 { color: #f7f3ff; }
html[data-theme="dark"] .experience-admission .step-list button[aria-current="step"],
html[data-theme="dark"] .experience-admission .post-profile-steps li[aria-current="step"] {
  border-color: rgba(170, 140, 255, 0.28);
  background: #3a2f4d;
}
html[data-theme="dark"] .experience-admission .onboarding-step > h1,
html[data-theme="dark"] .experience-admission .journey-stage > h2,
html[data-theme="dark"] .experience-admission .field > span,
html[data-theme="dark"] .experience-admission .choice-field legend { color: #f7f3ff; }
html[data-theme="dark"] .experience-admission :is(.field input, .field select, .field textarea, .availability-row input, .availability-row select),
html[data-theme="dark"] .experience-admission .guided-choice-row span,
html[data-theme="dark"] .experience-admission .guided-choice-grid span,
html[data-theme="dark"] .experience-admission .avatar-preset-grid button,
html[data-theme="dark"] .experience-admission .offering-card { background: rgba(39, 32, 51, 0.9); }
html[data-theme="dark"] .experience-admission .guided-choice-row input:checked + span,
html[data-theme="dark"] .experience-admission .guided-choice-grid input:checked + span,
html[data-theme="dark"] .experience-admission .offering-card[data-selected="true"] { background: #332747; }
html[data-theme="dark"] .experience-admission .guided-summary-card,
html[data-theme="dark"] .experience-admission .review-waiting,
html[data-theme="dark"] .experience-admission .path-detail-grid article,
html[data-theme="dark"] .experience-admission .offering-plan,
html[data-theme="dark"] .experience-admission .checkout-selection-summary article,
html[data-theme="dark"] .experience-admission .checkout-assurance,
html[data-theme="dark"] .experience-admission .human-connection,
html[data-theme="dark"] .experience-admission .availability-editor { background: #272031; }
html[data-theme="dark"] .experience-admission .assessment-stage {
  background: linear-gradient(155deg, rgba(45, 36, 59, 0.98), rgba(31, 25, 42, 0.96));
  box-shadow: inset 0 0 0 1px rgba(170, 140, 255, 0.13);
}
html[data-theme="dark"] .experience-admission .assessment-options label {
  border-color: rgba(190, 169, 231, 0.2);
  background: #2b2437;
  color: #f7f3ff;
}
html[data-theme="dark"] .experience-admission .assessment-options label:has(input:checked) {
  border-color: #aa8cff;
  background: #3a2c50;
}
html[data-theme="dark"] .experience-admission .guided-disclosure summary { color: #f3edff; }
html[data-theme="dark"] .experience-admission .guided-disclosure summary span { color: #c5b9d8; }
html[data-theme="dark"] .experience-admission .availability-preset-preview span {
  border-color: rgba(170, 140, 255, 0.22);
  background: #362b49;
  color: #dfd3ff;
}
html[data-theme="dark"] .experience-admission .path-hero-grid article:first-child { background: #322742; }
html[data-theme="dark"] .experience-admission .path-hero-grid article:nth-child(2) { background: #2b2436; }
html[data-theme="dark"] .experience-admission .path-hero-grid article:last-child { background: #20312f; }
html[data-theme="dark"] .experience-admission .group-hold-card,
html[data-theme="dark"] .experience-admission .admission-checkout-card { background: #20312f; }
html[data-theme="dark"] .experience-admission #chapter-actions { background: linear-gradient(180deg, transparent, rgba(29, 24, 39, 0.97) 32%); }

/* Tablet: focused editorial card with compact progress rail. */
@media (max-width: 63.9375rem), (max-width: 73.75rem) and (orientation: portrait) {
  #login-screen .login-composition { grid-template-columns: 1fr; }
  #login-screen .login-brand {
    display: block;
    min-height: clamp(17rem, 36vh, 24rem);
    padding: 26px clamp(24px, 5vw, 48px);
  }
  #login-screen .login-brand-copy { width: min(32rem, 72%); margin-top: 34px; }
  #login-screen .login-brand h1 { max-width: 12ch; font-size: clamp(2.3rem, 6vw, 3.55rem); }
  #login-screen .login-brand-description { max-width: 24rem; margin-top: 13px; }
  #login-screen .login-mountain { inset: 0; height: 100%; opacity: 1; }
  #login-screen .login-mountain img { object-position: 62% 57%; }
  #login-screen .login-panel { padding: clamp(28px, 5vw, 48px); }
  #login-screen .login-card { width: min(36rem, 100%); }

  .experience-admission .admission-shell { grid-template-columns: 1fr; width: min(850px, calc(100% - 28px)); }
  .experience-admission .admission-progress { padding: 18px 22px; }
  .experience-admission .admission-progress::after { display: none; }
  .experience-admission .step-list button[aria-current="step"],
  .experience-admission .post-profile-steps li[aria-current="step"] { transform: none; }
}

/* Mobile is a separate composition: compact visual, copy, then reachable methods/actions. */
@media (max-width: 37.5rem) {
  #login-screen.login-wrapper { background: #f6f2fa; }
  #login-screen .login-brand {
    min-height: 18.75rem;
    padding: 20px 21px 26px;
    border-radius: 0 0 34px 34px;
  }
  #login-screen .login-logo-wrap { width: 132px; }
  #login-screen .login-brand-copy { width: 74%; margin-top: 27px; }
  #login-screen .login-brand-kicker { display: block; margin-bottom: 7px; font-size: 0.65rem; }
  #login-screen .login-brand-description { display: block; margin-top: 9px; font-size: 0.82rem; line-height: 1.45; }
  #login-screen .login-brand h1 { max-width: 12ch; font-size: clamp(1.95rem, 9vw, 2.45rem); }
  #login-screen .login-mountain { inset: 0; height: 100%; opacity: 1; }
  #login-screen .login-mountain img { object-position: 63% 50%; }
  #login-screen .login-mountain::after {
    background: linear-gradient(90deg, rgba(27, 20, 55, 0.78), rgba(27, 20, 55, 0.06)), linear-gradient(180deg, rgba(27, 20, 55, 0.34), rgba(27, 20, 55, 0.28));
  }
  #login-screen .login-art-caption { display: none; }
  #login-screen .login-panel { padding: 24px 18px 30px; background: transparent; }
  #login-screen .login-panel::before,
  #login-screen .login-panel::after { display: none; }
  #login-screen .login-card { padding: 0; border-radius: 0; }
  #login-screen .login-card-accent { margin-bottom: 22px; }
  #login-screen .login-form-heading { padding-right: 0; }
  #login-screen .login-view h2 { font-size: 1.95rem; }

  .experience-admission .admission-header { width: calc(100% - 28px); }
  .experience-admission .admission-shell { width: calc(100% - 18px); }
  .experience-admission .admission-progress { border-radius: 18px; }
  .experience-admission .admission-card {
    min-height: calc(100dvh - 148px);
    padding: 27px 18px 22px;
    border-radius: 24px;
  }
  .experience-admission .admission-card::before { display: none; }
  .experience-admission .onboarding-step > h1 { max-width: 18ch; font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .experience-admission .onboarding-step > .guided-intro { margin-bottom: 26px; }
  .experience-admission .guided-illustration { height: 188px; margin-bottom: 26px; border-radius: 22px 22px 42px 22px; }
  .experience-admission .guided-illustration img { object-position: 58% 52%; }
  .experience-admission .guided-reassurance { grid-template-columns: 1fr; }
  .experience-admission .guided-reassurance li { display: flex; align-items: center; gap: 11px; padding: 12px 5px; border-right: 0; border-bottom: 1px solid rgba(45, 32, 88, 0.09); }
  .experience-admission .guided-reassurance li:last-child { border-bottom: 0; }
  .experience-admission .guided-reassurance li::before { flex: 0 0 auto; margin: 0; }
  .experience-admission .journey-icon-grid,
  .experience-admission #self-level-options { grid-template-columns: 1fr; }
  .experience-admission #self-level-options::before { display: none; }
  .experience-admission .journey-icon-grid span { min-height: 72px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .experience-admission .guided-avatar-layout { grid-template-columns: 1fr; gap: 26px; }
  .experience-admission .avatar-preview--large { width: 148px; height: 148px; }
  .experience-admission .avatar-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-admission .guided-summary { grid-template-columns: 1fr; }
  .experience-admission .guided-summary-card { min-height: 0; }
  .experience-admission .journey-vignette { height: 150px; margin-bottom: 23px; border-radius: 21px 21px 40px 21px; }
  .experience-admission .journey-vignette img { object-position: 59% 53%; }
  .experience-admission .journey-vignette--assessment { height: 104px; }
  .experience-admission .journey-stage > h2 { font-size: 2rem; }
  .experience-admission .assessment-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
  .experience-admission .assessment-actions > * { min-width: 0; width: 100%; white-space: normal; }
  .experience-admission .path-milestone { position: absolute; top: 151px; right: 13px; width: 52px; height: 52px; }
  .experience-admission .path-hero-grid { display: grid; gap: 9px; }
  .experience-admission .path-hero-grid article,
  .experience-admission .path-hero-grid article:first-child,
  .experience-admission .path-hero-grid article:nth-child(2),
  .experience-admission .path-hero-grid article:last-child { min-height: 0; border: 0; border-radius: 17px; }
  .experience-admission .offering-card { min-height: 0; padding: 20px; }
  .experience-admission #chapter-actions { border-radius: 0 0 20px 20px; }
}

@media (max-width: 23.75rem) {
  #login-screen .login-brand { min-height: 17.5rem; padding-inline: 18px; }
  #login-screen .login-brand-copy { width: 78%; }
  #login-screen .login-panel { padding-inline: 15px; }
  .experience-admission .journey-icon-grid span { padding-right: 42px; }
}

@media (max-height: 38.75rem) and (orientation: landscape) {
  #login-screen .login-brand { min-height: 0; }
  #login-screen .login-brand-copy { margin-top: 24px; }
  #login-screen .login-art-caption { display: none; }
  #login-screen .login-panel { padding-block: 20px; }
  .experience-admission .guided-illustration,
  .experience-admission .journey-vignette { display: none; }
  .experience-admission .path-milestone { position: static; }
  .experience-admission .admission-card { min-height: 0; }
}

@media (min-width: 120rem) {
  #login-screen .login-composition { min-height: min(58rem, calc(100dvh - 76px)); }
  #login-screen .login-brand h1 { font-size: 4.9rem; }
  .experience-admission .admission-shell { width: min(1540px, calc(100% - 104px)); max-width: 1540px; }
  .experience-admission .admission-card { padding-inline: 82px; }
}

@media (prefers-reduced-motion: no-preference) {
  .experience-admission .guided-illustration img,
  .experience-admission .journey-vignette img { animation: premium-art-arrive 600ms ease-out both; }
}

@keyframes premium-art-arrive {
  from { opacity: 0.72; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #login-screen *,
  #login-screen *::before,
  #login-screen *::after,
  .experience-admission *,
  .experience-admission *::before,
  .experience-admission *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}