/* Product hero mock — SOCIAL PROOF (site-in-context + consolidating review widget).
   Registers as NJHeroMocks 'social-proof'. Loaded only on pages that select it. */
/* ---- Reviews widget mock (built UI, used in hero) ---- */
.pp-widget {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--nj-line, #E7E3EF);
  box-shadow: 0 30px 60px -34px rgba(27, 5, 61, 0.34);
  padding: 22px;
  position: relative;
  z-index: 1;
}

.pp-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pp-widget-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--nj-ink, #1B053D); }

.pp-widget-gdot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--nj-line, #E7E3EF); font-weight: 800; font-size: 12px; color: #4285F4; }

.pp-widget-agg { text-align: right; }

.pp-widget-agg .n { font-family: "Bogart", Georgia, serif; font-weight: 500; font-size: 22px; color: var(--nj-ink, #1B053D); line-height: 1; }

.pp-stars { color: #FFC53D; letter-spacing: 1px; font-size: 13px; }

.pp-widget-sub { font-size: 11.5px; color: var(--nj-ink-4, #7B6A91); margin-top: 2px; }

/* live feed — fresh review drops in at top, stack slides down */
.pp-widget-feed { position: relative; overflow: hidden; margin-top: 14px; }

.pp-widget-feed .pp-review {
  position: absolute; left: 0; right: 0; top: 0;
  height: 104px; box-sizing: border-box; margin: 0;
  transition: transform .62s cubic-bezier(.22,.72,.2,1), opacity .45s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform, opacity;
}

.pp-widget-feed .pp-review-body {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pp-count { display: inline-block; animation: njCountPop .5s ease both; }

/* Review card styled to match the home page social-proof widget cards
   (.hm-soc-widget): Google "G" badge, name + inline gold stars, body, and a
   green uppercase live timestamp with a pulsing dot. */
.pp-rev-g { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--nj-line, #E7E3EF); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #4285F4; }

.pp-rev-av { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 10px; letter-spacing: .02em; color: #fff; }

.pp-rev-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.pp-rev-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--nj-ink, #1B053D); }

.pp-rev-stars { color: #FFC53D; font-size: 11px; letter-spacing: .5px; }

.pp-rev-text { margin: 0; font-size: 12px; line-height: 1.45; color: var(--nj-ink-3, #5B4B73);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pp-rev-time { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; color: #169350; text-transform: uppercase; letter-spacing: .04em; }

.pp-rev-time i { width: 6px; height: 6px; border-radius: 50%; background: #2CE080; animation: ppLive 1.8s ease-out infinite; }

.pp-widget-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 11px; color: var(--nj-ink-4, #7B6A91); }

/* floating accent chips behind/around the widget */
.pp-hero-chip {
  position: absolute; z-index: 2;
  background: #fff; border: 1px solid var(--nj-line, #E7E3EF);
  border-radius: 12px; padding: 10px 13px;
  box-shadow: 0 16px 34px -20px rgba(27, 5, 61, 0.4);
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--nj-ink, #1B053D);
}

.pp-hero-chip .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }

.pp-hero-chip.tl { top: 8px; left: -14px; }

.pp-hero-chip.br { bottom: 14px; right: -10px; }

/* ---- Hero site-in-context mock: customer website + floating review widgets ---- */
.pp-sitemock { position: relative; width: 100%; max-width: 480px; transform: scale(1.09); transform-origin: center right; }

/* soft brand halo behind the mock so the white card has more presence against
   the near-white hero background */
.pp-sitemock::before {
  content: ""; position: absolute; z-index: 0; inset: -10% -7% -16% -12%;
  background:
    radial-gradient(58% 52% at 112% 58%, rgba(78,44,224,0.32), transparent 70%),
    radial-gradient(56% 52% at 68% 90%, rgba(38,96,246,0.26), transparent 72%);
  filter: blur(30px); border-radius: 44px; pointer-events: none;
}

.pp-site {
  position: relative; z-index: 1; width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid var(--nj-line, #E7E3EF); border-radius: 16px;
  overflow: hidden; box-shadow: 0 44px 84px -42px rgba(43,16,90,.48);
  transition: width .85s cubic-bezier(.22,.61,.36,1), margin-left .85s cubic-bezier(.22,.61,.36,1);
}

/* settle: the white card stretches to the left AND the review widget shrinks so
   it rests inside the card with even margins beside the photo. */
.pp-sitemock.is-docked .pp-site { width: calc(100% + 68px); margin-left: -68px; }

/* skeleton placeholder system — TWO shades only, consistent radii:
   bars (headings/body/nav) = pill (999px); blocks (buttons/cards) = 8px.
   --pp-skel = primary (headings, solid buttons), --pp-skel-2 = secondary (body, cards). */
.pp-sitemock { --pp-skel: #D7DAE0; --pp-skel-2: #EBEDF0; }

.pp-site-chrome { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 13px 18px; background: #1B053D; }

.pp-site-dots { display: flex; gap: 7px; }

.pp-site-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.20); }

.pp-site-logo { width: 72px; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.20); }

.pp-site-links { display: flex; gap: 14px; margin-left: auto; }

.pp-site-links i { display: block; width: 34px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.20); }

.pp-site-btn { width: 76px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.92); }

.pp-site-hero { display: grid; grid-template-columns: 1fr 240px; gap: 28px; padding: 28px; align-items: center; }

.pp-site-h { height: 13px; border-radius: 999px; background: var(--pp-skel); margin-bottom: 12px; }

.pp-site-h.short { width: 62%; }

.pp-site-p { height: 8px; border-radius: 999px; background: var(--pp-skel-2); margin-bottom: 10px; }

.pp-site-p.w2 { width: 100%; }

.pp-site-p.w3 { width: 78%; }

.pp-site-cta { display: flex; gap: 10px; margin-top: 18px; }

.pp-site-b1 { width: 88px; height: 30px; border-radius: 8px; background: var(--pp-skel); }

.pp-site-b2 { width: 72px; height: 30px; border-radius: 8px; border: 1px solid var(--pp-skel); }

.pp-site-photo { display: block; width: 100%; height: 193px; border-radius: 12px;object-fit: cover; }

.pp-site-rightcol { display: flex; flex-direction: column; gap: 30px; }

.pp-site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.pp-site-cards i { display: block; height: 56px; border-radius: 8px; background: var(--pp-skel-2); }

/* placeholder copy fades out as the widget settles into the left slot */
.pp-site-copy { transition: opacity .5s ease; }

.pp-sitemock.is-docked .pp-site-copy { opacity: 0; }

/* review widgets — a live feed stacked on the left, overlapping the site's left
   edge; a fresh review drops in at the top, the stack slides down, oldest exits. */
.pp-fw-stack { position: absolute; z-index: 3; left: -34px; top: 50%; transform: translateY(-50%); transition: left .85s cubic-bezier(.22,.61,.36,1), top .85s cubic-bezier(.22,.61,.36,1); }

/* widget shrinks + slides in to rest inside the white card's left column */
.pp-sitemock.is-docked .pp-fw-stack { left: -40px; top: calc(50% + 18px); }

.pp-sitemock.is-docked .pp-rw { width: 224px; }

.pp-fw-feed { position: relative; width: 296px; }

.pp-fw-card {
  position: absolute; left: 0; right: 0; top: 0; height: 96px; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--nj-line, #E7E3EF); border-radius: 12px;
  padding: 12px 16px;
  /* lilac hard offset box (matches the platform “Spread the Word” widgets) +
     a zero-size ring layer so the fresh-review glow has something to interpolate
     against without the offset ever popping (see CLAUDE.md). */
  box-shadow: 9px 9px 0 0 #8F52F1, 0 0 0 0 rgba(143,82,241,0);
  transition: transform .85s cubic-bezier(.22,.61,.36,1), opacity .7s ease;
  will-change: transform, opacity;
}

.pp-fw-card .pp-rev-text { -webkit-line-clamp: 2; }

/* brand gradient stroke on the focal (newest) card — rendered on every card so
   it can fade: the outgoing card's stroke fades out as the new one fades in. */
.pp-fw-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(140deg, #8F52F1 0%, #1874FD 50%, #1FAE6A 100%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}

.pp-fw-focus::after { opacity: 1; }

.pp-fw-focus { border-color: transparent; }

.pp-fw-glow { animation: ppFwGlow 1.6s ease-out; }

/* ---- Consolidating review widget: 3 cards drop in, then morph in-place into
   a single "Rated OUTSTANDING 4.9" widget. Cards phase = rich floating review
   cards (avatar + name + stars + body + live time, lilac offset, focal gradient
   stroke). Final phase = white container with brand gradient stroke; the card
   chrome flattens to rows, name/time fade, avatars grow + recolor. ---- */
.pp-rw {
  position: relative; width: 268px; box-sizing: border-box;
  border-radius: 16px; padding: 0; background: transparent;
  box-shadow: 0 0 0 0 rgba(43,16,90,0);
  transition: background .6s ease, box-shadow .65s ease, padding .6s cubic-bezier(.22,.61,.36,1), width .85s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}

/* loop restart: fade the whole widget out so the reverse-morph (and its masked
   gradient stroke) happens while invisible, then it replays the forward morph */
.pp-rw-hidden { opacity: 0; }

.pp-rw-snap, .pp-rw-snap *, .pp-rw-snap::after, .pp-rw-snap *::after, .pp-rw-snap *::before { transition: none !important; }

/* brand gradient stroke for the consolidated card — fades in on the morph */
.pp-rw::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(140deg, #8F52F1 0%, #1874FD 50%, #1FAE6A 100%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity .55s ease .18s;
}

.pp-rw-final { background: #fff; box-shadow: none; padding: 16px 16px 14px; }

.pp-rw-final::after { opacity: 1; }

/* header — collapsed in cards phase, expands as the widget consolidates */
.pp-rw-head {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .65s cubic-bezier(.22,.61,.36,1), opacity .5s ease .12s, margin .6s ease;
}

.pp-rw-final .pp-rw-head { max-height: 140px; opacity: 1; margin-bottom: 8px; }

.pp-rw-rated { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; color: var(--nj-ink-3, #5B4B73); }

.pp-rw-rated svg { width: 15px; height: 15px; flex: none; }

.pp-rw-out { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0; color: var(--nj-ink, #1B053D); margin-top: 2px; }

.pp-rw-njstar { width: 12px; height: 12px; flex: none; }

.pp-rw-score { display: block; font-family: "Inter", sans-serif; font-size: 25px; line-height: .96; font-weight: 700; letter-spacing: -.03em; color: var(--nj-ink, #1B053D); margin: 2px 0 4px; }

.pp-rw-bigstars { color: #FFC53D; font-size: 11px; letter-spacing: .5px; }

.pp-rw-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-top: 4px; }

.pp-rw-total { font-size: 10.5px; color: var(--nj-ink-3, #5B4B73); margin-bottom: 2px; white-space: nowrap; }

.pp-rw-srcrow { display: flex; align-items: center; gap: 5px; }

.pp-rw-srcrow .pp-rw-ss { color: #FFC53D; font-size: 9px; letter-spacing: .3px; }

.pp-rw-src { width: 15px; height: 15px; flex: none; display: grid; place-items: center; }

.pp-rw-src svg { width: 15px; height: 15px; display: block; }

.pp-rw-g2 { width: 15px; height: 15px; border-radius: 4px; background: #FF492C; color: #fff; font-size: 7.5px; font-weight: 800; display: grid; place-items: center; }

.pp-rw-other { font-size: 9.5px; color: var(--nj-ink-4, #7B6A91); }

/* divider — draws in on consolidate */
.pp-rw-divider { height: 1px; background: var(--nj-line, #E7E3EF); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .6s cubic-bezier(.22,.61,.36,1) .1s, opacity .4s ease .1s; }

.pp-rw-final .pp-rw-divider { transform: scaleX(1); opacity: 1; margin-bottom: 8px; }

/* list + rows */
.pp-rw-list { display: flex; flex-direction: column; gap: 20px; transition: gap .65s cubic-bezier(.22,.61,.36,1); }

.pp-rw-final .pp-rw-list { gap: 6px; }

.pp-rw-row {
  position: relative; display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--nj-line, #E7E3EF); border-radius: 12px; padding: 12px 14px;
  box-shadow: 9px 9px 0 0 #8F52F1;
  opacity: 0; transform: translateY(-26px);
  transition: opacity .55s ease, transform .8s cubic-bezier(.22,.61,.36,1),
              background .65s cubic-bezier(.22,.61,.36,1), border-color .65s ease, box-shadow .65s ease, padding .65s cubic-bezier(.22,.61,.36,1);
}

.pp-rw-row.is-in { opacity: 1; transform: translateY(0); }

.pp-rw-final .pp-rw-row { background: transparent; border-color: transparent; box-shadow: 9px 9px 0 0 rgba(183,162,227,0); padding: 5px 0; align-items: center; }

.pp-rw-av {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: #EAF1FE; color: #1874FD; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  transition: width .65s cubic-bezier(.22,.61,.36,1), height .65s cubic-bezier(.22,.61,.36,1), font-size .65s ease;
}

.pp-rw-final .pp-rw-av { width: 34px; height: 34px; font-size: 12px; }

/* avatar photo (optional image field) — fills the same circle as the initials */
.pp-rw-av.has-img { background: var(--nj-line-2, #F0EDF6); overflow: hidden; }
.pp-rw-av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-rw-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: gap .65s cubic-bezier(.22,.61,.36,1); }

.pp-rw-final .pp-rw-main { gap: 0; }

.pp-rw-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--nj-ink, #1B053D); max-height: 22px; overflow: hidden; transition: opacity .4s ease, max-height .65s cubic-bezier(.22,.61,.36,1), margin .65s cubic-bezier(.22,.61,.36,1); }

.pp-rw-stars { color: #FFC53D; font-size: 11px; letter-spacing: .5px; }

.pp-rw-body { margin: 0; font-size: 12px; line-height: 1.45; color: var(--nj-ink-3, #5B4B73); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: font-size .4s ease; }

.pp-rw-time { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; color: #169350; text-transform: uppercase; letter-spacing: .04em; max-height: 14px; overflow: hidden; transition: opacity .4s ease, max-height .65s cubic-bezier(.22,.61,.36,1), margin .65s cubic-bezier(.22,.61,.36,1); }

.pp-rw-time i { width: 6px; height: 6px; border-radius: 50%; background: #2CE080; animation: ppLive 1.8s ease-out infinite; }

.pp-rw-final .pp-rw-name, .pp-rw-final .pp-rw-time { opacity: 0; max-height: 0; margin: 0; }

.pp-rw-final .pp-rw-body { font-size: 12px; -webkit-line-clamp: 2; }

.pp-hero-rise { opacity: 0; animation: ppHeroRise .7s cubic-bezier(.2,.7,.2,1) both; }

/* hero asset only: smaller review text */
.pp-fw-stack .pp-rw-name { font-size: 12px; }

.pp-fw-stack .pp-rw-body { font-size: 10.5px; line-height: 1.4; }

.pp-fw-stack .pp-rw-stars { font-size: 10px; }

/* rotating light that orbits the perimeter of the focus (middle) card */
.ppw-fc-spin {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; overflow: hidden; z-index: 1;
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity .7s var(--nj-ease, cubic-bezier(.16,.84,.3,1));
}

.ppw-fc-spin::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 200%; aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    transparent 0deg 248deg,
    rgba(143,82,241,.3) 274deg,
    rgba(196,162,255,.8) 305deg,
    rgba(232,218,255,1) 328deg,
    rgba(120,160,255,.8) 350deg,
    rgba(24,116,253,.28) 357deg,
    transparent 360deg);
  filter: blur(1px);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: ppwRingSpin 4.8s linear infinite;
}


.pp-theme-flip .pp-sitemock::before {
  background:
    radial-gradient(58% 58% at 68% 26%, rgba(143,82,241,0.30), transparent 70%);
}

/* hero site-mock browser bar → saturated dark purple, so it reads as branded
   chrome distinct from the near-black hero field. */
.pp-theme-flip .pp-site-chrome { background: #3A1580; }

/* the white site card's light border read as a harsh white line against the
   dark field — drop it and feather the edge with a soft shadow instead. */
.pp-theme-flip .pp-site { border: 1px solid rgba(58,21,128,0.55); box-shadow: 0 30px 70px -34px rgba(0,0,0,0.55); }

.pp-theme-flip .pp-site-dots i,
.pp-theme-flip .pp-site-chrome .pp-site-logo,
.pp-theme-flip .pp-site-chrome .pp-site-links > * { background: rgba(255,255,255,0.30); }


@keyframes ppFwGlow {
  0% { box-shadow: 9px 9px 0 0 #B7A2E3, 0 0 0 0 rgba(143,82,241,.42); }
  100% { box-shadow: 9px 9px 0 0 #B7A2E3, 0 0 0 10px rgba(143,82,241,0); }
}
@keyframes njCountPop { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ppLive { 0% { box-shadow: 0 0 0 0 rgba(44,224,128,.5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(44,224,128,0); } }
@keyframes ppwRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 980px) {
   is scaled as ONE unit by PpHero's ResizeObserver (sets .pp-sitemock width +
.pp-sitemock { max-width: none; }
/* mobile: the website card stays put when the review card consolidates — no
   morph/stretch out to the left (the whole mock is already scaled to fit). */
.pp-sitemock.is-docked .pp-site { width: 100%; margin-left: 0; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .pp-widget-feed .pp-review { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-count { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-rev-time i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-site, .pp-fw-stack, .pp-site-copy { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-fw-card { transition: none; }
  .pp-fw-glow { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-rw, .pp-rw::after, .pp-rw-head, .pp-rw-divider, .pp-rw-list, .pp-rw-row, .pp-rw-av, .pp-rw-name, .pp-rw-time { transition: none; }
  .pp-rw-time i { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ppw-fc-spin { display: none; }
}