/* Paid report teaser. The blur is presentation only; yourish-paid-lock.js keeps the locked
   sentences out of the DOM until an unlock actually happens. Warm Paper palette throughout. */

/* The full report is now a visible teaser instead of a hidden section. */
.paid-preview.full-report{display:block}

/* A shared invite view never bought anything and never showed this block. Keep it that way. */
#result.invite-result:not(.unlocked) .paid-preview.full-report{display:none}

/* Room for the lock overlay while locked; the unlocked layout keeps its original padding. */
.result:not(.unlocked) .full-report .paid-sections{padding-bottom:196px}
@media(max-width:760px){.result:not(.unlocked) .full-report .paid-sections{padding-bottom:204px}}

/* Section headings stay sharp so the buyer can read what is inside. A paragraph that
   opens with a peek keeps that fragment readable and blurs only the bars after it;
   a paragraph without one is masked whole, since whatever it holds is the real copy. */
.result:not(.unlocked) .paid-section.paid-locked>p:not(:has(.paid-peek)){
  filter:blur(4.5px);
  opacity:.62;
  user-select:none;
  pointer-events:none;
}
.result:not(.unlocked) .paid-section.paid-locked>p .paid-skeleton{
  filter:blur(2.5px);
  opacity:.72;
}
.result.unlocked .paid-section.paid-locked>p{filter:none;opacity:1;user-select:auto;pointer-events:auto}

/* Each locked paragraph opens with a readable fragment so the teaser is broken up
   rather than one grey slab. The blur rule above skips it — a peek that is blurred
   is just another bar. */
.paid-peek{display:block;margin:0 0 2px;color:var(--text-secondary)}
.result.unlocked .paid-peek{display:none}

/* Placeholder bars stand in for the locked sentences. No copy is rendered here. */
.paid-skeleton{display:block;height:13px;margin:11px 0 0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--surface-sunken),var(--surface-tint) 52%,var(--surface-sunken))}
.paid-skeleton:first-child{margin-top:2px}
.paid-skeleton.mid{width:92%}
.paid-skeleton.short{width:64%}
.fun-verdict .paid-skeleton{background:linear-gradient(90deg,rgba(210,96,63,.18),rgba(210,96,63,.1) 52%,rgba(210,96,63,.18))}

.paid-lock{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:92px 24px 24px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface-raised) 42%)}
.paid-lock b{display:block;font-size:var(--text-title);letter-spacing:-.03em;color:var(--text-strong);margin-bottom:6px}
.paid-lock>p{margin:0 0 15px;font-size:var(--text-caption);line-height:1.6;color:var(--text-muted)}
.paid-lock button{width:100%;border:0;border-radius:var(--r-lg);padding:16px;cursor:pointer;
  background:var(--coral-deep);color:var(--text-on-dark);font-family:inherit;font-size:var(--text-body);font-weight:800;letter-spacing:-.02em}
.paid-lock button:hover{background:var(--coral-strong)}
.paid-lock span{display:block;margin-top:10px;font-size:var(--text-micro);color:var(--text-muted)}
/* A 1440px-wide call to action reads as a banner, not a button. Keep it thumb-sized. */
@media(min-width:761px){.paid-lock button{max-width:420px;margin:0 auto}}
.result.unlocked .paid-lock{display:none}
@media(max-width:760px){.paid-lock{padding:96px 20px 20px}}
@media(max-width:360px){.paid-lock{padding-left:16px;padding-right:16px}}