/* ============================================================================
   pd2-paywall.css — Paywall takeover
   OWNER: W4. No other workstream may edit this file.

   EVERY selector in this file must start with `.pd2-pw-`.
   Consume the tokens from pd2-tokens.css (var(--pd2-*)); do not hardcode a
   colour, radius or shadow that already exists there.
   This file owns its own responsive rules — there is no shared responsive file.

   Design source: website html/index/property-detail-v3.html — the `.paywall`
   block (lines 578-680). Every declaration below is that block transcribed
   1:1, with the prototype's `--*` variables swapped for their `--pd2-*`
   equivalents. The handful of literal rgba()/hex values that survive
   (#EDE7E1/#DED5CD shimmer stops, #BFE3D6 guarantee border, the accent and
   green alpha shadows) exist only in the prototype and have no token — they
   are copied verbatim rather than invented or approximated.

   The @keyframes is namespaced `pd2-pw-shimmer` rather than `shimmer`:
   keyframe names are global, and the prototype reuses `shimmer` in the
   gallery block that W1 owns.
   ========================================================================== */

.pd2-pw-root{padding:26px 0 70px}

/* ------------------------------------------------------------- teaser ---- */
/* Pure CSS placeholder bars. No property image is ever requested here. */
.pd2-pw-teaser{
  position:relative; border-radius:var(--pd2-r-lg); overflow:hidden; margin-bottom:28px;
  height:190px; background:var(--pd2-bg-sunk);
}
.pd2-pw-teaser-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:100%}
.pd2-pw-teaser-strip div{
  background:linear-gradient(115deg,#EDE7E1,#DED5CD,#EDE7E1);
  background-size:220% 100%;
  animation:pd2-pw-shimmer 2.6s linear infinite;
}
.pd2-pw-teaser-strip div:nth-child(2){animation-delay:.35s}
.pd2-pw-teaser-strip div:nth-child(3){animation-delay:.7s}
.pd2-pw-teaser-strip div:nth-child(4){animation-delay:1.05s}
@keyframes pd2-pw-shimmer{0%{background-position:220% 0}100%{background-position:-120% 0}}

.pd2-pw-teaser-over{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:8px;background:rgba(255,255,255,.55);backdrop-filter:blur(3px);
  text-align:center;padding:20px;
}
.pd2-pw-teaser-t{font-family:var(--pd2-font-display);font-size:19px;font-weight:600}
.pd2-pw-teaser-s{font-size:13.5px;color:var(--pd2-ink-2)}
.pd2-pw-lockchip{
  display:inline-flex;align-items:center;gap:7px;background:var(--pd2-ink);color:#fff;
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;
}

/* --------------------------------------------------------- guarantee ----- */
/* The money-back promise, promoted to a hero element above the plans. */
.pd2-pw-guarantee{
  display:flex;align-items:center;gap:20px;
  border:1.5px solid #BFE3D6; border-radius:var(--pd2-r-xl);
  background:linear-gradient(135deg,#EAF7F1 0%,#F6FBF9 55%,#FFFFFF 100%);
  padding:24px 26px; margin-bottom:30px; position:relative; overflow:hidden;
}
.pd2-pw-guarantee::after{
  content:''; position:absolute; right:-40px; top:-40px; width:190px; height:190px;
  border-radius:50%; background:rgba(11,122,92,.055);
}
.pd2-pw-g-seal{
  width:70px;height:70px;border-radius:20px;flex:none;display:grid;place-items:center;
  background:var(--pd2-green); color:#fff; font-size:32px;
  box-shadow:0 8px 20px rgba(11,122,92,.30);
}
.pd2-pw-g-copy{flex:1; position:relative; z-index:1}
.pd2-pw-g-kicker{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pd2-green);margin-bottom:5px;
}
.pd2-pw-g-title{
  font-family:var(--pd2-font-display);font-size:23px;font-weight:700;
  letter-spacing:-.015em;line-height:1.2;
}
/* margin-bottom is the UA's default `1em` on <p> made explicit: the site's
   reboot resets it to 1rem, which would make this card 2px taller than the
   prototype's. Stated outright so the geometry matches at every width. */
.pd2-pw-g-sub{font-size:14px;color:var(--pd2-ink-2);margin:7px 0 14px;line-height:1.55;max-width:62ch}
/* Scoped through .pd2-pw-guarantee to reach (0,2,1). `.pd2-pw-g-sub a` alone
   is (0,1,1) — a tie with pd2-tokens.css's `.pd2-root a{color:inherit}`, won
   only because this file is linked later. That is true today and measures
   correct, but it makes the link colour a hostage to link order in the shell;
   the extra ancestor decides it on specificity instead. */
.pd2-pw-guarantee .pd2-pw-g-sub a{color:var(--pd2-green);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* -------------------------------------------------------------- head ----- */
.pd2-pw-head{text-align:center;max-width:640px;margin:0 auto 26px}
/* line-height is stated because the site's reboot sets h1-h6 to 1.2; the
   prototype's h2 simply inherits body's 1.55 and computes to 41.85px. */
.pd2-pw-head h2{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.55}
.pd2-pw-head p{font-size:15px;color:var(--pd2-ink-2);margin:10px 0 0;line-height:1.6}

/* ------------------------------------------------------------- plans ----- */
.pd2-pw-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:940px;margin:0 auto}
.pd2-pw-plan{
  border:1.5px solid var(--pd2-line);border-radius:var(--pd2-r-lg);background:#fff;padding:22px 20px;
  cursor:pointer;position:relative;transition:all .16s;text-align:left;
}
.pd2-pw-plan:hover{border-color:var(--pd2-line-strong);box-shadow:var(--pd2-shadow-md)}
/* Doubled class on purpose: the prototype's `.pw-plan.sel` and `.pw-plan:hover`
   have equal specificity, so `.sel` wins by source order. A single-class
   `.pd2-pw-plan-sel` would lose to `:hover` and the ring would drop on hover. */
.pd2-pw-plan.pd2-pw-plan-sel{border-color:var(--pd2-accent);box-shadow:0 0 0 4px rgba(255,84,3,.11),var(--pd2-shadow-md)}
.pd2-pw-tick{
  position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--pd2-line-strong);display:grid;place-items:center;color:#fff;font-size:12px;
}
.pd2-pw-plan.pd2-pw-plan-sel .pd2-pw-tick{background:var(--pd2-accent);border-color:var(--pd2-accent)}
.pd2-pw-pop{
  position:absolute;top:-11px;left:20px;background:var(--pd2-accent);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:6px;
}
.pd2-pw-pname{font-family:var(--pd2-font-display);font-size:17px;font-weight:600}
.pd2-pw-pprice{display:flex;align-items:baseline;gap:6px;margin:12px 0 4px}
.pd2-pw-pprice b{font-size:29px;font-weight:700;letter-spacing:-.02em}
.pd2-pw-pprice span{font-size:13px;color:var(--pd2-ink-3)}
.pd2-pw-feats{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.pd2-pw-feats li{display:flex;gap:9px;font-size:13.5px;color:var(--pd2-ink-2);line-height:1.45}
.pd2-pw-feats i{color:var(--pd2-green);font-size:14px;margin-top:2px;flex:none}

.pd2-pw-chip-refund{
  display:inline-flex;align-items:center;gap:6px;background:var(--pd2-green-soft);color:var(--pd2-green);
  border:1px solid var(--pd2-green-line);font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;margin-top:10px;
}
.pd2-pw-chip-norefund{
  display:inline-flex;align-items:center;gap:6px;background:var(--pd2-bg-soft);color:var(--pd2-ink-3);
  border:1px solid var(--pd2-line);font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;margin-top:10px;
}

/* --------------------------------------------------------------- cta ----- */
.pd2-pw-cta{max-width:420px;margin:28px auto 0}
/* Both buttons are scoped through .pd2-pw-cta on purpose. pd2-tokens.css
   resets `.pd2-root button{font:inherit;background:none;color:inherit}` at
   specificity (0,1,1); a bare `.pd2-pw-buy` (0,1,0) loses to it regardless of
   file order, so the button would render as unstyled body text. The prototype
   has the same reset as a bare `button{}` (0,0,1), which its `.btn-primary`
   already outranks — this restores that relationship. */
/* prototype .btn-primary */
.pd2-pw-cta .pd2-pw-buy{
  width:100%; background:var(--pd2-accent); color:#fff; font-weight:600; font-size:15.5px;
  padding:14px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 4px 12px rgba(255,84,3,.28); transition:all .15s; line-height:1.55;
}
.pd2-pw-cta .pd2-pw-buy:hover{background:var(--pd2-accent-ink); box-shadow:0 6px 16px rgba(255,84,3,.34)}
.pd2-pw-cta .pd2-pw-buy[disabled]{opacity:.75; cursor:default}
/* prototype .btn-quiet */
.pd2-pw-cta .pd2-pw-quiet{
  width:100%;margin-top:11px;padding:12px;font-size:14.5px;font-weight:600;
  color:var(--pd2-ink-2);border-radius:12px;line-height:1.55;
}
.pd2-pw-cta .pd2-pw-quiet:hover{background:var(--pd2-bg-soft)}

/* ------------------------------------------------------------- trust ----- */
.pd2-pw-trust{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--pd2-line);
}
.pd2-pw-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--pd2-ink-2)}
.pd2-pw-trust i{color:var(--pd2-green);font-size:15px}

/* -------------------------------------------------------- responsive ----- */
@media (max-width:1000px){
  .pd2-pw-plans{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pd2-pw-guarantee{flex-direction:column;text-align:center;gap:14px;padding:22px 18px}
  .pd2-pw-g-sub{margin-inline:auto}
  .pd2-pw-g-seal{width:60px;height:60px;font-size:27px}
  .pd2-pw-g-title{font-size:20px}
  .pd2-pw-head h2{font-size:22px}
}