/* Member portal: one full-screen section in two halves (like the C3 Leadership portal). Left [ink]: logo, emblem,
   pill, headline, Achraf. Right [cream]: the login box. Phones: the dark half becomes a band on top. */
.page-other .mpl, .mpl { display: grid; min-height: 100vh; min-height: 100svh; background: var(--cream); }
@media (min-width: 960px) { .mpl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.mpl__side {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 28px;
  padding: 32px clamp(24px, 4.4vw, 72px) clamp(32px, 4vw, 56px); color: var(--cream);
  background: radial-gradient(90% 70% at 85% 0%, rgba(215, 55, 43, .28), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(138, 31, 23, .35), transparent 65%), var(--ink);
}
.mpl__glow { position: absolute; left: 50%; top: 38%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(215, 55, 43, .22), transparent); pointer-events: none; }
.mpl__logo { position: relative; align-self: flex-start; display: block; }
.mpl__logo img { display: block; width: 92px; height: auto; }

.mpl__emblem { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 0; }

/* ---------- The vault (like the C3 Leadership portal's, in this brand): a 12 s loop. The wheel turns, the bolts
   slide back, the door swings open on its left hinge, a folder rises and its pages lift out (the guide, an agent's
   work, a client dashboard), then the door closes and locks. The door has real thickness: ten discs stacked behind
   its face. Reduced motion: the closed door. ---------- */
