/* 08 · Private — DESKTOP (1024 px and wider). Owner: PROGRESS-D.
   A pale blue band. Left: the real passcode page in a phone, grounded by a contact shadow in a soft pool of blue light,
   with the locked star (its own drop shadow) standing beside it, never over it. Right: the title and the four promises
   as a tick list directly on the band (no wrapper panel, §14). */

#private .v-desktop {
  /* spacing is set centrally (§15): only --section-y, top and bottom */
  background: var(--selected);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  overflow-x: clip;
}

#private .v-desktop .pv {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}

/* ---- the picture: the star beside the phone ---- */
#private .v-desktop .pv-visual {
  --pw: clamp(264px, 23vw, 304px);          /* the phone's width; the star's size and height follow it */
  grid-column: 1 / span 6;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 1.7vw, 26px);
  padding-right: clamp(0px, 2vw, 28px);
}
#private .v-desktop .pv-phone {
  flex: none;
  isolation: isolate;                        /* keeps the glow and the contact shadow above the band */
}
/* a soft pool of blue light behind the phone */
#private .v-desktop .pv-phone::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(var(--pw) * 2.1);
  height: calc(var(--pw) * 2.3);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--tint) 0%, rgba(230, 244, 253, .7) 45%, rgba(230, 244, 253, 0) 100%);
  pointer-events: none;
}
/* the contact shadow where the phone stands on the band */
#private .v-desktop .pv-phone::after {
  left: 14%;
  right: 14%;
  bottom: -14px;
  height: 28px;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .26), rgba(15, 26, 43, 0));
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
#private .v-desktop .phone {
  --w: var(--pw);
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  #private .v-desktop .pv-phone:hover .phone { transform: translateY(-8px); }
  #private .v-desktop .pv-phone:hover::after { transform: scaleX(.86); opacity: .6; }
}

/* the star stands beside the phone (never over it), level with the lower half of the screen */
#private .v-desktop .pv-star {
  position: relative;
  z-index: 1;
  flex: none;
  width: calc(var(--pw) * .5);
  margin-bottom: calc(var(--pw) * .56);
}
#private .v-desktop .pv-star img {
  width: 100%;
  filter: var(--art-drop);
}
#private .v-desktop .pv-star .art-shadow {
  width: 52%;
  margin-top: 16px;
  background: #D5DCE5;
  animation: private-d-shadow 6s var(--ease) infinite alternate;
}
/* the shadow line breathes with the star's float (.bob goes up → down over the same 6 s) */
@keyframes private-d-shadow {
  from { transform: scaleX(.82); opacity: .7; }
  to   { transform: scaleX(1);   opacity: 1; }
}
/* point at the star and it gives a shy little wiggle around its base, one burst (js/08-private.desktop.js adds .is-shy) */
#private .v-desktop .pv-wig { display: block; transform-origin: 50% 88%; }
#private .v-desktop .pv-wig.is-shy { animation: private-d-shy .9s var(--ease); }
@keyframes private-d-shy {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(-7deg); }
  50% { transform: rotate(5deg); }
  76% { transform: rotate(-2deg); }
}

/* ---- the words: the title and the four promises, directly on the band ---- */
#private .v-desktop .pv-text {
  position: relative;                        /* always above the phone's glow */
  z-index: 1;
  grid-column: 7 / span 6;
  grid-row: 1;
  max-width: 548px;
  padding-left: clamp(0px, 1.6vw, 24px);
}
#private .v-desktop .pv-list {
  gap: 26px;
  margin-top: 48px;
}
#private .v-desktop .pv-list li {
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
#private .v-desktop .pv-list li::before { top: 2px; }
#private .v-desktop .pv-list li b {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.006em;
}

@media (max-width: 1199.98px) {
  #private .v-desktop .pv-list { gap: 22px; margin-top: 40px; }
  #private .v-desktop .pv-list li { font-size: 16.5px; }
}

/* V3 (founder 30 Sep: "I need this section in homepage"): restored from the live site as is; only the shared title size */
#private .v-desktop .h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; }