/* Page-owned success composition: the shared shell remains available above and below it. */
:root {
  --success-ink: #1e1e22;
  --success-muted: #5e5b66;
  --success-canvas: #f1eef2;
  --success-surface: #fff;
  --success-pink: #ef4ea2;
  --success-yellow: #fdcc00;
  --success-border: rgb(30 30 34 / 14%);
}

.success-page {
  min-width: 320px;
  margin: 0;
  background: var(--success-canvas);
  color: var(--success-ink);
  font-family: Involve, Arial, sans-serif;
}

.success-page [hidden] { display: none !important; }

/* Keep the copied navigation opaque and give the helper content a stable starting edge. */
.success-page > [data-helper-shell="header"] {
  position: relative !important;
  z-index: 10;
  display: block;
  width: 100%;
  height: 7.25rem !important;
  min-height: 7.25rem !important;
  padding: 0 !important;
  background: var(--success-surface) !important;
  color: var(--success-ink);
  overflow: visible !important;
}

.success-page > [data-helper-shell="header"] > header,
.success-page > [data-helper-shell="header"] [data-homepage-region-content] {
  width: 100% !important;
  height: 7.25rem !important;
  min-height: 7.25rem !important;
  background: var(--success-surface) !important;
  background-image: none !important;
}

.success-page > [data-helper-shell="header"] .site-nav {
  width: min(100% - 3rem, 100rem);
  min-height: 7.25rem;
  margin-inline: auto;
  background: var(--success-surface);
}

.success-page > [data-helper-shell="header"] .hero-stage { display: none !important; }

.success-shell {
  position: relative;
  z-index: 3;
  background: var(--success-surface);
  color: var(--success-ink);
  box-shadow: 0 1px 0 rgb(30 30 34 / 10%);
}

.success-shell [data-homepage-region-content] {
  min-height: 0;
  background-color: var(--success-surface);
  background-image: none;
}

.success-shell .site-nav {
  min-height: 7.25rem;
}

.success-shell__header-space {
  min-height: clamp(1.25rem, 3vw, 3rem) !important;
  padding: 0 !important;
}

.success-shell .navigation-link,
.success-shell .phone,
.success-shell .auth-link { color: var(--success-ink); }

.success-shell .navigation-link:hover,
.success-shell .navigation-link:focus-visible,
.success-shell .phone:hover,
.success-shell .phone:focus-visible,
.success-shell .auth-link:hover,
.success-shell .auth-link:focus-visible { color: var(--success-pink); }

.success-shell .navigation-link:focus-visible,
.success-shell .phone:focus-visible,
.success-shell .brand:focus-visible,
.success-shell .auth-link:focus-visible,
.success-shell .nav-toggle:focus-visible { outline-color: var(--success-pink); }

.success-main {
  display: block;
  background: var(--success-canvas);
}

.success-main section { margin: 0; }

.success-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(4.5rem, 9vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--success-canvas);
}

.success-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  width: min(37vw, 34rem);
  height: min(24vw, 20rem);
  background: var(--success-yellow);
  content: "";
  opacity: .9;
}

.success-hero__inner,
.success-next__inner,
.success-route__inner {
  width: min(100% - 3rem, 100rem);
  margin-inline: auto;
}

.success-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 20rem);
  align-items: end;
  gap: clamp(2rem, 8vw, 10rem);
}

.success-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--success-pink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.success-hero h1,
.success-section-heading {
  margin: 0;
  color: var(--success-ink);
  font-weight: 700;
  letter-spacing: -.045em;
}

.success-hero h1 {
  max-width: 48rem;
  font-size: clamp(3.25rem, 7.4vw, 8.25rem);
  line-height: .92;
}

.success-hero__lead {
  max-width: 38rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  color: var(--success-muted);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.45;
}

.success-hero__actions,
.success-route__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.success-hero__actions { margin-top: 2.25rem; }

