/* ═══════════════════════════════════════════════════════════
   TUNEX — UK LANDING PAGE
   The blocks that only lp-uk.html needs: verified best-seller
   proof cards, the pricing table, the sample-report mock, the
   founder block and the guarantee panel. Everything else on
   that page reuses the shared components (lamp, svcgrid, cmp,
   path, faq, velaris), so this file stays small.

   Reveal state is the site-wide one: .rv starts translated and
   transparent, .rv.on settles. tunex-sections.js drives it, so
   nothing here needs its own observer.
   ═══════════════════════════════════════════════════════════ */

/* ── verified proof ──────────────────────────────────────── */

.bsr-section {
  background: var(--black, #080808);
  padding: 110px 24px 120px;
}

.bsr-revenue {
  max-width: 1180px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 34px 38px;
  border-radius: 20px;
  /* double background so the gradient ring survives the fill:
     padding-box paints the card, border-box paints the ring */
  background:
    linear-gradient(#101010, #101010) padding-box,
    linear-gradient(120deg, rgba(196,30,58,.85), rgba(255,59,87,.25) 55%, rgba(255,255,255,.09)) border-box;
  border: 1px solid transparent;
}

.bsr-revenue-label {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  font-weight: 800;
}

.bsr-revenue-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(44px, 6vw, 74px);
  line-height: .92;
  color: #fff;
  margin: 10px 0 8px;
  letter-spacing: 1px;
}

.bsr-source {
  font-size: 11.5px;
  color: rgba(255,255,255,.42);
  line-height: 1.5;
}

.bsr-revenue-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bsr-rev-stat-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 27px;
  color: #ff3b57;
  line-height: 1;
}

.bsr-rev-stat-label {
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: 7px;
  line-height: 1.35;
}

.bsr-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}

.bsr-card {
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px 20px 18px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, box-shadow .5s;
}

.bsr-card:hover {
  transform: translateY(-5px);
  border-color: rgba(196,30,58,.5);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}

.bsr-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.bsr-badge-icon { font-size: 19px; line-height: 1 }

.bsr-badge-text {
  font-size: 11.5px;
  font-weight: 900;
  color: #ffb43b;
  letter-spacing: .4px;
}

.bsr-badge-cat {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}

.bsr-card h3 {
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  font-weight: 700;
  margin: 0 0 14px;
  min-height: 40px;
}

.bsr-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
}

