/* Social proof (independent review platforms) — shared by About, Pricing, Contact and Google Ads Protection.
   Markup: Pages/Shared/_SocialProof.cshtml · data: Models/SocialProof.cs
   Every rule is scoped to .sp and every class carries the sp prefix, so nothing here leaks into the host page. */
.sp{--navy:#1C2841; --orange:#F94C10; --orange-d:#D93D08; --cream:#FFF1E9; --cream-2:#FDF6F1; --line-2:#F0E2D8; --muted:#51607A; --muted-2:#7C8AA3; --card:#FDF6F1; --card-top:#FFF1E9; --card-line:#F0E2D8; --logo-bg:#fff; --logo-line:#E3D5CA;
  display:block; position:relative; font-family:inherit; color:var(--navy); line-height:1.4; -webkit-font-smoothing:antialiased; text-align:left}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box; font-family:inherit}
.sp .spWrap{width:100%; max-width:1180px; margin:0 auto; padding:0 24px}
.sp a{color:inherit; text-decoration:none}
.sp a:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
.sp .spTitle{margin:0; text-wrap:balance; color:var(--navy); font-weight:800; letter-spacing:-.015em; text-align:center; text-transform:none}
.sp .spStars{display:inline-flex; gap:2px; line-height:0}
.sp .spStars svg{display:block; flex:none}
.sp .spLogo{display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--logo-bg); border:1px solid var(--logo-line)}
.sp .spLogo img{display:block; width:18px; height:18px; max-width:none; object-fit:contain}
.sp .spAwardIcon{display:flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; border-radius:50%; background:var(--cream)}

