/* 08 · private · MOBILE (below 1024 px). Owner: PROGRESS-M. Every selector is scoped to #private .v-mobile */

#private .v-mobile {
  background: var(--selected);
  overflow-x: clip;
  --pw: min(56vw, 244px);   /* the lock-screen phone */
}

/* §15: spacing is set centrally — exactly --section-y top and bottom */
#private .v-mobile .vm {
  max-width: 600px; margin: 0 auto;
  padding: var(--section-y) max(var(--gutter), env(safe-area-inset-right)) var(--section-y) max(var(--gutter), env(safe-area-inset-left));
}

/* ---- the four points sit directly on the pale blue band (§14: no wrapper panel) ---- */
/* phones: the head is centred like the other sections; the points stay a left-aligned list, centred as a block */
#private .v-mobile .vm-head { text-align: center; }
#private .v-mobile .vm-points { margin: 32px auto 0; max-width: 360px; gap: 22px; }
#private .v-mobile .vm-points li { font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
#private .v-mobile .vm-points li::before { top: 1px; }
#private .v-mobile .vm-points li b {
  display: block; margin-bottom: 3px;
  font-size: 17.5px; line-height: 1.35; letter-spacing: -.005em; color: var(--ink);
}
#private .v-mobile .vm-points .pro-mark { margin-left: 4px; vertical-align: 2px; }
#private .v-mobile .vm-nw { white-space: nowrap; }

/* ---- the real lock screen, with the locked star standing beside it (never over it) ---- */
#private .v-mobile .vm-stage {
  position: relative; isolation: isolate;
  margin-top: 40px;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 3vw, 16px);
}
#private .v-mobile .vm-stage::before {          /* a soft blue light behind the phone and the star */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 4%; bottom: 0;
  background: radial-gradient(closest-side, var(--tint) 30%, transparent);
  pointer-events: none;
}
#private .v-mobile .vm-phone { flex: none; isolation: isolate; }
#private .v-mobile .vm-phone.grounded::after {
  left: 8%; right: 8%; bottom: -17px; height: 30px;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .22), rgba(15, 26, 43, .07) 55%, rgba(15, 26, 43, 0));
}
#private .v-mobile .vm-stage .phone {
  --w: var(--pw);
  /* UX red team 30 Sep: the shared phone shadow (made for the desktop's 80 px padding) spilled a grey haze over the top
     of the Pro section below. The Look back phones' tighter shadow fades out inside our 52 px bottom padding. */
  box-shadow:
    0 36px 58px -26px rgba(15, 26, 43, .42),
    0 14px 28px -14px rgba(15, 26, 43, .26),
    0 2px 6px rgba(15, 26, 43, .10);
}
#private .v-mobile .vm-star {
  flex: none; width: clamp(84px, 26vw, 122px);
  margin-bottom: calc(var(--pw) * .1);
}
#private .v-mobile .vm-star img { width: 100%; filter: var(--art-drop); }
#private .v-mobile .vm-star .art-shadow { width: 50%; margin-top: 14px; background: var(--edge); }


/* ---- tablets: the title across the top, then two balanced columns: the panel | the phone ---- */
@media (min-width: 768px) {
  #private .v-mobile { --pw: clamp(204px, 25vw, 256px); }
  #private .v-mobile .vm {
    max-width: 940px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "points stage";
    align-items: center;
    column-gap: clamp(28px, 4.5vw, 56px);
    padding-top: var(--section-y); padding-bottom: var(--section-y);
    padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right));
  }
  #private .v-mobile .vm-head { grid-area: head; text-align: left; }
  #private .v-mobile .vm-points { grid-area: points; margin: 36px 0 0; max-width: 440px; gap: 26px; }
  #private .v-mobile .vm-stage { grid-area: stage; margin-top: 36px; gap: 8px; }
  #private .v-mobile .vm-star { width: clamp(76px, 10vw, 110px); }
}

/* V3 type scale */
#private .v-mobile .h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; }
@media (max-width: 359.98px) { #private .v-mobile .h2 { font-size: 28px; } }
@media (min-width: 768px) { #private .v-mobile .h2 { font-size: 40px; } }