.bsr-metric span:first-child { color: rgba(255,255,255,.5) }
.bsr-metric span:last-child { color: #fff; font-weight: 700; text-align: right }

.bsr-verified {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bsr-verified i { color: #35c46a; font-size: 13px }

/* ── results ─────────────────────────────────────────────── */

.res-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.res-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 26px 26px 24px;
  background: #fff;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}

.res-card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(0,0,0,.1) }

.res-market {
  font-size: 12px;
  font-weight: 800;
  color: var(--red, #C41E3A);
  letter-spacing: .3px;
  margin-bottom: 18px;
}

.res-nums {
  display: flex;
  gap: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  margin-bottom: 16px;
}

.res-num-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 40px;
  line-height: .95;
  color: #111;
}

.res-num-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #999;
  margin-top: 5px;
}

.res-card p { font-size: 13.5px; line-height: 1.68; color: #555; margin: 0 }

.res-tag {
  margin-top: 15px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--red, #C41E3A);
  background: rgba(196,30,58,.07);
  padding: 6px 12px;
  border-radius: 30px;
}

/* ── sample report mock ──────────────────────────────────── */

.amock {
  background: #0e0e0e;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 26px 60px rgba(0,0,0,.4);
}

.amock-title {
  padding: 13px 18px;
  background: #151515;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.amock-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57 }
.amock-body { padding: 22px 20px }

.amock-score {
  text-align: center;
  padding: 16px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
}

.amock-score-lbl {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.amock-score-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 40px;
  color: #ff3b57;
  margin-top: 6px;
  line-height: 1;
}

.amm {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 12.5px;
}

.amm-label { color: rgba(255,255,255,.55) }
.amm-val { font-weight: 800; color: #fff }
.amm-val.red { color: #ff5f57 }
.amm-val.green { color: #35c46a }

.amock-tag {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(255,255,255,.4);
  text-align: center;
}

/* ── founder ─────────────────────────────────────────────── */

.kiran-section { padding: 110px 24px; background: #fafafa }

.kiran-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 54px;
  align-items: center;
}

.kiran-av {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 66px;
  color: #fff;
  background: linear-gradient(140deg, #C41E3A, #7d0f22);
  box-shadow: 0 18px 44px rgba(196,30,58,.3);
}

.kiran-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center }

.kiran-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  color: #444;
}

.kiran-quote {
  font-size: 15.5px;
  line-height: 1.85;
  color: #444;
  font-style: italic;
  margin: 18px 0 24px;
}

.kiran-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.kiran-stat-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 32px;
  color: var(--red, #C41E3A);
  line-height: 1;
}

.kiran-stat-label {
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #999;
  margin-top: 6px;
}

/* ── pricing ─────────────────────────────────────────────── */

.pricing-section { padding: 110px 24px 120px; background: var(--black, #080808) }

.pricing-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}

.pricing-card {
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 30px 28px 32px;
  position: relative;
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s;
}

.pricing-card:hover { transform: translateY(-6px); border-color: rgba(196,30,58,.45) }

.pricing-card.featured {
  background:
    linear-gradient(#111, #111) padding-box,
    linear-gradient(150deg, #C41E3A, rgba(255,59,87,.3) 60%, rgba(255,255,255,.08)) border-box;
  border: 1px solid transparent;
}

.pricing-label {
  position: absolute;
  top: -11px;
  left: 28px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  padding: 5px 12px;
  border-radius: 30px;
  background: #C41E3A;
  color: #fff;
}

.pricing-kicker {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  font-weight: 800;
}

.pricing-name {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 32px;
  color: #fff;
  margin: 8px 0 8px;
  line-height: 1;
}

.pricing-desc { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.55); min-height: 62px }

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 16px 0 4px;
}

.pricing-cur { font-size: 20px; color: rgba(255,255,255,.65); font-weight: 700 }

.pricing-amount {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 56px;
  color: #fff;
  line-height: .9;
}

.pricing-period { font-size: 12.5px; color: rgba(255,255,255,.45); margin-left: 4px }
.pricing-note { font-size: 11px; color: rgba(255,255,255,.38) }

.pricing-features { margin: 22px 0 24px; display: grid; gap: 10px }

.pf-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}

.pf-item i { color: #35c46a; font-size: 15px; flex-shrink: 0; margin-top: 1px }
.pf-item.na { color: rgba(255,255,255,.3) }
.pf-item.na i { color: rgba(255,255,255,.22) }

.pricing-btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  transition: background .3s, border-color .3s;
}

.pricing-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.34) }
.pricing-card.featured .pricing-btn { background: #C41E3A; border-color: #C41E3A }
.pricing-card.featured .pricing-btn:hover { background: #d92747 }

.pricing-foot {
  max-width: 1120px;
  margin: 34px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: center;
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
}

.pricing-foot span { display: flex; align-items: center; gap: 7px }
.pricing-foot i { color: #35c46a; font-size: 14px }

/* ── guarantee ───────────────────────────────────────────── */

.guar-section { padding: 100px 24px; background: #fff }

.guar-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 40px 44px;
  border-radius: 22px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.07);
}

.guar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red, #C41E3A);
  margin-bottom: 18px;
}

.guar-inner h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.06;
  color: #111;
  margin: 0 0 18px;
}

.guar-inner > p { font-size: 15px; line-height: 1.8; color: #555; max-width: 620px; margin: 0 auto }

.guar-points {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  text-align: left;
}

.guar-point {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: #444;
}

.guar-point i { color: #35c46a; font-size: 17px; flex-shrink: 0 }

/* ── featured case study ─────────────────────────────────── */

.feat {
  max-width: 1180px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.09);
  background: #fff;
}

.feat-img { position: relative; background: #0a0a0a; min-height: 340px; overflow: hidden }

.feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}

.feat:hover .feat-img img { transform: scale(1.04) }

.feat-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--red, #C41E3A);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
}

.feat-body { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center }

.feat-mkt {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--red, #C41E3A);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.feat-body h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: .96;
  color: #111;
  margin: 0 0 16px;
}

.feat-body > p { font-size: 14px; line-height: 1.78; color: #555; margin: 0 0 26px }

.feat-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }

.feat-kpi {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 10px;
  padding: 14px 12px;
}

.feat-kpi-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  color: #111;
  line-height: 1;
}

.feat-kpi-val em { color: var(--red, #C41E3A); font-style: normal }
.feat-kpi-lbl { font-size: 10px; color: #999; font-weight: 600; margin-top: 5px; line-height: 1.35 }

/* ── case grid ───────────────────────────────────────────── */

.case-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.case-card {
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s;
}

.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0,0,0,.11);
  border-color: rgba(196,30,58,.3);
}

/* Placeholder art rather than a remote image: the originals pointed at
   wp-content URLs that now 404, and a broken <img> reads worse than a
   deliberate tile. Swap in a real screenshot when one is available. */
.case-thumb {
  position: relative;
  height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background:
    radial-gradient(circle at 30% 25%, rgba(196,30,58,.16), transparent 60%),
    linear-gradient(140deg, #141414, #0a0a0a);
}

.case-thumb i { font-size: 30px; color: rgba(255,255,255,.5) }

.case-thumb span {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  font-weight: 700;
}

.case-flag {
  position: absolute;
  top: 13px;
  left: 13px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  padding: 5px 10px;
  border-radius: 30px;
  backdrop-filter: blur(6px);
}

.case-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 }

.case-mkt {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--red, #C41E3A);
  letter-spacing: 1.1px;
  margin-bottom: 9px;
}

.case-body h3 { font-size: 16px; line-height: 1.35; color: #111; margin: 0 0 10px; font-weight: 800 }

.case-body p {
  font-size: 13px;
  line-height: 1.68;
  color: #666;
  margin: 0 0 18px;
  flex: 1;
}

.case-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.07);
}

.case-stat-val {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 25px;
  color: #111;
  line-height: 1;
}

.case-stat-val em { color: var(--red, #C41E3A); font-style: normal }
.case-stat-lbl { font-size: 10px; color: #999; margin-top: 5px; letter-spacing: .4px }

/* ── business hours (contact page) ───────────────────────── */

.lead-hours {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
}

.lead-hours-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
}

.lead-hours-title i { color: #ff3b57; font-size: 15px }

.lead-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.05);
}

.lead-hours-row .open { color: #35c46a; font-weight: 700 }

/* ── legal pages ─────────────────────────────────────────── */

.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 96px 24px 104px;
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red, #C41E3A);
  background: rgba(196,30,58,.07);
  padding: 7px 14px;
  border-radius: 30px;
  margin-bottom: 30px;
}

.legal h1 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(40px, 6vw, 66px);
  line-height: .95;
  color: #111;
  margin: 0 0 18px;
}

.legal-intro { font-size: 16px; line-height: 1.85; color: #555; margin: 0 0 12px }

.legal h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 27px;
  color: #111;
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(0,0,0,.08);
  line-height: 1;
}

.legal p { font-size: 14.5px; line-height: 1.85; color: #555; margin: 0 0 14px }

.legal ul { margin: 0 0 16px; padding: 0; list-style: none }

.legal li {
  position: relative;
  font-size: 14.5px;
  line-height: 1.8;
  color: #555;
  padding-left: 26px;
  margin-bottom: 9px;
}

.legal li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red, #C41E3A);
}

.legal a { color: var(--red, #C41E3A); text-decoration: none; border-bottom: 1px solid rgba(196,30,58,.3) }
.legal a:hover { border-bottom-color: var(--red, #C41E3A) }
.legal strong { color: #111; font-weight: 700 }

.legal-contact {
  margin-top: 18px;
  padding: 24px 26px;
  border-radius: 14px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.08);
}

.legal-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
  padding: 6px 0;
}

.legal-contact-row i { color: var(--red, #C41E3A); font-size: 17px; flex-shrink: 0 }

.legal-note {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 12.5px;
  line-height: 1.75;
  color: #999;
}

@media (max-width: 700px) {
  .legal { padding: 68px 20px 76px }
  .legal h2 { font-size: 24px; margin-top: 36px }
}

/* ── footer ──────────────────────────────────────────────── */

.lp-foot {
  background: var(--black, #080808);
  padding: 40px 24px;
  text-align: center;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  line-height: 1.9;
}

.lp-foot a { color: rgba(255,255,255,.62); text-decoration: none; margin: 0 10px }
.lp-foot a:hover { color: #fff }

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .bsr-revenue, .kiran-grid, .feat { grid-template-columns: 1fr; gap: 28px }
  .feat { gap: 0 }
  .feat-body { padding: 32px 26px }
  .feat-img { min-height: 240px }
  .kiran-av { width: 130px; height: 130px; font-size: 50px }
  .kiran-stats { grid-template-columns: repeat(2, 1fr) }
  .bsr-section, .pricing-section { padding: 80px 20px 88px }
  .kiran-section, .guar-section { padding: 80px 20px }
  .guar-inner { padding: 36px 24px }
  .res-nums { gap: 20px }
}

@media (max-width: 560px) {
  .bsr-revenue-right { grid-template-columns: 1fr; gap: 14px }
  .bsr-grid { grid-template-columns: 1fr }
}

/* ── proof gallery ───────────────────────────────────────────
   Real Seller Central / Ads / Analytics screenshots, grouped by
   market. Wide dashboards do not survive being squeezed into a
   card, so each figure keeps the shot at full width and the grid
   goes two-up rather than three.
   ─────────────────────────────────────────────────────────── */

.pf-section { background: var(--black, #080808); padding: 104px 24px 112px }

.pf-group { max-width: 1240px; margin: 0 auto 54px }

.pf-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.pf-flag { font-size: 21px; line-height: 1 }

.pf-group-head h3 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 27px;
  color: #fff;
  margin: 0;
  letter-spacing: .5px;
  line-height: 1;
}

.pf-count {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  font-weight: 700;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.pf-item {
  margin: 0;
  background: #101010;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s, box-shadow .45s;
}

.pf-item:hover {
  transform: translateY(-4px);
  border-color: rgba(196,30,58,.5);
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
}

/* the shots are screenshots of white dashboards; a light mat stops
   them floating on the black background as hard-edged rectangles */
.pf-shot {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pf-item figcaption {
  padding: 14px 16px 15px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

.pf-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
}

.pf-verified i { color: #35c46a; font-size: 13px }

.pf-note {
  max-width: 1240px;
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.38);
  text-align: center;
}

@media (max-width: 760px) {
  .pf-section { padding: 74px 18px 82px }
  .pf-grid { grid-template-columns: 1fr }
  .pf-group-head h3 { font-size: 23px }
}