/* Page: Brand Protection — clone of dexpose.io/brand-protection/ */
.pg-bp { --bp-blue: #0091ff; --bp-btn: #017aff; --bp-box: #13153a; }
.pg-bp p { color: rgba(219, 215, 219, 0.82); }
.pg-bp h2 { letter-spacing: 0; }
.pg-bp .section__head { max-width: none; margin-bottom: 0; }

/* ---- 1. Hero: centered title, 20px lead, blue button ---- */
.pg-bp .bp-hero { padding: 150px 0 110px; }
.pg-bp .bp-hero__head h1 { font-size: 46px; font-weight: 700; margin: 0 0 22px; }
.pg-bp .bp-hero__lead { font-size: 20px; line-height: 1.45; max-width: 1140px; margin: 0 auto; }
.pg-bp .bp-hero__cta { justify-content: center; margin-top: 30px; }
.pg-bp .bp-btn-blue { background: var(--bp-btn); color: #fff; border: 2px solid var(--bp-btn); border-radius: 0.3em; font-size: 14px; font-family: var(--font); font-weight: 500; min-height: 0; padding: 0.8em 1.8em; }
.pg-bp .bp-btn-blue:hover { background: var(--bp-btn); color: #fff; transform: none; opacity: 0.92; }

/* ---- 2. Dashboard screenshot ---- */
.pg-bp .bp-shot { padding: 0 0 60px; }
.pg-bp .bp-shot__art img { width: 1088px; max-width: 100%; max-height: none; height: auto; }

/* ---- 3. What is: full-bleed pattern background ---- */
.pg-bp .bp-what {
  padding: 80px 0 70px;
  background: url("/wp-content/themes/dexpose/assets/img/p/brand-protection/protection-bg.webp") no-repeat 50% / cover;
}
.pg-bp .bp-what h2 { font-size: 36px; margin: 0 0 0.8em; }
.pg-bp .bp-what p { margin: 0; line-height: 1.85; }

/* ---- 4. Why important: text + 2x2 boxes ---- */
.pg-bp .bp-why { padding: 30px 0 70px; }
.pg-bp .bp-why__split { gap: 60px; align-items: center; }
.pg-bp .bp-why__split > * { align-self: center; }
.pg-bp .bp-why__text h2 { font-size: 34px; line-height: 1.45; margin: 0 0 0.8em; }
.pg-bp .bp-why__text p { margin: 0; line-height: 1.85; }
.pg-bp .bp-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; align-content: start; }
.pg-bp .bp-box {
  background: var(--bp-box); border-radius: 10px; padding: 44px 20px; text-align: center; min-height: 215px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: background 0.3s ease-in-out;
}
.pg-bp .bp-box:hover { background: var(--bp-blue); }
.pg-bp .bp-box__icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; color: #fff; font-size: 16px; }
.pg-bp .bp-box p { margin: 0; font-size: 22px; line-height: 1.3; color: rgba(219, 215, 219, 0.82); }
.pg-bp .bp-box:hover p { color: #fff; }

/* ---- 5. Why DeXpose (centered) ---- */
.pg-bp .bp-whyus { padding: 60px 0 60px; }
.pg-bp .bp-whyus__head h2 { font-size: 36px; margin: 0 0 0.8em; }
.pg-bp .bp-whyus__head p { margin: 0; max-width: 1150px; line-height: 1.85; }
.pg-bp .bp-whyus__head a strong { color: #fff; }

/* ---- 6. Key benefits: full-bleed blue band ---- */
.pg-bp .bp-benefits { background: var(--bp-blue); padding: 70px 0 70px; }
.pg-bp .bp-benefits__split { gap: 48px; align-items: center; }
.pg-bp .bp-benefits__text h2 { font-size: 2.5rem; font-weight: 700; color: #fff; margin: 0 0 0.7em; }
.pg-bp .bp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pg-bp .bp-checks li { display: flex; align-items: center; gap: 18px; }
.pg-bp .bp-checks__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--bp-blue); display: grid; place-items: center; font-size: 11px; }
.pg-bp .bp-checks__icon .ico { stroke-width: 3; }
.pg-bp .bp-checks p { margin: 0; font-size: 20px; line-height: 1.4; color: rgba(219, 215, 219, 0.82); }
.pg-bp .bp-benefits__img { display: flex; justify-content: center; }
.pg-bp .bp-benefits__img img { width: 100%; max-width: 639px; height: auto; }

/* ---- 7. Key features: vertical tabs, nav on the right ---- */
.pg-bp .bp-features { padding: 70px 0 80px; }
.pg-bp .bp-tabs { display: grid; grid-template-columns: 1fr 430px; gap: 60px; align-items: start; }
.pg-bp .bp-tabs__nav { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; background: rgba(255, 255, 255, 0.03); border-radius: 4px; overflow: hidden; }
.pg-bp .bp-tabs__nav button { text-align: left; border: 0; border-radius: 0; background: transparent; padding: 14px 22px; font-family: var(--font); font-weight: 700; font-size: 18px; color: rgba(219, 215, 219, 0.82); transition: background 0.3s; }
.pg-bp .bp-tabs__nav button:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.pg-bp .bp-tabs__nav button[aria-selected="true"] { background: var(--bp-blue); color: rgba(219, 215, 219, 0.9); box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.08); }
.pg-bp .bp-tabs__panels { grid-column: 1; grid-row: 1; }
.pg-bp .bp-tabs__eyebrow { color: var(--bp-blue); font-size: 15px; margin: 0 0 6px; }
.pg-bp .bp-tabs__panel h2 { font-size: 36px; font-weight: 700; margin: 0 0 0.8em; }
.pg-bp .bp-tabs__panel p:last-child { margin: 0; line-height: 1.85; }

/* ---- 8. How DeXpose works ---- */
.pg-bp .bp-how { padding: 40px 0 80px; }
.pg-bp .bp-how__head { margin-bottom: 40px; }
.pg-bp .bp-how__head h2 { font-size: 36px; line-height: 1.35; margin: 0 0 0.8em; padding: 0 130px; }
.pg-bp .bp-how__head p { margin: 0; max-width: 940px; line-height: 1.85; }
.pg-bp .bp-how__grid { gap: 36px 48px; align-items: start; }
.pg-bp .bp-step { display: flex; gap: 18px; align-items: flex-start; }
.pg-bp .bp-step__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; color: #fff; font-size: 16px; margin-top: 2px; }
.pg-bp .bp-step h3 { font-size: 28px; font-weight: 400; margin: 0 0 0.5em; }
.pg-bp .bp-step p { margin: 0; line-height: 1.85; }

/* ---- 9. FAQ: borderless accordion, plus icons ---- */
.pg-bp .bp-faq { padding: 50px 0 60px; }
.pg-bp .bp-faq__head { margin-bottom: 30px; }
.pg-bp .bp-faq__head h2 { font-size: 36px; margin: 0 0 13px; }
.pg-bp .bp-faq__head p { margin: 0; font-size: 13px; }
.pg-bp .bp-faq__list { gap: 0; }
.pg-bp .bp-faq__list details { border: 0; border-radius: 0; background: transparent; }
.pg-bp .bp-faq__list summary { padding: 24px 60px 24px 33px; font-family: var(--font); font-weight: 400; font-size: 22px; color: rgba(219, 215, 219, 0.75); text-transform: capitalize; line-height: 1.4; }
.pg-bp .bp-faq__list summary::after { right: 33px; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b6c4' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E"); }
.pg-bp .bp-faq__list details > div { padding: 0 60px 24px 33px; }
.pg-bp .bp-faq__list details > div p { opacity: 0.5; margin: 0; }
.pg-bp .bp-faq__list details[open], .pg-bp .bp-faq__list details:hover { border-color: transparent; }

/* ---- 10. CTA band ---- */
.pg-bp .bp-cta { padding: 50px 0 0; }
.pg-bp .bp-cta__band { border-radius: 10px; border: 5px solid rgb(25, 53, 110); padding: 70px 50px 62px; background: linear-gradient(180deg, rgba(15, 0, 154, 0.3) 0%, rgba(0, 90, 128, 0.32) 100%); }
.pg-bp .bp-cta__band h2 { font-size: 36px; line-height: 1.35; margin: 0 0 0.6em; }
.pg-bp .bp-cta__sub { font-size: 28px; line-height: 1.4; color: #fff; margin: 0 auto 0.5em; max-width: none; text-align: center; }
.pg-bp .bp-cta__band .cluster { margin-top: 1.2rem; }
.pg-bp .bp-btn-outline { min-height: 0; padding: 0.8em 1.8em; font-size: 14px; font-family: var(--font); font-weight: 400; border: 2px solid rgba(219, 215, 219, 0.58); border-radius: 15px; color: #fff; background: transparent; transition: background 0.3s ease; }
.pg-bp .bp-btn-outline:hover { background: rgba(219, 215, 219, 0.42); color: #fff; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .pg-bp .bp-hero { padding: 100px 0 80px; }
  .pg-bp .bp-tabs { grid-template-columns: 1fr 360px; gap: 40px; }
  .pg-bp .bp-how__head h2 { padding: 0 50px; }
}
@media (max-width: 760px) {
  .pg-bp .bp-hero { padding: 30px 0 40px; }
  .pg-bp .bp-hero__head h1 { font-size: 38px; line-height: 1.25; }
  .pg-bp .bp-hero__lead { font-size: 20px; }
  .pg-bp .bp-shot { padding-bottom: 30px; }
  .pg-bp .bp-what { padding: 40px 0 50px; }
  .pg-bp .bp-what h2, .pg-bp .bp-why__text h2, .pg-bp .bp-whyus__head h2, .pg-bp .bp-how__head h2, .pg-bp .bp-faq__head h2, .pg-bp .bp-cta__band h2 { font-size: 30px; line-height: 1.3; }
  .pg-bp .bp-why { padding: 20px 0 40px; }
  .pg-bp .bp-why__split { gap: 20px; }
  .pg-bp .bp-boxes { grid-template-columns: 1fr; gap: 16px; }
  .pg-bp .bp-box { min-height: 180px; padding: 40px 20px; }
  .pg-bp .bp-whyus { padding: 40px 0 40px; }
  .pg-bp .bp-benefits { padding: 40px 0 40px; }
  .pg-bp .bp-benefits__split { gap: 32px; }
  .pg-bp .bp-benefits__text h2 { font-size: 36px; line-height: 1.2; }
  .pg-bp .bp-checks { gap: 14px; }
  .pg-bp .bp-features { padding: 30px 0 30px; }
  .pg-bp .bp-tabs { grid-template-columns: 1fr; gap: 24px; }
  .pg-bp .bp-tabs__nav { grid-column: 1; grid-row: 1; background: transparent; border-radius: 0; }
  .pg-bp .bp-tabs__nav button { border-top: 1px solid rgba(219, 215, 219, 0.2); padding: 14px 40px 14px 26px; font-weight: 400; font-size: 18px; line-height: 1.5; position: relative; }
  .pg-bp .bp-tabs__nav button:last-child { border-bottom: 1px solid rgba(219, 215, 219, 0.2); }
  .pg-bp .bp-tabs__nav button::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbd7db' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
  .pg-bp .bp-tabs__nav button[aria-selected="true"] { background: transparent; color: #fff; box-shadow: none; }
  .pg-bp .bp-tabs__panels { grid-column: 1; grid-row: 2; }
  .pg-bp .bp-tabs__panel h2 { font-size: 28px; }
  .pg-bp .bp-how { padding: 30px 0 50px; }
  .pg-bp .bp-how__head h2 { padding: 0; }
  .pg-bp .bp-how__grid { gap: 18px; }
  .pg-bp .bp-step h3 { font-size: 24px; }
  .pg-bp .bp-step p { line-height: 1.7; }
  .pg-bp .bp-faq { padding: 40px 0 40px; }
  .pg-bp .bp-faq__list summary { font-size: 21px; padding: 16px 56px 16px 30px; line-height: 1.35; }
  .pg-bp .bp-faq__list summary::after { right: 26px; }
  .pg-bp .bp-cta { padding-top: 20px; }
  .pg-bp .bp-cta__band { padding: 36px 20px 36px; }
  .pg-bp .bp-cta__sub { font-size: 28px; }
}