.success-hero__action,
.success-route__link {
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--success-ink);
  border-radius: 999px;
  padding: .75rem 1.25rem;
  color: var(--success-ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.success-hero__action:hover,
.success-hero__action:focus-visible,
.success-route__link:hover,
.success-route__link:focus-visible {
  background: var(--success-ink);
  color: #fff;
  transform: translateY(-2px);
}

.success-hero__action--primary,
.success-route__link--primary {
  border-color: var(--success-pink);
  background: var(--success-pink);
  color: #fff;
}

.success-hero__action--primary:hover,
.success-hero__action--primary:focus-visible,
.success-route__link--primary:hover,
.success-route__link--primary:focus-visible {
  border-color: var(--success-ink);
  background: var(--success-ink);
}

.success-signal {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid var(--success-border);
  border-radius: 50%;
  background: var(--success-surface);
  aspect-ratio: 1;
  box-shadow: 1rem 1rem 0 var(--success-ink);
}

.success-signal__mark {
  display: grid;
  width: 5.5rem;
  height: 5.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--success-pink);
  color: #fff;
  font-size: 3.25rem;
  line-height: 1;
}

.success-signal__label {
  align-self: end;
  color: var(--success-ink);
  font-size: 1rem;
  font-weight: 700;
}

.success-next {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: var(--success-surface);
}

.success-section-heading {
  max-width: 48rem;
  font-size: clamp(2.4rem, 5vw, 5.5rem);
  line-height: .98;
}

.success-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  border: 1px solid var(--success-border);
  background: var(--success-border);
}

.success-next__card {
  min-height: 15rem;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--success-surface);
}

.success-next__index {
  display: block;
  margin-bottom: 3rem;
  color: var(--success-pink);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.success-next__card h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.7vw, 1.7rem);
  line-height: 1.1;
}

.success-next__card p {
  margin: 1rem 0 0;
  color: var(--success-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.success-route {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: var(--success-pink);
}

.success-route__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 24rem);
  align-items: center;
  gap: clamp(2rem, 8vw, 10rem);
}

.success-route .success-eyebrow,
.success-route .success-section-heading,
.success-route p { color: #fff; }

.success-route__copy > p:not(.success-eyebrow) {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  font-size: 1.15rem;
  line-height: 1.5;
}

.success-route__links { margin-top: 2rem; }

.success-route__link {
  border-color: #fff;
  color: #fff;
}

.success-route__link--primary {
  border-color: var(--success-ink);
  background: var(--success-ink);
}

.success-route__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 1rem 1rem 0 var(--success-yellow);
  object-fit: cover;
}

.success-footer__settings {
  justify-self: center;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.success-page [data-homepage-region="15-footer"] .spielquora-footer__brand,
.success-page [data-homepage-region="15-footer"] .spielquora-footer__brand:visited {
  display: block;
  width: 138px;
  height: 138px;
  color: inherit;
  text-decoration: none;
}

.success-page [data-homepage-region="15-footer"] .spielquora-footer__brand:hover,
.success-page [data-homepage-region="15-footer"] .spielquora-footer__brand:focus-visible {
  color: inherit;
  text-decoration: none;
}

.success-page [data-homepage-region="15-footer"] .spielquora-footer__link,
.success-page [data-homepage-region="15-footer"] .spielquora-footer__link:visited {
  color: inherit;
  text-decoration: none;
}

.success-page [data-homepage-region="15-footer"] .spielquora-footer__link:hover,
.success-page [data-homepage-region="15-footer"] .spielquora-footer__link:focus-visible {
  color: var(--success-pink);
  text-decoration: none;
}

.success-page [data-homepage-region="15-footer"] .spielquora-footer__brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.success-settings,
.success-auth,
.success-profile {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(30 30 34 / 72%);
}

.success-settings__panel,
.success-auth__panel,
.success-profile__panel {
  position: relative;
  width: min(100%, 32rem);
  max-height: calc(100vh - 2rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--success-border);
  border-radius: 1.25rem;
  background: var(--success-surface);
  box-shadow: 1rem 1rem 0 var(--success-ink);
}

.success-settings h2,
.success-auth h2,
.success-profile h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.04em;
  line-height: 1;
}

