/* Shared navigation and page layouts for SQALE. */
.desktop-nav a { white-space: nowrap; }
.mobile-nav a[aria-current="page"], .footer-bottom a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.footer-bottom nav { flex-wrap: wrap; }
.mp-center-link { text-align: center; margin-top: 18px; }
.mp-scenic { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg,#fff 20%,#f6f8ff 81%,#fff); }
.mp-landscape { position: absolute; z-index: -1; inset: auto 0 0; height: clamp(220px,33vw,460px); background: url('assets/hero-mountains.png') center bottom/cover no-repeat; mask-image: linear-gradient(transparent,#000 39%,#000 91%,transparent); opacity: .77; }
.mp-inner { padding-block: clamp(56px,7vw,104px) clamp(82px,8vw,120px); }
.mp-intro { margin: 0 auto clamp(34px,5vw,63px); text-align: center; max-width: 830px; }
.mp-intro h1 { font: 400 clamp(46px,6.25vw,84px)/1.02 Georgia,'Times New Roman',serif; letter-spacing: -.058em; text-wrap: balance; margin: 22px 0 18px; color: var(--ink); }
.mp-intro p { max-width: 575px; margin-inline: auto; font-size: clamp(14px,1.5vw,17px); line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.mp-intro .eyebrow-pill { font-size: 12px; padding: 8px 15px; }
.mp-page > .savings { border-top: 0; }
.mp-page > .faq { padding-top: clamp(48px,7vw,90px); }
.mp-plan-wrap .plans-grid { margin: 0 auto; max-width: 1070px; }
.mp-plan-wrap .plan-card { border: 1px solid #dee4f3; background: linear-gradient(160deg,#fff,#f9fafff7); box-shadow: 0 12px 38px #26346012; }
.mp-plan-wrap .plan-featured { background: linear-gradient(160deg,#f5f3ff,#fcfcff); border-color: #b3b6e5; box-shadow: 0 12px 38px #343d8220; }
.mp-plan-wrap .plan-topline { font-size: 12px; color: #465796; }
.mp-plan-wrap .plan-card h3 { font-size: clamp(24px,2.55vw,36px); margin-top: 19px; }
.mp-plan-wrap .plan-intro { margin-top: 10px; min-height: 50px; }
.mp-plan-wrap .pricing-note { background: #fffffff5; color: #4e596f; font-size: 12px; border-radius: 12px; width: fit-content; padding: 8px 15px; margin-inline: auto; }
.mp-people { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(15px,2.4vw,32px); max-width: 1040px; margin-inline: auto; }
.mp-person { min-width: 0; border: 1px solid #dee4f2; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 14px 38px #22336216; }
.mp-person-info { position: relative; padding: 24px 24px 28px; min-height: 118px; }
.mp-person-info h2 { font-size: clamp(26px,3.3vw,43px); line-height: 1.08; padding-right: 45px; }
.mp-role { position: absolute; top: 29px; right: 23px; border: 1px solid #e0e5f7; border-radius: 100px; background: #f2f4ff; color: #3e508c; padding: 3px 8px; font-size: 11px; font-weight: 600; }
.mp-person-info p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.mp-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding-block: clamp(32px,5vw,66px); }
.mp-next h2 { font-size: clamp(29px,4vw,49px); }
.mp-about-hero .mp-inner { padding-bottom: clamp(120px,15vw,220px); }
.mp-about-hero .mp-intro { margin-bottom: 0; }
.mp-about-hero .mp-landscape { height: 58%; opacity: .73; }
.mp-about { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(28px,6vw,85px); padding-block: clamp(45px,8vw,100px); }
.mp-about-image { border-radius: 22px; overflow: hidden; background: #edf0fa; }
.mp-about-image img { width: 100%; height: auto; display: block; }
.mp-about-copy h2, .mp-values h2 { font-size: clamp(36px,4.9vw,64px); }
.mp-about-copy p { margin-top: 17px; line-height: 1.75; color: var(--muted); max-width: 42ch; }
.mp-about-copy .text-link { margin-top: 23px; }
.mp-values { border-top: 1px solid var(--line); padding-block: clamp(35px,5vw,75px); }
.mp-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 31px; gap: 24px; }
.mp-value-grid article { border-top: 1px solid #d7deef; padding-top: 17px; }
.mp-value-grid article > span { font-size: 12px; color: #5267a9; }
.mp-value-grid h3 { font-size: 21px; margin: 10px 0 8px; }
.mp-value-grid p { color: var(--muted); line-height: 1.65; font-size: 14px; max-width: 31ch; }
@media(max-width:1040px) {
  .desktop-nav { gap: 18px; margin-left: 0; }
}
@media(max-width:700px) {
  .mp-people { max-width: 440px; grid-template-columns: 1fr; }
  .mp-person-info { min-height: auto; padding: 18px 20px 20px; }
  .mp-role { top: 19px; right: 20px; }
  .mp-person-info p { margin-top: 7px; }
  .mp-about,.mp-value-grid { grid-template-columns: 1fr; }
  .mp-next { flex-direction: column; align-items: flex-start; gap: 17px; }
  .mp-break { display: none; }
  .mp-landscape { background-size: auto 100%; }
}
@media(max-width:570px) {
  .mp-intro h1 { font-size: clamp(41px,10vw,55px); }
}

.mp-avatar {
  --avatar-sky: #d3ddfb;
  --avatar-dust: #617bc3;
  --avatar-delay: 0s;
  --avatar-art: url('assets/avatar-saif.png');
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end center;
  overflow: hidden;
  aspect-ratio: 1.48;
  background: radial-gradient(ellipse at 36% 7%, #ffffffea, transparent 69%), var(--avatar-sky);
}

.mp-avatar-jonathan {
  --avatar-sky: #e3d8f6;
  --avatar-dust: #8066bc;
  --avatar-delay: .18s;
  --avatar-art: url('assets/avatar-jonathan.png');
}

.mp-avatar-saadgi {
  --avatar-sky: #cce9e8;
  --avatar-dust: #4a929b;
  --avatar-delay: .36s;
  --avatar-art: url('assets/avatar-saadgi.png');
}

.mp-avatar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 13%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50% 50% 0 50%;
  border: 1px solid #ffffffdd;
  box-shadow: 0 0 0 12px #ffffff22, 0 0 0 13px #ffffff70;
  transform: rotate(-13deg);
}

.mp-avatar-sprite {
  position: relative;
  width: 71%;
  max-width: 225px;
  aspect-ratio: 1;
  margin-bottom: -3.2%;
  background: var(--avatar-art) 0 0 / 200% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(5px 6px 0 #303e691c);
}

.mp-pixels {
  position: absolute;
  left: 74%;
  top: 44%;
  width: 4px;
  height: 4px;
  opacity: .65;
  background: var(--avatar-dust);
  box-shadow: -13px 14px var(--avatar-dust), -5px 25px #fff, 10px 13px #fff,
    19px 4px var(--avatar-dust), 30px -9px #fff, 40px -18px var(--avatar-dust),
    24px 21px #fff, -5px -21px #fff, -125px 3px #fff, -143px 22px var(--avatar-dust);
}

@media (prefers-reduced-motion: no-preference) {
  .mp-person.is-visible .mp-avatar-sprite {
    animation: avatar-arrive .75s var(--avatar-delay) steps(7, end) both,
      avatar-blink 2.7s var(--avatar-delay) steps(1, end) both;
  }

  .mp-person.is-visible .mp-pixels {
    animation: avatar-dust 1.2s var(--avatar-delay) steps(7, end) both;
  }

  @media (hover: hover) {
    .mp-person:hover .mp-avatar-sprite {
      animation: avatar-hello 1.1s steps(6, end) both, avatar-wink 1.1s steps(1, end) both;
    }

    .mp-person:hover .mp-pixels {
      animation: avatar-spark .95s steps(6, end) both;
    }
  }
}

@keyframes avatar-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes avatar-blink {
  0%, 75%, 100% { background-position-x: 0; }
  69% { background-position-x: 100%; }
}

@keyframes avatar-wink {
  0%, 46%, 100% { background-position-x: 0; }
  33% { background-position-x: 100%; }
}

@keyframes avatar-hello {
  0%, 100% { transform: translateY(0); }
  36% { transform: translateY(-7px); }
}

@keyframes avatar-dust {
  from { opacity: 0; transform: translate(-15px, 11px); }
  to { opacity: .65; transform: translate(0, 0); }
}

@keyframes avatar-spark {
  0%, 100% { opacity: .65; transform: translate(0, 0); }
  42% { opacity: 1; transform: translate(8px, -8px); }
}

.mp-portal .mp-inner {
  width: min(1200px, calc(100% - 72px));
}

.mp-portal-preview {
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid #d6def3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 60px #2e3b6f20;
}

.mp-portal-image {
  display: block;
  border-radius: 19px 19px 0 0;
  overflow: hidden;
}

.mp-portal-image img {
  width: 100%;
  height: auto;
}

.mp-portal-preview figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid #e4e8f4;
  font-size: 13px;
  color: var(--muted);
}

.mp-portal-preview .text-link {
  gap: 9px;
}

@media (max-width: 700px) {
  .mp-avatar { aspect-ratio: 1.75; }
  .mp-avatar-sprite { width: 65%; }
  .mp-portal .mp-inner { width: calc(100% - 28px); }
  .mp-portal-preview figcaption { padding-inline: 12px; font-size: 11px; }
  .mp-portal-preview .text-link { font-size: 11px; }
}