/* Mission Accomplished payoff. Scoped to .rl-payoff. Neon hero is an intentional
   reward-moment exception; body returns to the Phase 4 cream workspace. */
#missionContainer .rl-payoff {
  --mp-navy: #0f1430; --mp-navy-2: #1b1f4a;
  --mp-pink: #ff3d9a; --mp-cyan: #7fe7ff; --mp-gold: #ffc35a; --mp-orange: #ff7a3d;
  --mp-paper: var(--rl-surface, #fff9ef); --mp-paper-2: var(--rl-surface-secondary, #efe3cf);
  --mp-line: var(--rl-border, #bda679); --mp-ink: var(--rl-text, #171a2b);
  --mp-muted: var(--rl-text-muted, #4a4538); --mp-brand: var(--rl-brand-ink, #b51061);
  --mp-gold-ink: var(--rl-gold-ink, #7a5a17);
  position: relative; display: block; box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 0 !important; overflow: hidden; border-radius: 18px; scroll-margin-top: 80px;
  background: var(--mp-paper); color: var(--mp-ink);
  font-family: Manrope, system-ui, sans-serif; overflow-wrap: anywhere;
}
.rl-payoff *, .rl-payoff *::before, .rl-payoff *::after { box-sizing: border-box; }

.rl-payoff .mp-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgb(15 20 48 / 70%); color: #fff6e8; border: 2px solid var(--mp-gold);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.rl-payoff .mp-close:hover { background: var(--mp-navy); }

/* Hero */
.rl-payoff .mp-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: 44px 20px 30px;
  background: linear-gradient(180deg, #0b0f28 0%, var(--mp-navy-2) 52%, #3a1a4f 78%, #5a1e46 100%);
  color: #fff6e8;
}
.rl-payoff .mp-sun {
  position: absolute; z-index: -2; left: 50%; bottom: 18%; width: min(340px, 70vw); aspect-ratio: 1;
  transform: translate(-50%, 50%); border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 58%, #2a1745 58% 61%, transparent 61% 66%, #2a1745 66% 68%, transparent 68% 74%) ,
    linear-gradient(180deg, var(--mp-gold), var(--mp-orange) 55%, var(--mp-pink));
  opacity: .55;
}
.rl-payoff .mp-grid {
  position: absolute; z-index: -1; left: -25%; right: -25%; bottom: 0; height: 42%;
  background:
    linear-gradient(transparent 0 92%, rgb(255 61 154 / 55%) 92%) 0 0 / 100% 22px,
    linear-gradient(90deg, transparent 0 96%, rgb(127 231 255 / 45%) 96%) 0 0 / 34px 100%;
  transform: perspective(260px) rotateX(58deg); transform-origin: bottom;
  mask-image: linear-gradient(transparent, #000 70%);
}
.rl-payoff .mp-kicker {
  margin: 0 0 8px; font: 700 13px/1.2 Rajdhani, sans-serif; letter-spacing: .32em;
  text-transform: uppercase; color: var(--mp-gold);
}
.rl-payoff .mp-title { margin: 0; line-height: .9; outline: none; }
.rl-payoff .mp-title:focus-visible { outline: 3px solid var(--mp-cyan); outline-offset: 6px; }
.rl-payoff .mp-t1 {
  display: block; font-family: Bungee, Rajdhani, sans-serif; font-weight: 400;
  font-size: clamp(42px, 11vw, 92px); letter-spacing: .02em;
  background: linear-gradient(180deg, #ffffff 0%, var(--mp-cyan) 42%, #2b5bd6 52%, #e8f9ff 64%, #9fdcff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #1a1440) drop-shadow(0 0 14px rgb(127 231 255 / 35%));
}
.rl-payoff .mp-t2 {
  display: block; margin-top: -.12em; transform: rotate(-4deg);
  font-family: Yellowtail, cursive; font-size: clamp(40px, 10vw, 82px);
  color: var(--mp-pink); text-shadow: 0 2px 0 #3a0b2a, 0 0 18px rgb(255 61 154 / 45%);
}
.rl-payoff .mp-mission {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin: 20px auto 0; max-width: 560px;
  font: 700 clamp(14px, 3.4vw, 17px)/1.3 Rajdhani, sans-serif; letter-spacing: .22em;
  text-transform: uppercase; color: #fff6e8;
}
.rl-payoff .mp-mission::before, .rl-payoff .mp-mission::after {
  content: ""; flex: 1 1 24px; min-width: 16px; height: 1px; background: var(--mp-gold);
}
.rl-payoff .mp-mission span { flex: 0 1 auto; min-width: 0; }

/* Body */
.rl-payoff .mp-body { display: grid; gap: 18px; padding: 22px; }
.rl-payoff .mp-label {
  margin: 0 0 8px; font: 800 13px/1.2 Rajdhani, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mp-gold-ink);
}
.rl-payoff .mp-coach {
  display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center;
  padding: 18px; margin-top: -40px; position: relative; z-index: 2;
  background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: 14px;
  box-shadow: 0 10px 28px rgb(15 20 48 / 18%);
}
.rl-payoff .mp-coach-art { width: 100%; max-width: 132px; height: auto; display: block; }
.rl-payoff .mp-quote {
  margin: 0 0 6px; font-size: 21px; font-weight: 800; font-style: italic; line-height: 1.25;
  color: var(--rl-shell, #192039); border-left: 4px solid var(--mp-pink); padding-left: 12px;
}
.rl-payoff .mp-coach-copy { margin: 0; color: var(--mp-muted); font-size: 15px; line-height: 1.55; }

.rl-payoff .mp-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0;
}
.rl-payoff .mp-tile {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0;
  padding: 12px; background: var(--mp-paper-2); border: 1px solid var(--mp-line);
  border-bottom: 3px solid var(--rl-gold, #d4a94a); border-radius: 10px;
}
.rl-payoff .mp-tile:first-child { border-bottom-color: var(--mp-brand); }
.rl-payoff .mp-tile dd { margin: 0; font: 800 26px/1.1 Manrope, sans-serif; color: var(--mp-gold-ink); font-variant-numeric: tabular-nums; }
.rl-payoff .mp-tile:first-child dd { color: var(--mp-brand); }
.rl-payoff .mp-tile dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-muted); }
.rl-payoff .mp-proof { margin: 12px 0 0; font-size: 15px; color: var(--mp-ink); }
.rl-payoff .mp-reel { margin: 8px 0 0; font-size: 14px; font-style: italic; color: var(--mp-muted); }

.rl-payoff .mp-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rl-payoff .mp-choice {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  padding: 12px 16px; text-align: left; cursor: pointer; font: inherit;
  background: var(--mp-paper); color: var(--mp-ink);
  border: 1px solid var(--rl-ui-border-control-on-light, #8f7a55); border-radius: 12px;
  transition: transform .15s ease, background-color .15s ease;
}
.rl-payoff .mp-choice:hover { background: var(--mp-paper-2); transform: translateX(2px); }
.rl-payoff .mp-choice-label { font: 800 17px/1.2 Rajdhani, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.rl-payoff .mp-choice-desc { grid-column: 1; font-size: 14px; color: var(--mp-muted); }
.rl-payoff .mp-choice-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; color: var(--mp-brand); }
.rl-payoff .mp-choice.is-primary {
  background: linear-gradient(120deg, var(--mp-brand), #6d1a63); color: #fff6e8; border-color: transparent;
}
.rl-payoff .mp-choice.is-primary .mp-choice-desc, .rl-payoff .mp-choice.is-primary .mp-choice-arrow { color: #fbe6ef; }
.rl-payoff .mp-progress {
  width: 100%; min-height: 48px; padding: 12px 16px; text-align: left;
  display: flex; justify-content: space-between; gap: 12px; cursor: pointer;
  background: var(--mp-paper-2); color: var(--mp-ink);
  border: 2px solid var(--mp-gold-ink); border-radius: 10px;
  font: 800 16px/1.3 Manrope, sans-serif;
}
.rl-payoff .mp-progress:hover { background: var(--mp-paper); }
.rl-payoff .mp-choice:not(.is-primary) {
  background: transparent; border-color: transparent; border-top-color: var(--mp-line);
  border-radius: 0; padding: 10px 6px; min-height: 56px;
}
.rl-payoff .mp-choice:not(.is-primary) .mp-choice-label {
  font: 600 15px/1.3 Manrope, sans-serif; letter-spacing: 0; text-transform: none;
}
.rl-payoff .mp-choice:not(.is-primary) .mp-choice-desc { font-size: 13px; }

.rl-payoff .mp-tomorrow {
  order: 1; justify-self: center; width: 100%; max-width: 680px; text-align: center;
  padding: 14px 16px; border-radius: 12px; color: #f3ecdf;
  background: linear-gradient(100deg, var(--mp-navy) 0%, #2c1b4a 100%);
}
.rl-payoff .mp-tomorrow .mp-label { color: var(--mp-gold); }
.rl-payoff .mp-tomorrow p { margin: 0; font-size: 15px; }
.rl-payoff .mp-tomorrow .mp-ghost { margin-top: 10px; background: transparent; color: #fff6e8; border-color: var(--mp-gold); }

.rl-payoff .mp-secondary { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.rl-payoff .mp-ghost {
  min-height: 44px; padding: 10px 16px; border-radius: 10px; cursor: pointer; font: 700 15px Manrope, sans-serif;
  background: var(--mp-paper); color: var(--mp-brand); border: 1px solid var(--rl-brand, #e0457f);
}
.rl-payoff .mp-details { border: 1px solid var(--mp-line); border-radius: 10px; padding: 0 14px; background: var(--mp-paper); }
.rl-payoff .mp-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--mp-ink); }
.rl-payoff .mp-details[open] { padding-bottom: 14px; }
.rl-payoff #_mcShareBtn {
  background: transparent; border-color: transparent; color: var(--mp-muted);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.rl-payoff .mp-details > summary { font-size: 14px; font-weight: 500; }
.rl-payoff .mp-details label { display: grid; gap: 6px; margin-bottom: 8px; font-weight: 600; }
.rl-payoff .mp-back {
  align-self: center; min-height: 44px; padding: 8px 14px; background: none; border: 0; cursor: pointer;
  font: 600 14px Manrope, sans-serif; color: var(--mp-muted); text-decoration: underline; text-underline-offset: 3px;
}
.rl-payoff :is(button, summary, textarea):focus-visible { outline: 3px solid var(--mp-brand); outline-offset: 2px; }
.rl-payoff .mp-close:focus-visible, .rl-payoff .mp-tomorrow .mp-ghost:focus-visible { outline-color: var(--mp-cyan); }

/* Desktop: two-column body below the hero */
@media (min-width: 900px) {
  #missionContainer .rl-payoff { max-width: 1040px; }
  .rl-payoff .mp-body { grid-template-columns: 1.15fr 1fr; padding: 26px 30px 30px; column-gap: 24px; }
  .rl-payoff .mp-coach, .rl-payoff .mp-earned { grid-column: 1; }
  .rl-payoff .mp-next { grid-column: 2; grid-row: 1 / span 2; }
  .rl-payoff .mp-tomorrow { grid-column: 1 / -1; }
  .rl-payoff .mp-secondary { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rl-payoff .mp-details { flex: 1 1 260px; }
  .rl-payoff .mp-hero { padding: 54px 30px 64px; }
}
@media (max-width: 480px) {
  #missionContainer .rl-payoff { border-radius: 0; }
  .rl-payoff .mp-hero { padding: 56px 14px 50px; }
  .rl-payoff .mp-body { padding: 16px 14px; gap: 16px; }
  .rl-payoff .mp-coach { grid-template-columns: 84px 1fr; gap: 12px; padding: 14px; }
  .rl-payoff .mp-quote { font-size: 18px; }
  .rl-payoff .mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-payoff .mp-mission { letter-spacing: .12em; }
}
@media (max-width: 340px) {
  .rl-payoff .mp-coach { grid-template-columns: 1fr; text-align: left; }
  .rl-payoff .mp-coach-art { max-width: 96px; }
  .rl-payoff .mp-t1 { font-size: 36px; }
  .rl-payoff .mp-t2 { font-size: 38px; }
  .rl-payoff .mp-tile dd { font-size: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rl-payoff .mp-t1 { animation: mp-rise .6s cubic-bezier(.2,.8,.2,1) both; }
  .rl-payoff .mp-t2 { animation: mp-slash .7s .18s cubic-bezier(.2,.8,.2,1) both; }
  .rl-payoff .mp-mission, .rl-payoff .mp-coach { animation: mp-fade .5s .4s ease-out both; }
  .rl-payoff .mp-earned, .rl-payoff .mp-next { animation: mp-fade .5s .55s ease-out both; }
  .rl-payoff .mp-sun { animation: mp-sun 1.2s ease-out both; }
  @keyframes mp-rise { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes mp-slash { from { opacity: 0; transform: rotate(-4deg) translateX(-30px); } to { opacity: 1; transform: rotate(-4deg); } }
  @keyframes mp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes mp-sun { from { opacity: 0; transform: translate(-50%, 70%); } to { opacity: .55; transform: translate(-50%, 50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .rl-payoff, .rl-payoff * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .rl-payoff .mp-t1 { color: CanvasText; background: none; }
  .rl-payoff .mp-choice, .rl-payoff .mp-tile { border: 1px solid CanvasText; }
}