/* ══════════════════════════════════════════════════════════════
   SECTION 5 — JOURNAL ("See your skin change, day by day")
   Centred title + subcopy, then a fanned trio of phones (journal entry,
   before/after Compare, calendar), then a small "Built for privacy"
   reassurance line. Transparent — the pinned animating page-bg shows through.
   ══════════════════════════════════════════════════════════════ */
.journal {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: clamp(40px, 6vh, 90px) 24px clamp(80px, 12vh, 150px);
  text-align: center;
}
.journal-head { max-width: 760px; margin: 0 auto clamp(36px, 6vh, 72px); }
.journal-title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.journal-sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 46ch;
  margin-inline: auto;
}

/* — 3-phone fanned art —
   Three .jphone figures overlap: the centre phone sits forward + raised,
   the two side phones tuck behind it, rotated outward and dropped down.
   Negative margins pull the sides under the centre for the fan overlap. */
.journal-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 920px;
  margin: 0 auto;
  padding-top: 40px;                 /* headroom for the raised centre phone */
}
.jphone {
  margin: 0;
  flex: 0 0 auto;
  width: min(27%, 240px);
}
.jphone img {
  display: block;
  width: 100%;
  /* No border-radius clip — the screenshot PNGs already carry rounded
     bezels + a soft baked glow in their transparent margin. Clipping cut
     through that glow and left a hard rounded-rect halo. */
}
/* Side phones: rotated outward, dropped, tucked behind the centre. */
.jphone-side {
  z-index: 1;
  filter: drop-shadow(0 24px 40px rgba(50,25,70,0.32));
}
/* NOTE: the vertical fan offsets use margin-top, NOT translate — .breathe
   animates `translate`, so any base translate here would be clobbered each
   loop. rotate is a separate property and composes fine. */
.jphone-left {
  rotate: -7deg;
  margin-top: 42px;                  /* sit lower than the centre phone */
  margin-right: -7%;                 /* slide under the centre phone */
  transform-origin: bottom right;
}
.jphone-right {
  rotate: 7deg;
  margin-top: 42px;
  margin-left: -7%;
  transform-origin: bottom left;
}
/* Centre phone: forward, raised, larger, strongest shadow. */
.jphone-center {
  z-index: 2;
  width: min(30%, 264px);
  filter: drop-shadow(0 36px 56px rgba(50,25,70,0.42));
}
/* Stagger the breathe loop so the three phones drift out of sync. The
   centre rises a touch more; the sides lag behind it. */
.jphone-center { --breathe-rise: 4px; --breathe-delay: 0s; }
.jphone-left   { --breathe-rise: 3px; --breathe-delay: 1.1s; }
.jphone-right  { --breathe-rise: 3px; --breathe-delay: 2.0s; }

/* — Carousel position dots — hidden on the desktop fan, shown only in the
   mobile carousel (responsive.css). Active dot widens into a pill. */
.journal-dots { display: none; }
.journal-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.journal-dot.is-active {
  width: 22px;
  background: #ffffff;
}

/* — Built-for-privacy reassurance line — */
.journal-privacy {
  margin-top: clamp(32px, 5vh, 64px);
}
.journal-privacy-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  color: #ffffff;
}
.journal-privacy-title svg { width: 18px; height: 18px; }
.journal-privacy-sub {
  margin-top: 10px;
  font-size: clamp(13px, 1.3vw, 15px);
  color: rgba(255,255,255,0.85);
}