/* Section 7, Privacy: "Your clips never leave your computer." Animated by privacy.js.
   Wispr shows certification badges here. Vclip has none, and doesn't need them for
   clips it never receives, so instead of badges it shows where a clip goes: from the
   video into your computer (My Clips and Downloads), never online. That's true:
   the extension makes no network calls (a test checks). */

.privacy { width: min(1100px, calc(100% - 32px)); margin: 0 auto 120px; }
.pv-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(32px, 4.5vw, 56px);
  border-radius: 28px;
  background: var(--lilac);
  border: 1px solid #DDD3FB;
}
.pv-title .l1 { font-size: clamp(32px, 3.6vw, 46px); }
.pv-title .l2 { font-size: clamp(28px, 3.2vw, 40px); margin-top: 2px; }
.pv-text { margin: 18px 0 0; max-width: 440px; font-size: 16px; line-height: 1.6; color: #3E3858; }
.pv-more { margin-top: 24px; padding: 11px 18px; border: 1px solid #CBBDF7; background: #fff; color: var(--violet); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn.pv-more:hover { background: var(--violet); border-color: var(--violet); color: #fff; } /* fills in; not the shared .btn hover, which would hide violet text */
.pv-more span { transition: transform 0.2s; }
.pv-more:hover span { transform: translateX(3px); }

/* ---------- the picture: where a clip goes ---------- */
.pv-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  grid-template-rows: auto 58px auto auto;
  align-items: center;
  padding: 22px 22px 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #DDD3FB;
  box-shadow: 0 20px 50px rgba(91, 43, 224, 0.1);
}
.pm-label { display: block; margin-top: 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }

/* the internet, above your computer, with the way to it closed */
.pm-online { grid-column: 3; grid-row: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #A49DBF; }
.pm-online svg { width: 46px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pm-online span { font-size: 11px; font-weight: 600; }
.pm-wall { position: relative; grid-column: 3; grid-row: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pm-wall i { flex: 1; width: 0; border-left: 2px dashed #D3CAEE; }
.pm-wall b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FFE9EC; color: #E5484D; font: 700 14px/1 var(--body); }
.pm-wall small { position: absolute; top: 50%; right: calc(50% + 18px); translate: 0 -50%; white-space: nowrap; font-size: 11px; color: var(--muted); }

/* the video */
.pm-video { grid-column: 1; grid-row: 3; display: grid; }
.pm-frame { grid-area: 1 / 1; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #1E1A2E; }
.pm-bar { grid-area: 1 / 1; align-self: end; height: 3px; margin: 0 8px 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.pm-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: #FF3B5C; }
.pm-video .pm-label { grid-area: 2 / 1; }
.pm-arrow { grid-column: 2; grid-row: 3; justify-self: center; width: 30px; fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* your computer: My Clips on a laptop */
.pm-laptop { grid-column: 3; grid-row: 3; }
.pm-screen { padding: 8px; border: 2px solid #3E3858; border-radius: 8px 8px 2px 2px; background: #FBF9FF; }
.pm-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 10px; font-weight: 600; color: var(--ink); }
.pm-head img { width: 11px; height: 11px; }
.pm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pm-tiles canvas { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; background: #E4DDF7; }
.pm-dl { margin-top: 6px; font-size: 9px; color: var(--muted); }
.pm-base { height: 7px; margin: 0 -9%; border-radius: 0 0 8px 8px; background: #3E3858; }

/* the two counts */
.pm-counts { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEE9FB; font-size: 12px; color: var(--muted); }
.pm-counts b { display: inline-block; margin-right: 4px; font: 700 26px/1 var(--display); color: var(--ink); vertical-align: -3px; }

/* a clip on its way from the video to My Clips */
.pm-flyer { position: absolute; left: 0; top: 0; width: 60px; height: 34px; border-radius: 4px; overflow: hidden; opacity: 0; box-shadow: 0 8px 20px rgba(27, 21, 48, 0.25); pointer-events: none; }
.pm-flyer canvas { display: block; width: 100%; height: 100%; }

/* Space between sections: 120px on computers, 96px on tablets and phones */
@media (max-width: 1023px) { .privacy, .features { margin-bottom: 96px; } }

/* tablets and phones: the words, then the picture */
@media (max-width: 960px) {
  .pv-card { grid-template-columns: minmax(0, 1fr); }
  .pv-map { width: 100%; max-width: 540px; justify-self: center; }
}
@media (max-width: 600px) {
  .pv-card { padding: 32px 18px 18px; border-radius: 22px; }
  .pv-map { padding: 18px 14px 14px; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
}
.btn.pv-more { width: auto; } /* a quiet link-button, even on phones */