/* ===== Ratings (badge grid) ===== */
.sp.spRatings{padding:72px 0}
.sp .spHead{max-width:780px; margin:0 auto 44px; text-align:center}
.sp .spHead .spTitle{font-size:clamp(26px,3vw,36px); line-height:1.2}
.sp .spHead p{max-width:62ch; margin:12px auto 0; font-size:16px; line-height:1.7; color:var(--muted)}
.sp .spBadges{display:flex; flex-wrap:wrap; justify-content:center; gap:22px 14px}
.sp .spBadge{width:176px; display:flex; flex-direction:column; clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%); background:var(--card); color:var(--navy); filter:drop-shadow(0 12px 24px rgba(28,40,65,.08)); transition:transform .2s ease}
.sp a.spBadge:hover{transform:translateY(-3px)}
.sp .spTop{display:flex; align-items:center; justify-content:center; gap:7px; min-height:60px; padding:14px 10px; background:var(--card-top); border-bottom:1px solid var(--card-line); font-size:15px; font-weight:800; line-height:1.2; text-align:center}
.sp .spBody{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px 54px; text-align:center}
.sp .spScore{display:flex; align-items:baseline; gap:4px}
.sp .spScore b{font-size:42px; font-weight:800; line-height:1}
.sp .spScore span{font-size:17px; font-weight:700; color:var(--muted-2)}
.sp .spCount{font-size:15px; font-weight:700}
.sp .spGo{font-size:14px; font-weight:800; color:var(--orange-d); text-decoration:underline; text-underline-offset:3px}
.sp a.spBadge:hover .spGo{color:#B83306}
.sp .spBadge.spTotal{align-items:center; gap:12px; padding:28px 16px 60px; background:var(--navy); color:#fff; text-align:center}
.sp .spTotal .spScore b{font-size:46px}
.sp .spTotal .spScore span,.sp .spTotal .spSub{color:#B9C2D3}
.sp .spKicker{font-size:14px; font-weight:800; color:#FFB899}
.sp .spSub{font-size:13px}
.sp .spAward .spBody{justify-content:center; min-height:178px}
.sp .spAwardLine{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--navy); text-align:center}

/* ===== Compact (thin band) ===== */
.sp.spCompact{padding:52px 0 48px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.sp.spCompact .spTitle{margin-bottom:28px; font-size:clamp(24px,2.6vw,32px); line-height:1.25}
.sp.spCompact .spWrap{max-width:1240px}
.sp .spRow{display:flex; flex-wrap:wrap; justify-content:center; gap:18px 32px}
.sp .spItem{display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--navy)}
.sp .spRate{display:inline-flex; align-items:center; gap:10px}
.sp .spBrand{display:inline-flex; align-items:center; gap:9px}
.sp.spCompact .spLogo{width:42px; height:42px; background:#F3ECE6}
.sp.spCompact .spLogo img{width:24px; height:24px}
.sp .spName{font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--navy)}
.sp.spCompact .spStars svg{width:17px; height:17px}
.sp .spNum{font-size:17px; font-weight:600; color:var(--muted)}
.sp .spItem:hover .spNum{color:var(--orange-d)}

/* ===== Trust (award + logo wall, no scores) ===== */
.sp.spTrust{padding:56px 0}
.sp .spTrustBox{display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:stretch}
.sp .spTrustAward{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px 20px; border-radius:20px; background:var(--navy); color:#fff; text-align:center; transition:transform .2s ease}
.sp .spTrustAward:hover{transform:translateY(-3px)}
.sp .spTrustAward b{font-size:20px; font-weight:800; line-height:1.25}
.sp .spTrustAward .spAwardIcon{background:rgba(255,255,255,.08); width:56px; height:56px}
.sp .spTrustBy{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#B9C2D3}
.sp .spTrustAward .spGo{color:#FFB899}
.sp .spTrustMain{display:flex; flex-direction:column; justify-content:center; gap:14px; padding:28px 32px; border-radius:20px; background:var(--card); border:1px solid var(--card-line)}
.sp .spTrustMain .spTitle{font-size:clamp(22px,2.4vw,28px); line-height:1.25; text-align:left}
.sp .spTrustMain p{margin:0; font-size:16px; line-height:1.65; color:var(--muted)}
.sp .spChips{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 0; padding:0; list-style:none}
.sp .spChips li{display:block; width:auto; margin:0; padding:0; list-style:none}
.sp .spChip{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 16px 6px 7px; border-radius:100px; background:#fff; border:1px solid var(--card-line); font-size:15px; font-weight:800; color:var(--navy); transition:border-color .2s ease, transform .2s ease}
.sp .spChip:hover{border-color:var(--orange); transform:translateY(-2px)}

/* Dense: tighter rhythm for pages where the section sits inside an existing container (Pricing). */
.sp.spRatings.spDense{padding:40px 0 24px}
.sp.spDense .spWrap{padding:0}
.sp.spDense .spHead{margin-bottom:32px}

/* Pages with a cream background: cards turn white so they keep their edge. */
.sp.spOnCream{--card:#fff; --card-top:#FDF6F1}

@media (max-width:1199px){
  /* Four items no longer fit one line: a balanced 2 x 2 instead of 3 + 1. */
  .sp .spRow{display:grid; grid-template-columns:repeat(2,max-content); justify-content:center; gap:18px 64px}
}
@media (max-width:860px){
  .sp .spTrustBox{grid-template-columns:1fr}
  .sp .spTrustAward{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px 14px; padding:22px 20px}
  .sp .spTrustAward .spAwardIcon{width:48px; height:48px}
  .sp .spTrustAward .spKicker{flex-basis:100%}
}
@media (max-width:520px){
  .sp.spRatings{padding:52px 0}
  .sp .spHead{margin-bottom:32px}
  .sp .spBadges{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px}
  .sp .spBadge{width:100%}
  .sp .spBadge.spTotal{grid-column:1 / -1}
  .sp .spScore b{font-size:38px}
  .sp .spTop{font-size:14px; padding:12px 8px}
  .sp .spBody{gap:8px; padding:14px 10px 46px}
  .sp .spTop{min-height:52px}
  .sp .spCount{font-size:14px}
  .sp .spTop .spLogo{width:26px; height:26px}
  .sp .spTop .spLogo img{width:16px; height:16px}
  .sp.spCompact{padding:40px 0 36px}
  .sp .spRow{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; justify-items:start}
  .sp .spItem{flex-direction:column; align-items:flex-start; gap:6px}
  .sp.spCompact .spItem .spStars svg{width:18px; height:18px}
  .sp.spTrust{padding:40px 0}
  .sp .spTrustMain{padding:22px 18px}
  .sp .spTrustMain .spTitle{text-align:center}
  .sp .spTrustMain p{text-align:center}
  .sp .spChips{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sp a.spBadge,.sp .spTrustAward,.sp .spChip{transition:none}
  .sp a.spBadge:hover,.sp .spTrustAward:hover,.sp .spChip:hover{transform:none}
}