@property --mpl-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes mplAngle { to { --mpl-a: 360deg; } }
.vault { position: relative; width: min(100%, 400px, 44vh); aspect-ratio: 1; perspective: 900px; }
.vault > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.vault svg { display: block; overflow: visible; }
.vault__halo {
  inset: -12%; width: auto; height: auto; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(215, 55, 43, .3), rgba(215, 55, 43, .07) 55%, transparent);
  animation: vaultHalo 12s ease-in-out infinite;
}
/* a band of light travels around the vault */
.vault__ring { inset: 8%; width: auto; height: auto; border-radius: 50%; }
.vault__ring::before, .vault__ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--mpl-a), transparent 0 62%, rgba(239, 90, 76, .25) 74%, #ef5a4c 88%, #ffd0c9 93%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: mplAngle 9s linear infinite;
}
.vault__ring::after {
  inset: -4px; filter: blur(8px); opacity: .7;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 6px));
}
.vault__frame { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.vault__ticks { transform-origin: 200px 200px; animation: vaultTurn 80s linear infinite; }
.vault__lip { animation: vaultLip 12s ease-in-out infinite; }

.vault__light { transform-origin: 200px 200px; opacity: .35; animation: vaultInside 12s ease-in-out infinite; }
.vault__folder { transform-origin: 200px 236px; opacity: 0; animation: vaultFolder 12s cubic-bezier(.34, 1.3, .64, 1) infinite; }
.vault__sheet { transform-origin: 200px 236px; transform: translateY(26px); animation: vaultSheet 12s cubic-bezier(.34, 1.4, .64, 1) infinite; }
.vault__sheet--1 { --x: -22px; --lift: -12px; --r: -9deg; }
.vault__sheet--2 { --x: 0px; --lift: -28px; --r: 0deg; animation-delay: .12s; }
.vault__sheet--3 { --x: 22px; --lift: -14px; --r: 9deg; animation-delay: .24s; }

.vault__door { transform-style: preserve-3d; transform-origin: 20.5% 50%; animation: vaultDoor 12s cubic-bezier(.65, 0, .35, 1) infinite; }
.vault__slab {
  position: absolute; left: 20.5%; top: 20.5%; width: 59%; height: 59%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b302b, #120e0c 72%);
  transform: translateZ(calc(var(--z) * -1.6px));
}
.vault__slab--seal { background: #6e1c15; }
.vault__slab:last-of-type { background: #0b0807; box-shadow: 0 26px 44px -12px rgba(0, 0, 0, .65); }
.vault__face { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(.5px); }
.vault__bolts { transform-origin: 200px 200px; animation: vaultBolts 12s ease-in-out infinite; }
.vault__wheel { transform-origin: 200px 200px; animation: vaultWheel 12s cubic-bezier(.65, 0, .35, 1) infinite; }
.vault__hubglow { transform-origin: 200px 200px; opacity: 0; animation: vaultGlow 12s ease-in-out infinite; }

@keyframes vaultTurn { to { transform: rotate(360deg); } }
@keyframes vaultWheel { 0%, 6% { transform: rotate(0deg); } 20%, 80% { transform: rotate(180deg); } 94%, 100% { transform: rotate(0deg); } }
@keyframes vaultBolts { 0%, 20%, 82%, 100% { transform: scale(1); } 26%, 76% { transform: scale(.86); } }
@keyframes vaultGlow { 0%, 16%, 30%, 100% { opacity: 0; transform: scale(.8); } 22%, 25% { opacity: 1; transform: scale(1.35); } }
@keyframes vaultDoor { 0%, 26% { transform: rotateY(0deg); } 40%, 62% { transform: rotateY(-78deg); } 76%, 100% { transform: rotateY(0deg); } }
@keyframes vaultInside { 0%, 28%, 76%, 100% { opacity: .35; transform: scale(.96); } 42%, 60% { opacity: 1; transform: scale(1); } }
@keyframes vaultLip { 0%, 28%, 76%, 100% { opacity: .55; } 42%, 60% { opacity: 1; } }
@keyframes vaultHalo { 0%, 28%, 76%, 100% { transform: scale(.95); opacity: .65; } 44%, 60% { transform: scale(1.08); opacity: 1; } }
@keyframes vaultFolder { 0%, 32% { opacity: 0; transform: translateY(18px) scale(.72); } 44%, 62% { opacity: 1; transform: translateY(0) scale(1); } 72%, 100% { opacity: 0; transform: translateY(14px) scale(.78); } }
@keyframes vaultSheet { 0%, 40% { transform: translateY(26px) rotate(0deg); } 50%, 60% { transform: translate(var(--x), var(--lift)) rotate(var(--r)); } 68%, 100% { transform: translateY(26px) rotate(0deg); } }

.mpl__intro { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.mpl__pill {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px 10px 14px; border-radius: 999px;
  background: rgba(215, 55, 43, .1); box-shadow: inset 0 0 0 1px rgba(239, 90, 76, .35); color: #ffb3a9;
  font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
}
/* a band of light runs around the pill's border */
.mpl__pill::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--mpl-a), transparent 0 60%, #ef5a4c 80%, #ffd0c9 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mplAngle 4s linear infinite;
}
.mpl__pill svg, .mpl__safe svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mpl__head { margin: 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.mpl__head .serif { color: var(--red-bright); }
.mpl__by { display: flex; align-items: center; gap: 16px; }
.mpl__by p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.mpl__by b { font-size: 16px; font-weight: 600; }
.mpl__by span { font-size: 14px; color: var(--muted-light); }
.mpl__av { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; border: 2px solid rgba(245, 239, 230, .8); background: #3a2420; }
.mpl__av img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mpl__main { display: grid; place-items: center; padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); }
.mpl__box { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 18px; color: var(--ink); }
.mpl__title { margin: 0; font-size: clamp(34px, 3.4vw, 48px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.mpl__lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body-on-light); }
.mpl__form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.mpl__label { font-size: 15px; font-weight: 600; }
.mpl__input {
  width: 100%; min-height: 58px; padding: 0 18px; border-radius: 16px; border: 1px solid rgba(20, 17, 16, .18); background: #fff;
  font: 400 17px Geist, system-ui, -apple-system, sans-serif; color: var(--ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mpl__input::placeholder { color: #9a9087; }
.mpl__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(215, 55, 43, .14); }
.mpl__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; margin-top: 4px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--red); color: #fff; font: 600 17px Geist, system-ui, -apple-system, sans-serif;
  box-shadow: 0 16px 34px -16px rgba(215, 55, 43, .9); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.mpl__btn:hover { transform: translateY(-2px); background: #c52f24; box-shadow: 0 20px 40px -16px rgba(215, 55, 43, 1); }
.mpl__btn span { transition: transform .3s var(--ease); }
.mpl__btn:hover span { transform: translateX(3px); }
.mpl__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mpl__safe { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; color: var(--label-on-light); }
.mpl__note { margin: 4px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(20, 17, 16, .1); font-size: 14.5px; line-height: 1.5; color: var(--body-on-light); }
.mpl__note[hidden] { display: none; }
.mpl__note a, .mpl__links a { color: var(--red-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mpl__links { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; padding-top: 26px; border-top: 1px solid rgba(20, 17, 16, .12); }
.mpl__links p { margin: 0; font-size: 15.5px; color: var(--body-on-light); }

/* phones and tablets: a short dark band on top (logo, a smaller emblem, the pill and headline), then the login */
/* phones and tablets: the dark band holds the logo, the pill and the headline, then the vault under them */
@media (max-width: 959px) {
  .mpl__side { gap: 0; padding-bottom: 36px; }
  .mpl__intro { order: 1; margin-top: 32px; gap: 18px; }
  .mpl__emblem { order: 2; margin-top: 30px; }
  .mpl__emblem .vault { width: min(62vw, 250px); }
  .mpl__by { display: none; }
  .mpl__head { font-size: clamp(24px, 6.2vw, 34px); }
  .mpl__main { place-items: start center; padding-top: 40px; }
}
/* shorter laptop screens: the vault, the headline and Achraf on one screen */
@media (min-width: 960px) and (max-height: 860px) {
  .mpl__side { gap: 22px; }
  .vault { width: min(100%, 380px, 46vh); }
}
@media (prefers-reduced-motion: reduce) {
  .vault *, .vault *::before, .vault *::after, .mpl__pill::before { animation: none !important; }
  .mpl__input, .mpl__btn, .mpl__btn span { transition: none; }
}