.success-settings p:not(.success-eyebrow) {
  color: var(--success-muted);
  line-height: 1.5;
}

.success-settings__actions,
.success-auth__switcher,
.success-profile__avatar-row,
.success-profile__grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.success-settings__actions { justify-content: flex-end; margin-top: 2rem; }

.success-settings__button,
.success-auth__tab,
.success-auth__submit,
.success-profile__submit {
  min-height: 2.9rem;
  border: 1px solid var(--success-ink);
  border-radius: 999px;
  padding: .7rem 1rem;
  background: transparent;
  color: var(--success-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.success-settings__button--primary,
.success-auth__submit,
.success-profile__submit {
  border-color: var(--success-pink);
  background: var(--success-pink);
  color: #fff;
}

.success-auth__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--success-border);
  border-radius: 50%;
  background: transparent;
  color: var(--success-ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.success-auth__switcher { margin-top: 1.5rem; }

.success-auth__tab.is-active {
  border-color: var(--success-ink);
  background: var(--success-ink);
  color: #fff;
}

.success-auth__form,
.success-profile__form { display: grid; gap: 1rem; margin-top: 1.25rem; }

.success-auth__field,
.success-profile__grid label,
.success-profile__about {
  display: grid;
  gap: .4rem;
  color: var(--success-ink);
  font-size: .9rem;
  font-weight: 700;
}

.success-auth__field input,
.success-profile__grid input,
.success-profile__about textarea {
  width: 100%;
  border: 1px solid var(--success-border);
  border-radius: .65rem;
  padding: .8rem .9rem;
  background: #fff;
  color: var(--success-ink);
  font: inherit;
}

.success-auth__field input:focus,
.success-profile__grid input:focus,
.success-profile__about textarea:focus { border-color: var(--success-pink); outline: 3px solid rgb(239 78 162 / 22%); }

.success-auth__message,
.success-profile__message {
  min-height: 1.4rem;
  margin: 0;
  color: #a22a63;
  font-size: .9rem;
}

.success-profile__panel { width: min(100%, 42rem); overflow: auto; }

.success-profile__avatar-row { align-items: center; }

.success-profile__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  animation: success-avatar-in .35s ease both;
}

.success-profile__upload {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  border: 1px dashed var(--success-border);
  border-radius: .65rem;
  padding: .6rem .8rem;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
}

.success-profile__upload input { width: 1px; height: 1px; opacity: 0; position: absolute; }

.success-profile__grid > label { flex: 1 1 10rem; }

.success-profile__about textarea { resize: vertical; }

@keyframes success-avatar-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 800px) {
  .success-hero__inner,
  .success-route__inner { grid-template-columns: 1fr; }

  .success-signal { width: min(13rem, 50vw); margin-inline: auto; }

  .success-next__grid { grid-template-columns: 1fr; }

  .success-next__card { min-height: 0; }

  .success-next__index { margin-bottom: 1.5rem; }

  .success-route__art { width: min(15rem, 60vw); margin-inline: auto; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .success-page [data-homepage-region="15-footer"] .spielquora-footer__top {
    grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .success-page [data-homepage-region="15-footer"] .spielquora-footer__nav {
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: .65rem;
    padding-top: 2rem;
  }

  .success-page [data-homepage-region="15-footer"] .spielquora-footer__link {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .success-hero__inner,
  .success-next__inner,
  .success-route__inner { width: min(100% - 2rem, 38rem); }

  .success-hero { padding-top: 3.5rem; }

  .success-hero::before { width: 52vw; height: 10rem; }

  .success-hero__actions,
  .success-route__links { align-items: stretch; flex-direction: column; }

  .success-hero__action,
  .success-route__link { width: 100%; }

  .success-signal { box-shadow: .65rem .65rem 0 var(--success-ink); }

  .success-settings__panel,
  .success-auth__panel,
  .success-profile__panel { box-shadow: .6rem .6rem 0 var(--success-ink); }

  .success-settings__actions { flex-direction: column-reverse; }

  .success-settings__button { width: 100%; }
}