/* --- PF MASTER DESIGN SYSTEM --- */
:root {
  --pf-red: #ef5e4e;
  --pf-red-hover: #d55a4d;
  --pf-purple: #5745A0;
  --pf-purple-hover: #7363BA;
  --pf-purple-light: #CDC8E8;
  --pf-text: #333333;
  --pf-grey: #707070;
  --pf-grey-light: #999999;
  --pf-bg: #f7f7f7;
  --pf-bg-soft: #fafafa;
  --pf-border: #e3e3e3;
  --pf-border-light: #eeeeee;
  --pf-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --pf-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --pf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
}

html { font-size: 62.5% !important; }
body { font-family: 'Open Sans', sans-serif !important; font-size: 1.6rem !important; color: var(--pf-text); margin: 0; background: #fff; -webkit-font-smoothing: antialiased; }

.container { max-width: 1160px !important; margin: 0 auto !important; padding: 0 4rem !important; }

/* --- HEADER --- */
.header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 80px !important;
  padding: 0 40px !important;
  border-bottom: none;
  background: var(--pf-red) !important;
  position: relative !important;
}
.logo img { max-height: 32px !important; width: auto !important; filter: brightness(0) invert(1) !important; }
.nav-wrapper { display: flex !important; align-items: center !important; gap: 40px !important; }
.user-nav { display: flex !important; gap: 30px !important; align-items: center !important; }
.nav-link { font-size: 1.5rem; font-weight: 600; color: rgba(255,255,255,0.85) !important; text-decoration: none !important; }
.nav-link:hover { color: #fff !important; }
.btn-pf-secondary {
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none !important;
  transition: 0.2s;
  white-space: nowrap;
  background: transparent !important;
}
.btn-pf-secondary:hover { background: rgba(255,255,255,0.18) !important; border-color: #fff !important; color: #fff !important; }

/* --- HERO / SEARCH SECTION --- */
.section-hero {
  background:
    radial-gradient(ellipse at 8% 55%, rgba(87,69,160,0.07) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 0%, rgba(239,94,78,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(239,94,78,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #fffaf8 0%, #fafafa 100%) !important;
  padding: 120px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--pf-border);
}
.section-hero--compact { padding: 40px 20px 36px !important; }

.hero-watermark {
  position: absolute;
  right: -5%;
  top: -20%;
  height: 150%;
  opacity: 0.03;
  pointer-events: none;
  transform: rotate(-10deg);
  z-index: 1;
}

.hero-inner { position: relative !important; z-index: 2 !important; }
.hero-title { font-size: 3.6rem !important; font-weight: 800 !important; margin-bottom: 2.4rem !important; line-height: 1.2 !important; color: var(--pf-text) !important; }
.section-hero--compact .hero-title { font-size: 2.6rem !important; margin-bottom: 1.6rem !important; }

.search-container { position: relative !important; max-width: 650px !important; margin: 0 auto !important; }

.search input[type="search"] {
  height: 52px !important;
  border-radius: 30px !important;
  border: 1px solid var(--pf-border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
  width: 100% !important;
  padding: 0 50px 0 25px !important;
  font-size: 1.6rem !important;
  outline: none !important;
}

.search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238B0000"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
  background-size: cover; transition: transform 0.2s ease;
}
.search input[type="search"]::-webkit-search-cancel-button:hover { transform: scale(1.2); }

form.search button, .search-container button, .search-clear-button, [data-search-clear], .search-form-clear {
  display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; pointer-events: none !important;
}

/* --- LEGACY CATEGORY ITEM --- */
.card-icon { width: 40px !important; height: 40px !important; color: var(--pf-red) !important; margin-bottom: 16px !important; flex: none !important; }
.category-item {
  border: 1px solid var(--pf-border);
  border-top: 4px solid var(--pf-red);
  border-radius: 12px;
  padding: 3rem;
  background: #fff;
  transition: 0.2s;
}
.category-item:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow-lg); }

/* --- PROCESS CARDS GRID --- */
.section-cards { padding: 4.8rem 0 3.2rem !important; background: #fff !important; }

.cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2.4rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.process-card {
  display: flex !important;
  list-style: none !important;
  background: #fff !important;
  border: 1px solid var(--pf-border) !important;
  border-top: 4px solid var(--pf-purple) !important;
  border-radius: 12px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.process-card::marker { content: '' !important; }
.process-card:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow-lg); }

.process-card-link {
  display: flex !important;
  flex-direction: column !important;
  padding: 2.4rem 2rem 2rem !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  position: relative !important;
}

.card-step {
  display: inline-block !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pf-purple) !important;
  margin-bottom: 1.2rem !important;
}

.process-card .card-icon {
  width: 28px !important;
  height: 28px !important;
  color: var(--pf-purple) !important;
  padding: 10px !important;
  background: rgba(87,69,160,0.08) !important;
  border-radius: 10px !important;
  box-sizing: content-box !important;
  margin-bottom: 1.6rem !important;
  flex: none !important;
}

.card-title {
  color: var(--pf-text) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
  line-height: 1.3 !important;
}

.card-description {
  color: var(--pf-grey) !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
  margin: 0 0 2rem !important;
  flex-grow: 1 !important;
}

.card-arrow {
  color: var(--pf-purple) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  align-self: flex-start !important;
  transition: transform 0.2s !important;
}
.process-card:hover .card-arrow { transform: translateX(4px); }

/* --- FAQ HOME SECTION --- */
.section-faq-home {
  padding: 4rem 0 6rem !important;
  background: var(--pf-bg-soft) !important;
  border-top: 1px solid var(--pf-border) !important;
}

.faq-home-header { text-align: center !important; margin-bottom: 2.8rem !important; }
.faq-home-title { font-size: 2.6rem !important; font-weight: 800 !important; margin: 0 0 0.8rem !important; color: var(--pf-text) !important; }
.faq-home-subtitle { font-size: 1.5rem !important; color: var(--pf-grey) !important; margin: 0 !important; }

.faq-search-wrapper { position: relative !important; max-width: 640px !important; margin: 0 auto 2.4rem !important; }
.faq-search-icon {
  position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 18px !important; height: 18px !important; color: var(--pf-grey-light) !important; pointer-events: none !important;
}
.faq-search-input {
  width: 100% !important; height: 50px !important; padding: 0 20px 0 48px !important;
  border: 1px solid var(--pf-border) !important; border-radius: 25px !important;
  font-size: 1.5rem !important; font-family: inherit !important; background: #fff !important;
  outline: none !important; transition: border-color 0.2s, box-shadow 0.2s !important;
  box-shadow: var(--pf-shadow-sm) !important; box-sizing: border-box !important;
}
.faq-search-input:focus { border-color: var(--pf-purple) !important; box-shadow: 0 0 0 3px rgba(87,69,160,0.12) !important; }
.faq-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.faq-list { list-style: none !important; padding: 0 !important; margin: 0 auto !important; max-width: 800px !important; }
.faq-list li { list-style: none !important; }
.faq-item {
  display: block !important;
  background: #fff !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 10px !important;
  margin: 0 0 1.2rem 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  list-style: none !important;
}
.faq-item::marker { content: '' !important; }
.faq-item:hover { border-color: #d8d8d8; }
.faq-item.is-open { box-shadow: var(--pf-shadow-md) !important; border-color: #d0d0d0 !important; }

.faq-question {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2rem !important;
  padding: 1.8rem 2.4rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--pf-text) !important;
  text-align: left !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}
.faq-question:focus { outline: none !important; }
.faq-question:focus-visible {
  outline: 2px solid var(--pf-purple) !important;
  outline-offset: -3px !important;
}
.faq-question:hover { background: rgba(87,69,160,0.025) !important; }
.faq-question-text { flex: 1 !important; }

/* Chevron toggle (rotates 180° when open) */
.faq-toggle {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235745A0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.faq-item.is-open .faq-toggle {
  transform: rotate(180deg) !important;
}

/* Answer collapse: max-height + opacity fade for smoothness */
.faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out !important;
}
.faq-answer p {
  margin: 0 !important;
  padding: 0.6rem 2.4rem 2.2rem !important;
  font-size: 1.45rem !important;
  line-height: 1.75 !important;
  color: var(--pf-grey) !important;
}
.faq-item.is-open .faq-answer {
  max-height: 1000px !important;
  opacity: 1 !important;
}

.faq-empty-state { text-align: center !important; font-size: 1.5rem !important; color: var(--pf-grey) !important; padding: 2rem !important; }
.faq-empty-state a { color: var(--pf-red) !important; font-weight: 700 !important; text-decoration: none !important; }

.faq-view-all-wrapper { text-align: center !important; margin-top: 3.2rem !important; }
.faq-view-all {
  display: inline-block !important; color: var(--pf-purple) !important; font-weight: 700 !important; font-size: 1.5rem !important;
  text-decoration: none !important; padding: 1rem 2rem !important; border: 1.5px solid var(--pf-purple) !important;
  border-radius: 8px !important; transition: 0.2s !important;
}
.faq-view-all:hover { background: var(--pf-purple) !important; color: #fff !important; }

/* --- FOOTER --- */
.footer { background: var(--pf-bg) !important; border-top: 1px solid var(--pf-border); padding: 60px 0 !important; margin-top: 0; }
.footer-inner { max-width: 1160px; margin: 0 auto; display: flex !important; justify-content: space-between !important; align-items: center; padding: 0 40px; gap: 2rem; flex-wrap: wrap; }
.footer-powered-by { display: none !important; }

/* --- FOOTER DARK (based on Figma Astra design) --- */
.footer-dark {
  background: #1B1B3A !important;
  border-top: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
.footer-dark-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 4rem !important;
  flex-wrap: wrap !important;
  padding: 5.6rem 6rem 4rem !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.footer-dark-brand { flex: 0 0 220px !important; }
.footer-dark-logo { max-height: 28px !important; width: auto !important; filter: brightness(0) invert(1) !important; }
.footer-dark-tagline {
  font-size: 1.3rem !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 1rem 0 0 !important;
  line-height: 1.5 !important;
}
.footer-dark-nav-group { flex: 1 !important; min-width: 140px !important; }
.footer-dark-nav-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 1.6rem !important;
}
.footer-dark-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-dark-nav-list li { list-style: none !important; margin: 0 0 1rem !important; }
.footer-dark-nav-list a {
  font-size: 1.4rem !important;
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.footer-dark-nav-list a:hover { color: #fff !important; }

.footer-dark-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.6rem !important;
  padding: 2.4rem 6rem !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
}
.footer-dark-copyright {
  font-size: 1.3rem !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0 !important;
}
.footer-dark-legal {
  display: flex !important;
  gap: 2.4rem !important;
  flex-wrap: wrap !important;
}
.footer-dark-legal a {
  font-size: 1.3rem !important;
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.footer-dark-legal a:hover { color: #fff !important; }
.footer-dark-accent-bar {
  height: 4px !important;
  background: linear-gradient(90deg, var(--pf-red) 0%, var(--pf-purple) 100%) !important;
}
@media (max-width: 960px) {
  .footer-dark-top { padding: 4rem 2.4rem 3.2rem !important; gap: 3.2rem !important; }
  .footer-dark-bottom { padding: 2rem 2.4rem !important; }
  .footer-dark-brand { flex: 0 0 100% !important; }
}
@media (max-width: 640px) {
  .footer-dark-top { padding: 3.2rem 1.6rem 2.4rem !important; flex-direction: column !important; gap: 2.4rem !important; }
  .footer-dark-bottom { padding: 1.6rem !important; flex-direction: column !important; align-items: flex-start !important; }
  .footer-dark-legal { gap: 1.6rem !important; }
}

/* --- ARTICLE FAQ BLOCK (used inside articles) --- */
.article-faq-block { margin: 4rem 0 !important; padding: 3rem !important; background: var(--pf-bg-soft) !important; border-radius: 12px !important; border: 1px solid var(--pf-border-light) !important; }
.article-faq-block h2 { font-size: 2.2rem !important; margin: 0 0 0.6rem !important; font-weight: 700 !important; }
.article-faq-block .article-faq-search-wrapper { margin: 1.6rem 0 2rem !important; max-width: none !important; }
.article-faq-block .faq-list { max-width: none !important; }

/* ============================================================
   ARTICLE PAGE — breadcrumbs, layout, content typography, sidebar
   ============================================================ */

/* Page wrapper */
.article-page { padding-top: 3.2rem !important; }

/* Breadcrumbs (kills ordered-list bullets, adds › separator) */
.sub-nav {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 3.2rem !important;
  padding: 0 !important;
}
.sub-nav .breadcrumbs,
.breadcrumbs {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.breadcrumbs li {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.35rem !important;
  color: var(--pf-grey) !important;
  max-width: 420px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.breadcrumbs li::marker { content: '' !important; }
.breadcrumbs li + li::before {
  content: '›' !important;
  color: var(--pf-grey-light) !important;
  margin: 0 0.8rem !important;
  font-size: 1.5rem !important;
}
.breadcrumbs a,
.breadcrumbs a:visited {
  color: var(--pf-grey) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.breadcrumbs a:hover { color: var(--pf-red) !important; }
.breadcrumbs li:last-child,
.breadcrumbs li:last-child a { color: var(--pf-text) !important; font-weight: 600 !important; pointer-events: none !important; }

/* Article container — two-column layout */
.article-container {
  display: flex !important;
  gap: 5.6rem !important;
  align-items: flex-start !important;
  margin-bottom: 8rem !important;
}

/* Main article column */
.article {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.article-header { margin-bottom: 3.2rem !important; padding-bottom: 2.4rem !important; border-bottom: 1px solid var(--pf-border-light) !important; }
.article-title {
  font-size: 3.4rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--pf-text) !important;
  margin: 0 0 1.2rem !important;
}
.article-meta { font-size: 1.35rem !important; color: var(--pf-grey-light) !important; }
.article-meta-item { display: inline-block !important; }

/* Article body typography */
.article-content { padding-top: 0.4rem !important; }
.article-body {
  font-size: 1.6rem !important;
  line-height: 1.8 !important;
  color: var(--pf-text) !important;
}
.article-body p { margin: 0 0 1.6rem !important; }
.article-body a {
  color: var(--pf-purple) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--pf-purple-light) !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
.article-body a:hover {
  color: var(--pf-purple-hover) !important;
  text-decoration-color: var(--pf-purple) !important;
}
.article-body h2 {
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 4rem 0 1.6rem !important;
  line-height: 1.3 !important;
}
.article-body h3 {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 3.2rem 0 1.2rem !important;
  line-height: 1.4 !important;
}
.article-body h4 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 2.4rem 0 1rem !important;
}
.article-body ul,
.article-body ol {
  margin: 0 0 1.6rem !important;
  padding-left: 2.4rem !important;
}
.article-body ul li,
.article-body ol li {
  margin-bottom: 0.8rem !important;
  list-style: revert !important;
}
.article-body ul li::marker { color: var(--pf-purple) !important; }
.article-body ol li::marker { color: var(--pf-purple) !important; }
.article-body strong { color: var(--pf-text) !important; font-weight: 700 !important; }
.article-body a strong,
.article-body strong a { color: inherit !important; }
.article-body img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; margin: 2.4rem 0 !important; }
.article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2.4rem 0 !important;
  font-size: 1.5rem !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.article-body table th {
  background: var(--pf-purple) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 1.2rem 1.6rem !important;
  text-align: left !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  white-space: nowrap !important;
}
.article-body table td {
  padding: 1.2rem 1.6rem !important;
  border: 1px solid var(--pf-border-light) !important;
  vertical-align: top !important;
  line-height: 1.6 !important;
}
.article-body table td:first-child {
  font-weight: 600 !important;
  white-space: nowrap !important;
  color: var(--pf-text) !important;
  background: var(--pf-bg-soft) !important;
}
.article-body table tr:nth-child(even) td:first-child { background: #f0f0f7 !important; }
.article-body table tr:nth-child(even) td { background: #fafafa !important; }
.article-body blockquote {
  margin: 2.4rem 0 !important;
  padding: 1.6rem 2rem !important;
  border-left: 4px solid var(--pf-red) !important;
  background: #fff8f7 !important;
  color: var(--pf-text) !important;
  border-radius: 0 8px 8px 0 !important;
}
.article-body blockquote p:last-child { margin-bottom: 0 !important; }

/* Article footer — voting */
.article-footer {
  margin-top: 6rem !important;
  padding-top: 3.2rem !important;
  border-top: 1px solid var(--pf-border-light) !important;
}
.article-votes {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1.6rem !important;
}
.article-votes-question {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--pf-text) !important;
}
.article-votes-controls { display: flex !important; gap: 0.8rem !important; }
.article-vote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border: 1.5px solid var(--pf-border) !important;
  background: #fff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: 0.2s !important;
  color: var(--pf-text) !important;
}
.article-vote:hover { border-color: var(--pf-red) !important; color: var(--pf-red) !important; }
.article-vote.button-primary,
.article-vote[aria-pressed="true"] { background: var(--pf-red) !important; border-color: var(--pf-red) !important; color: #fff !important; }
.article-votes-count { font-size: 1.3rem !important; color: var(--pf-grey) !important; }

/* Sidebar */
.lead-gen-sidebar {
  flex: 0 0 300px !important;
  position: sticky !important;
  top: 2.4rem !important;
  align-self: flex-start !important;
}

.sidebar-cta-card {
  background: linear-gradient(140deg, #F5F3FB 0%, #fff 100%) !important;
  border: 1px solid var(--pf-purple-light) !important;
  border-top: 4px solid var(--pf-purple) !important;
  border-radius: 12px !important;
  padding: 2.4rem 2rem !important;
  box-shadow: var(--pf-shadow-sm) !important;
}
.sidebar-cta-title {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 0 0 0.8rem !important;
}
.sidebar-cta-text {
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
  color: var(--pf-grey) !important;
  margin: 0 0 1.6rem !important;
}
.btn-pf-red {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--pf-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  padding: 1.1rem 1.6rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
}
.btn-pf-red:hover { background: var(--pf-red-hover) !important; color: #fff !important; }

.sidebar-quick-links {
  margin-top: 2.4rem !important;
  padding: 2rem !important;
  background: #fff !important;
  border: 1px solid var(--pf-border-light) !important;
  border-radius: 12px !important;
}
.sidebar-quick-links-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pf-grey) !important;
  margin: 0 0 1.2rem !important;
}
.sidebar-quick-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sidebar-quick-links-list li {
  margin: 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
  list-style: none !important;
}
.sidebar-quick-links-list li:last-child { border-bottom: 0 !important; }
.sidebar-quick-links-list li::marker { content: '' !important; }
.sidebar-quick-links-list a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 0 !important;
  color: var(--pf-text) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.sidebar-quick-links-list a::after {
  content: '→' !important;
  color: var(--pf-red) !important;
  opacity: 0 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.sidebar-quick-links-list a:hover { color: var(--pf-red) !important; }
.sidebar-quick-links-list a:hover::after { opacity: 1 !important; transform: translateX(2px) !important; }

/* --- RESPONSIVE: TABLET (≤960px) --- */
@media (max-width: 960px) {
  .container { padding: 0 2.4rem !important; }
  .header { padding: 0 24px !important; height: 72px !important; }
  .nav-wrapper { gap: 20px !important; }
  .user-nav { gap: 16px !important; }
  .section-hero { padding: 80px 20px; }
  .section-hero--compact { padding: 32px 20px 28px !important; }
  .hero-title { font-size: 2.8rem !important; }
  .section-hero--compact .hero-title { font-size: 2.2rem !important; }
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
  .article-page { padding-top: 2.4rem !important; }
  .article-container { flex-direction: column !important; gap: 4rem !important; }
  .lead-gen-sidebar { position: static !important; flex: 1 1 auto !important; width: 100% !important; }
  .article-title { font-size: 2.8rem !important; }
  .faq-home-title { font-size: 2.2rem !important; }
}

/* --- RESPONSIVE: MOBILE (≤640px) --- */
@media (max-width: 640px) {
  body { font-size: 1.5rem !important; }
  .container { padding: 0 1.6rem !important; }
  .header { padding: 0 16px !important; height: auto !important; min-height: 64px; gap: 1.2rem; }
  .nav-wrapper { gap: 12px !important; flex-wrap: wrap; }
  .user-nav { gap: 12px !important; }
  .nav-link { font-size: 1.3rem !important; }
  .btn-pf-secondary { padding: 8px 14px; font-size: 1.25rem; }
  .logo img { max-height: 26px !important; }
  .section-hero { padding: 56px 16px 40px; }
  .section-hero--compact { padding: 24px 16px 22px !important; }
  .hero-title { font-size: 2.2rem !important; margin-bottom: 1.6rem !important; }
  .section-hero--compact .hero-title { font-size: 1.9rem !important; margin-bottom: 1.2rem !important; }
  .search input[type="search"] { height: 46px !important; font-size: 1.5rem !important; padding: 0 40px 0 20px !important; }
  .section-cards { padding: 2.8rem 0 1.6rem !important; }
  .cards-grid { grid-template-columns: 1fr !important; gap: 1.4rem !important; }
  .process-card-link { padding: 1.8rem 1.6rem 1.6rem !important; }
  .card-title { font-size: 1.7rem !important; }
  .card-description { font-size: 1.35rem !important; margin-bottom: 1.4rem !important; }
  .section-faq-home { padding: 2.8rem 0 4rem !important; }
  .faq-home-title { font-size: 1.9rem !important; }
  .faq-home-subtitle { font-size: 1.35rem !important; }
  .faq-search-input { height: 46px !important; font-size: 1.4rem !important; }
  .faq-question { padding: 1.5rem 1.6rem !important; font-size: 1.4rem !important; gap: 1.2rem !important; }
  .faq-answer > p { padding: 0.4rem 1.6rem 1.6rem !important; font-size: 1.35rem !important; }
  .faq-view-all { font-size: 1.4rem !important; padding: 0.9rem 1.8rem !important; }
  .footer { padding: 40px 0 !important; }
  .footer-inner { flex-direction: column !important; align-items: flex-start !important; padding: 0 16px !important; gap: 1.6rem; }
  .article-page { padding-top: 1.6rem !important; }
  .article-container { gap: 3rem !important; margin-bottom: 4rem !important; }
  .article-title { font-size: 2.2rem !important; }
  .article-header { margin-bottom: 2.4rem !important; padding-bottom: 1.6rem !important; }
  .article-body { font-size: 1.5rem !important; }
  .article-body h2 { font-size: 2rem !important; margin: 3rem 0 1.2rem !important; }
  .article-body h3 { font-size: 1.7rem !important; margin: 2.4rem 0 1rem !important; }
  .article-body table { font-size: 1.35rem !important; }
  .article-body table th, .article-body table td { padding: 0.9rem 1.2rem !important; }
  .breadcrumbs li { font-size: 1.25rem !important; max-width: 240px !important; }
  .breadcrumbs li + li::before { margin: 0 0.5rem !important; }
  .article-faq-block { padding: 2rem 1.6rem !important; }
}

/* --- RESPONSIVE: SMALL MOBILE (≤380px) --- */
@media (max-width: 380px) {
  .nav-wrapper { gap: 8px !important; }
  .nav-link { font-size: 1.2rem !important; }
  .btn-pf-secondary { padding: 7px 12px; font-size: 1.15rem; }
  .hero-title { font-size: 2rem !important; }
  .section-hero--compact .hero-title { font-size: 1.7rem !important; }
}

/* === FAQ BLOCK INSIDE ARTICLES — defensive overrides ===
   When the FAQ block is pasted into a Zendesk article body, .article-body
   typography rules cascade into the FAQ list. These rules re-establish
   the correct FAQ styling at higher specificity. */
.article-body .article-faq-block { font-size: 1.5rem !important; line-height: 1.5 !important; }
.article-body .faq-list,
.article-body .faq-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.article-body .faq-list { max-width: none !important; margin: 0 !important; }
.article-body .faq-list li {
  margin: 0 0 1.2rem 0 !important;
  display: block !important;
  padding-left: 0 !important;
}
.article-body .faq-list li::marker,
.article-body .faq-list li::before { content: none !important; display: none !important; }
.article-body .faq-question {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2rem !important;
  padding: 1.8rem 2.4rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--pf-text) !important;
  text-align: left !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-decoration: none !important;
}
.article-body .faq-question-text {
  flex: 1 !important;
  color: var(--pf-text) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  visibility: visible !important;
}
.article-body .faq-toggle {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235745A0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.article-body .faq-item.is-open .faq-toggle { transform: rotate(180deg) !important; }
.article-body .faq-answer p {
  padding: 0.6rem 2.4rem 2.2rem !important;
  margin: 0 !important;
  font-size: 1.45rem !important;
  line-height: 1.75 !important;
  color: var(--pf-grey) !important;
}
.article-body .faq-search-input { font-size: 1.5rem !important; font-family: inherit !important; }

/* === FAQ INSIDE ARTICLES (native <details>/<summary>) === */
.article-body details.faq-item {
  display: block !important;
  background: #fff !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 10px !important;
  margin: 0 0 1.2rem 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.article-body details.faq-item[open] {
  box-shadow: var(--pf-shadow-md) !important;
  border-color: #d0d0d0 !important;
}
.article-body details.faq-item > summary {
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2rem !important;
  padding: 1.8rem 2.4rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--pf-text) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.article-body details.faq-item > summary::-webkit-details-marker { display: none !important; }
.article-body details.faq-item > summary::marker { content: '' !important; display: none !important; }
.article-body details.faq-item > summary:hover { background: rgba(239,94,78,0.02) !important; }
/* ::after chevron removed — .faq-icon span handles the chevron to avoid double arrows */
.article-body details.faq-item > summary::after {
  content: none !important;
  display: none !important;
}
.article-body details.faq-item > .faq-answer { padding: 0 !important; }
.article-body details.faq-item > .faq-answer p {
  padding: 0.6rem 2.4rem 2.2rem !important;
  margin: 0 !important;
  font-size: 1.45rem !important;
  line-height: 1.75 !important;
  color: var(--pf-grey) !important;
}

/* === FAQ arrow — SVG chevron matching homepage === */
.article-body details.faq-item > summary,
details.faq-item > summary {
  position: relative !important;
  padding-right: 50px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
details.faq-item > summary > .faq-q-text { flex: 1 !important; }
details.faq-item > summary > .faq-icon {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235745A0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  font-size: 0 !important;
  color: transparent !important;
  transform: translateY(-50%) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
details.faq-item[open] > summary > .faq-icon {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */

/* Main content column — mirrors .article */
.category-main {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Category description under h1 */
.category-description {
  font-size: 1.6rem !important;
  color: var(--pf-grey) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Each section group */
.section-block {
  margin-bottom: 3.2rem !important;
  padding: 2.4rem !important;
  background: #fff !important;
  border: 1px solid var(--pf-border) !important;
  border-top: 4px solid var(--pf-red) !important;
  border-radius: 12px !important;
  box-shadow: var(--pf-shadow-sm) !important;
}

.section-block-title {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.6rem !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
}

.section-block-title a {
  color: var(--pf-text) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.section-block-title a:hover { color: var(--pf-red) !important; }

/* Article list */
.article-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.article-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
}
.article-list-item::marker { content: '' !important; }
.article-list-item:last-child { border-bottom: 0 !important; }

.article-list-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
  padding: 1.1rem 0 !important;
  color: var(--pf-text) !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.article-list-link::after {
  content: '→' !important;
  color: var(--pf-red) !important;
  opacity: 0 !important;
  transition: opacity 0.2s, transform 0.2s !important;
  font-size: 1.4rem !important;
}
.article-list-item:hover .article-list-link { color: var(--pf-red) !important; }
.article-list-item:hover .article-list-link::after { opacity: 1 !important; transform: translateX(3px) !important; }

/* Promoted star */
.icon-star {
  color: var(--pf-red) !important;
  flex-shrink: 0 !important;
}

/* Lock icon for internal articles */
.icon-lock {
  color: var(--pf-grey-light) !important;
  flex-shrink: 0 !important;
}

/* "Show all articles" link */
.see-all-articles {
  display: inline-block !important;
  margin-top: 1.4rem !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--pf-red) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.see-all-articles:hover { color: var(--pf-red-hover) !important; }

/* Responsive — tablet */
@media (max-width: 960px) {
  .section-block { padding: 2rem !important; }
}

/* Responsive — mobile */
@media (max-width: 640px) {
  .section-block { padding: 1.6rem !important; margin-bottom: 2rem !important; }
  .section-block-title { font-size: 1.6rem !important; }
  .article-list-link { font-size: 1.4rem !important; padding: 1.2rem 0 !important; }

  /* Arrow always visible on touch (no hover state on mobile) */
  .article-list-link::after { opacity: 1 !important; }

  /* Section subsection links: always show chevron */
  .section-list-chevron { opacity: 1 !important; }
}

/* ============================================================
   === ADDITIONAL PAGES ===
   Section page · Search results · User profile
   ============================================================ */

/* ----------------------------------------------------------
   SECTION PAGE
   ---------------------------------------------------------- */

/* Subscribe button margin */
.section-subscribe {
  margin-bottom: 1.6rem !important;
}
.section-subscribe button,
.community-follow button,
.user-profile-actions button,
.user-profile-actions a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.8rem 1.8rem !important;
  border: 1.5px solid var(--pf-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--pf-grey) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.section-subscribe button:hover,
.community-follow button:hover,
.user-profile-actions button:hover,
.user-profile-actions a:hover {
  border-color: var(--pf-red) !important;
  color: var(--pf-red) !important;
}

/* Sub-section list (inside .section-block) */
.section-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.section-list-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
}
.section-list-item::marker { content: '' !important; }
.section-list-item:last-child { border-bottom: 0 !important; }

.section-list-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 0 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--pf-text) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.section-list-chevron {
  color: var(--pf-red) !important;
  opacity: 0 !important;
  flex-shrink: 0 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.section-list-item:hover .section-list-link { color: var(--pf-red) !important; }
.section-list-item:hover .section-list-chevron {
  opacity: 1 !important;
  transform: translateX(3px) !important;
}

/* Pagination */
.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.8rem !important;
  padding: 3.2rem 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
.pagination a,
.pagination .pagination-page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid var(--pf-border) !important;
  border-radius: 8px !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--pf-grey) !important;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
  background: #fff !important;
}
.pagination a:hover {
  border-color: var(--pf-red) !important;
  color: var(--pf-red) !important;
}
.pagination .current a,
.pagination a[aria-current="page"],
.pagination .active a {
  background: var(--pf-red) !important;
  border-color: var(--pf-red) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   SEARCH RESULTS PAGE
   ---------------------------------------------------------- */

.search-results-layout {
  display: flex !important;
  gap: 4rem !important;
  align-items: flex-start !important;
  padding-bottom: 8rem !important;
}

/* Filter sidebar */
.search-results-sidebar {
  flex: 0 0 220px !important;
  position: sticky !important;
  top: 2.4rem !important;
  align-self: flex-start !important;
}

.filters-in-section {
  background: #fff !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 12px !important;
  padding: 1.6rem 2rem !important;
  margin-bottom: 1.2rem !important;
}

.collapsible-sidebar-title,
.sidenav-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pf-grey) !important;
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
}

/* Toggle hidden on desktop — sidebar always expanded */
.collapsible-sidebar-toggle {
  display: none !important;
}

/* Force list visible on desktop */
.multibrand-filter-list--collapsed {
  display: block !important;
}

/* On mobile the toggle is shown and the list collapses */
@media (max-width: 960px) {
  .collapsible-sidebar-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.6rem 0 !important;
    background: none !important;
    border: 0 !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--pf-grey) !important;
    cursor: pointer !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  .multibrand-filter-list--collapsed {
    display: none !important;
  }
  .collapsible-sidebar[data-expanded="true"] .multibrand-filter-list--collapsed {
    display: block !important;
  }
  /* Show chevron, hide x by default */
  .collapsible-sidebar-toggle-icon.chevron-icon { display: block !important; }
  .collapsible-sidebar-toggle-icon.x-icon { display: none !important; }
  /* Swap icons when expanded */
  .collapsible-sidebar-toggle[aria-expanded="true"] .collapsible-sidebar-toggle-icon.chevron-icon { display: none !important; }
  .collapsible-sidebar-toggle[aria-expanded="true"] .collapsible-sidebar-toggle-icon.x-icon { display: block !important; }
}

/* Unstyled filter list */
.multibrand-filter-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.multibrand-filter-list li {
  list-style: none !important;
  margin: 0 !important;
}
.multibrand-filter-list li::marker { content: '' !important; }

/* Filter items */
.sidenav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.8rem 1rem !important;
  border-radius: 8px !important;
  font-size: 1.4rem !important;
  color: var(--pf-grey) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  margin-bottom: 0.2rem !important;
}
.sidenav-item:hover {
  background: rgba(239,94,78,0.06) !important;
  color: var(--pf-red) !important;
}
.sidenav-item.current,
.sidenav-item[aria-current="page"] {
  background: rgba(239,94,78,0.08) !important;
  color: var(--pf-red) !important;
  font-weight: 600 !important;
}

.filter-name {
  flex: 1 !important;
}

.doc-count {
  font-size: 1.2rem !important;
  color: var(--pf-grey-light) !important;
  margin-left: 0.4rem !important;
}

/* "Show more" ghost button */
.see-all-filters {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  padding: 0.8rem 1rem !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--pf-red) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.see-all-filters:hover { color: var(--pf-red-hover) !important; }

/* Content-tag chips */
.sidenav-tag { padding: 0.4rem 0 !important; }
.content-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.4rem 1rem !important;
  background: rgba(239,94,78,0.06) !important;
  border: 1px solid rgba(239,94,78,0.25) !important;
  border-radius: 20px !important;
  font-size: 1.3rem !important;
  color: var(--pf-red) !important;
  font-weight: 600 !important;
}
.content-tag a {
  display: flex !important;
  align-items: center !important;
  color: var(--pf-red) !important;
  text-decoration: none !important;
}
.close-icon {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  color: var(--pf-red) !important;
}

/* Results column */
.search-results-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.search-results-subheading {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 0 0 2.4rem !important;
}

/* Results list */
.search-results-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.search-results-list > li {
  list-style: none !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
  padding: 2rem 0 !important;
}
.search-results-list > li:last-child { border-bottom: 0 !important; }
.search-results-list > li::marker { content: '' !important; }

.search-result-title-container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.6rem !important;
  margin-bottom: 0.6rem !important;
}

.search-result-title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.search-result-title a {
  color: var(--pf-text) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.search-result-title a:hover { color: var(--pf-red) !important; }

.search-result-description {
  font-size: 1.4rem !important;
  color: var(--pf-grey) !important;
  line-height: 1.7 !important;
  margin: 0.8rem 0 0 !important;
}

.search-result-meta-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem 1rem !important;
  margin-top: 0.8rem !important;
}

.search-result-breadcrumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
.search-result-breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.25rem !important;
  color: var(--pf-grey-light) !important;
  list-style: none !important;
}
.search-result-breadcrumbs li::marker { content: '' !important; }
.search-result-breadcrumbs li + li::before {
  content: '›' !important;
  margin: 0 0.4rem !important;
  color: var(--pf-grey-light) !important;
}
.search-result-breadcrumbs a {
  color: var(--pf-grey-light) !important;
  text-decoration: none !important;
}
.search-result-breadcrumbs a:hover { color: var(--pf-red) !important; }

.meta-data {
  font-size: 1.25rem !important;
  color: var(--pf-grey-light) !important;
}
.meta-data + .meta-data::before {
  content: '·' !important;
  margin-right: 0.5rem !important;
  color: var(--pf-grey-light) !important;
}

.search-result-icons {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-shrink: 0 !important;
}

.search-result-votes,
.search-result-meta-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 1.25rem !important;
  color: var(--pf-grey-light) !important;
}

.search-result-votes-icon,
.search-result-meta-count-icon {
  display: block !important;
  color: var(--pf-grey-light) !important;
}

.visibility-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* No results state */
.no-results {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 6rem 0 !important;
  color: var(--pf-grey) !important;
}
.no-results svg { margin-bottom: 2rem !important; }
.no-results .headline {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin-bottom: 1.2rem !important;
}
.no-results .action-prompt {
  font-size: 1.5rem !important;
  color: var(--pf-grey) !important;
  margin-bottom: 0.8rem !important;
}
.no-results .action-prompt a {
  color: var(--pf-red) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.no-results .action-prompt a:hover { color: var(--pf-red-hover) !important; }

/* ----------------------------------------------------------
   USER PROFILE PAGE
   ---------------------------------------------------------- */

/* Profile header band */
.profile-header {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(239,94,78,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 100%, rgba(239,94,78,0.04) 0%, transparent 55%),
    linear-gradient(180deg, #fffaf8 0%, #fff 100%) !important;
  border-bottom: 1px solid var(--pf-border) !important;
  padding: 4rem 0 !important;
}

.profile-info {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  margin-bottom: 2.4rem !important;
}

/* Avatar */
.profile-avatar {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 80px !important;
}
.profile-avatar .user-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  box-shadow: var(--pf-shadow-md) !important;
  object-fit: cover !important;
  display: block !important;
}
.icon-agent {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--pf-red) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #fff !important;
}

/* Basic info */
.basic-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.community-name-and-title-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 0.8rem !important;
}
.name {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--pf-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.name a {
  color: inherit !important;
  text-decoration: none !important;
}
.name a:hover { color: var(--pf-red) !important; }

/* Title badge pills */
.community-badge-titles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.community-badge-titles li::marker { content: '' !important; }
.community-badge-title {
  display: inline-flex !important;
  padding: 0.3rem 1rem !important;
  border-radius: 20px !important;
  background: rgba(239,94,78,0.08) !important;
  color: var(--pf-red) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Achievement badge avatars */
.community-badge-achievements {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.8rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
}
.community-badge-achievements li::marker { content: '' !important; }
.community-badge-achievement img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: block !important;
}
.community-badge-achievements-rest {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--pf-border) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--pf-grey) !important;
  background: #fff !important;
}

.description {
  font-size: 1.5rem !important;
  color: var(--pf-grey) !important;
  line-height: 1.7 !important;
  flex-basis: 100% !important;
  margin: 0 !important;
}

/* Options column */
.options {
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.profile-private-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1.2rem !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 20px !important;
  background: var(--pf-bg-soft) !important;
  font-size: 1.3rem !important;
  color: var(--pf-grey) !important;
}

/* Dropdown */
.dropdown { position: relative !important; }
.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid var(--pf-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  cursor: pointer !important;
  color: var(--pf-grey) !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.dropdown-toggle:hover {
  border-color: var(--pf-red) !important;
  color: var(--pf-red) !important;
}
.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 0.6rem) !important;
  right: 0 !important;
  min-width: 160px !important;
  background: #fff !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--pf-shadow-md) !important;
  list-style: none !important;
  padding: 0.6rem 0 !important;
  margin: 0 !important;
  z-index: 50 !important;
  display: none !important;
}
.dropdown[aria-expanded="true"] .dropdown-menu,
.dropdown.is-open .dropdown-menu {
  display: block !important;
}
.dropdown-menu li { list-style: none !important; }
.dropdown-menu li::marker { content: '' !important; }
.dropdown-menu a {
  display: block !important;
  padding: 0.9rem 1.6rem !important;
  font-size: 1.4rem !important;
  color: var(--pf-text) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.dropdown-menu a:hover {
  background: rgba(239,94,78,0.06) !important;
  color: var(--pf-red) !important;
}

/* Profile stats strip */
.profile-stats {
  margin-top: 0 !important;
}
.profile-stats-activity {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2.4rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.profile-stats-activity li::marker { content: '' !important; }
.profile-stats-activity .stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.stat-value {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--pf-red) !important;
  line-height: 1.1 !important;
}
.stat-label {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--pf-grey-light) !important;
  margin-top: 0.2rem !important;
}

/* Profile navigation bar */
.profile-nav {
  background: #fff !important;
  border-bottom: 1px solid var(--pf-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
.profile-nav .container {
  display: flex !important;
  align-items: center !important;
}
.collapsible-nav-toggle {
  display: none !important;
}
.collapsible-nav-list {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 0 !important;
}
.collapsible-nav-list::-webkit-scrollbar { display: none !important; }
.collapsible-nav-list li { list-style: none !important; flex-shrink: 0 !important; }
.collapsible-nav-list li::marker { content: '' !important; }
.collapsible-nav-list a {
  display: block !important;
  padding: 1.4rem 2rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--pf-grey) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
  white-space: nowrap !important;
}
.collapsible-nav-list a:hover { color: var(--pf-red) !important; }
.collapsible-nav-list li.current > a {
  color: var(--pf-red) !important;
  border-bottom-color: var(--pf-red) !important;
}

/* Profile section body */
.profile-section {
  padding: 4rem 0 6rem !important;
}

.profile-section-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 1.2rem !important;
  margin-bottom: 2.4rem !important;
  padding-bottom: 1.6rem !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
}
.profile-section-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 0 !important;
}
.profile-section-description {
  font-size: 1.4rem !important;
  color: var(--pf-grey) !important;
  margin: 0 !important;
}
.profile-section-sorter {
  margin-left: auto !important;
}

/* Activity list */
.profile-activity-list {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.profile-activity-list li::marker { content: '' !important; }
.profile-activity {
  display: flex !important;
  gap: 1.6rem !important;
  padding: 2rem 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
}
.profile-activity:last-child { border-bottom: 0 !important; }
.profile-activity-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(239,94,78,0.08) !important;
  border-radius: 8px !important;
  color: var(--pf-red) !important;
}
.profile-activity-body { flex: 1 !important; min-width: 0 !important; }
.profile-activity-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  margin-bottom: 0.4rem !important;
}
.profile-activity-header .user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}
.profile-activity-author {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: var(--pf-text) !important;
}
.profile-activity-description {
  font-size: 1.35rem !important;
  color: var(--pf-grey) !important;
  margin: 0 0 0.6rem !important;
  line-height: 1.6 !important;
}
.profile-activity-description a {
  color: var(--pf-text) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.profile-activity-description a:hover { color: var(--pf-red) !important; }

/* Contribution list */
.profile-contribution-list {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.profile-contribution-list > li {
  display: flex !important;
  gap: 1.6rem !important;
  padding: 2rem 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
  list-style: none !important;
}
.profile-contribution-list > li:last-child { border-bottom: 0 !important; }
.profile-contribution-list > li::marker { content: '' !important; }
.profile-contribution-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(239,94,78,0.08) !important;
  border-radius: 8px !important;
  color: var(--pf-red) !important;
}
.profile-contribution {
  flex: 1 !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid var(--pf-border-light) !important;
  border-radius: 10px !important;
  padding: 1.6rem !important;
}
.profile-contribution-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.8rem !important;
  margin-bottom: 0.4rem !important;
}
.profile-contribution-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
}
.profile-contribution-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.profile-contribution-title a:hover { color: var(--pf-red) !important; }
.profile-contribution-breadcrumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0.8rem !important;
}
.profile-contribution-breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.2rem !important;
  color: var(--pf-grey-light) !important;
  list-style: none !important;
}
.profile-contribution-breadcrumbs li::marker { content: '' !important; }
.profile-contribution-breadcrumbs li + li::before {
  content: '›' !important;
  margin: 0 0.4rem !important;
}
.profile-contribution-breadcrumbs a {
  color: var(--pf-grey-light) !important;
  text-decoration: none !important;
}
.profile-contribution-breadcrumbs a:hover { color: var(--pf-red) !important; }
.profile-contribution-body {
  font-size: 1.4rem !important;
  color: var(--pf-grey) !important;
  line-height: 1.7 !important;
  margin: 0.4rem 0 0 !important;
}

/* Meta group */
.meta-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem 1rem !important;
  margin-top: 0.8rem !important;
}
.comment-link {
  color: var(--pf-red) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.comment-link:hover { color: var(--pf-red-hover) !important; }

/* Status labels */
.status-label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.2rem 0.8rem !important;
  border-radius: 20px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}
.status-label-official {
  background: rgba(239,94,78,0.08) !important;
  color: var(--pf-red) !important;
  border: 1px solid rgba(239,94,78,0.2) !important;
}
.status-label-pending-moderation {
  background: rgba(230,160,0,0.08) !important;
  color: #a07000 !important;
  border: 1px solid rgba(230,160,0,0.2) !important;
}

/* Badges list */
.profile-badges-items {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.profile-badges-items li::marker { content: '' !important; }
.profile-badges-item {
  display: flex !important;
  align-items: center !important;
  gap: 1.6rem !important;
  padding: 1.6rem 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
  list-style: none !important;
}
.profile-badges-item:last-child { border-bottom: 0 !important; }
.profile-badges-item-image {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}
.profile-badges-item-info { flex: 1 !important; min-width: 0 !important; }
.profile-badges-item-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 0 0 0.3rem !important;
}
.profile-badges-item-description {
  font-size: 1.35rem !important;
  color: var(--pf-grey) !important;
  margin: 0 !important;
}
.profile-badges-item-metadata {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Empty / private states */
.no-activity,
.private-activity {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4rem 0 !important;
  color: var(--pf-grey) !important;
  font-size: 1.5rem !important;
  text-align: center !important;
}
.no-activity p,
.private-activity p {
  margin: 0 !important;
  color: var(--pf-grey) !important;
}

/* ----------------------------------------------------------
   RESPONSIVE — TABLET (≤960px)
   ---------------------------------------------------------- */
@media (max-width: 960px) {

  /* Search results — stack sidebar above results */
  .search-results-layout {
    flex-direction: column !important;
    gap: 2.4rem !important;
  }
  .search-results-sidebar {
    position: static !important;
    flex: none !important;
    width: 100% !important;
  }

  /* Profile stats wrap */
  .profile-stats-activity { gap: 1.6rem !important; }
  .profile-info { gap: 1.6rem !important; }
  .options { margin-left: 0 !important; width: 100% !important; }

  /* Profile nav toggle */
  .collapsible-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.4rem 0 !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    color: var(--pf-grey) !important;
    margin-right: 1.2rem !important;
    flex-shrink: 0 !important;
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — MOBILE (≤640px)
   ---------------------------------------------------------- */
@media (max-width: 640px) {

  /* Profile header compact */
  .profile-header { padding: 2.4rem 0 !important; }
  .profile-avatar,
  .profile-avatar .user-avatar { width: 60px !important; height: 60px !important; }
  .name { font-size: 2rem !important; }
  .profile-section { padding: 2.4rem 0 4rem !important; }
  .profile-section-title { font-size: 1.8rem !important; }

  /* Profile nav font smaller */
  .collapsible-nav-list a { font-size: 1.3rem !important; padding: 1.2rem 1.4rem !important; }

  /* Stats single col */
  .profile-stats-activity { flex-direction: column !important; gap: 1.2rem !important; }

  /* Activity stacks */
  .profile-activity { flex-direction: column !important; gap: 1rem !important; }
  .profile-activity-icon { width: 32px !important; height: 32px !important; }

  /* Contribution card flush */
  .profile-contribution-list > li { flex-direction: column !important; gap: 1rem !important; }
  .profile-contribution { padding: 1.2rem !important; }

  /* Search results sidebar filters */
  .filters-in-section { padding: 1.2rem 1.4rem !important; }
  .search-results-subheading { font-size: 1.6rem !important; }
}

/* ============================================================
   SEARCH RESULTS — REDESIGNED (sr-* classes)
   No sidebar. Google-style: header search bar + filter tabs
   + clean result cards.
   ============================================================ */

/* ── Search header bar ── */
.sr-header {
  background: linear-gradient(180deg, #fffaf8 0%, #fafafa 100%) !important;
  border-bottom: 1px solid var(--pf-border) !important;
  padding: 2rem 0 !important;
}
.sr-search-wrap {
  position: relative !important;
  max-width: 720px !important;
}
.sr-search-icon {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--pf-grey-light) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.sr-header .search input[type="search"] {
  height: 52px !important;
  border-radius: 30px !important;
  border: 1.5px solid var(--pf-border) !important;
  box-shadow: var(--pf-shadow-sm) !important;
  width: 100% !important;
  padding: 0 50px 0 52px !important;
  font-size: 1.6rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.sr-header .search input[type="search"]:focus {
  border-color: var(--pf-red) !important;
  box-shadow: 0 0 0 3px rgba(239,94,78,0.10) !important;
}

/* Page wrapper — no extra top padding needed (header provides it) */
.sr-page { padding-top: 0 !important; padding-bottom: 6rem !important; }

/* ── Type filter tab bar ── */
.sr-filter-bar {
  border-bottom: 1px solid var(--pf-border) !important;
}
.sr-filter-tabs {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.sr-filter-tabs::-webkit-scrollbar { display: none !important; }
.sr-filter-tabs li { list-style: none !important; }
.sr-filter-tabs li::marker { content: '' !important; }

.sr-filter-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 1.4rem 1.6rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--pf-grey) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.sr-filter-tab:hover { color: var(--pf-text) !important; }
.sr-filter-tab.is-active {
  color: var(--pf-red) !important;
  border-bottom-color: var(--pf-red) !important;
}
.sr-filter-count {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--pf-grey-light) !important;
  background: var(--pf-bg) !important;
  padding: 0.1rem 0.6rem !important;
  border-radius: 10px !important;
}
.sr-filter-tab.is-active .sr-filter-count {
  background: rgba(239,94,78,0.10) !important;
  color: var(--pf-red) !important;
}

/* ── Subfilter pills ── */
.sr-subfilter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
  padding: 1.4rem 0 !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
}
.sr-subfilter-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.5rem 1.2rem !important;
  border: 1.5px solid var(--pf-border) !important;
  border-radius: 20px !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  color: var(--pf-text) !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}
.sr-subfilter-pill:hover { border-color: var(--pf-red) !important; color: var(--pf-red) !important; }
.sr-subfilter-pill.is-active {
  border-color: var(--pf-red) !important;
  background: rgba(239,94,78,0.08) !important;
  color: var(--pf-red) !important;
  font-weight: 600 !important;
}
.sr-subfilter-count { color: var(--pf-grey-light) !important; font-size: 1.25rem !important; }
.sr-see-more {
  background: none !important;
  border: 1.5px dashed var(--pf-border) !important;
  border-radius: 20px !important;
  padding: 0.5rem 1.2rem !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  color: var(--pf-grey) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: 0.15s !important;
}
.sr-see-more:hover { border-color: var(--pf-red) !important; color: var(--pf-red) !important; }

/* ── Active content tag chips ── */
.sr-tag-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
  padding: 1.2rem 0 !important;
}
.sr-active-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: rgba(239,94,78,0.08) !important;
  border: 1.5px solid var(--pf-red) !important;
  color: var(--pf-red) !important;
  border-radius: 20px !important;
  padding: 0.4rem 0.6rem 0.4rem 1.2rem !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
}
.sr-tag-remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(239,94,78,0.15) !important;
  color: var(--pf-red) !important;
  transition: background 0.15s !important;
  flex-shrink: 0 !important;
}
.sr-tag-remove:hover { background: var(--pf-red) !important; color: #fff !important; }

/* ── Result count ── */
.sr-count {
  font-size: 1.4rem !important;
  color: var(--pf-grey) !important;
  padding: 1.8rem 0 0.4rem !important;
}

/* ── Results list ── */
.sr-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sr-list > li {
  list-style: none !important;
  border-bottom: 1px solid var(--pf-border-light) !important;
  padding: 2.4rem 0 !important;
}
.sr-list > li:first-child { padding-top: 1.2rem !important; }
.sr-list > li:last-child { border-bottom: 0 !important; }
.sr-list > li::marker { content: '' !important; }

/* Path row: type icon + breadcrumb */
.sr-item-path {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.sr-item-type-icon { color: var(--pf-grey-light) !important; flex-shrink: 0 !important; }

.sr-breadcrumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sr-breadcrumbs li {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1.25rem !important;
  color: var(--pf-grey-light) !important;
}
.sr-breadcrumbs li::marker { content: '' !important; }
.sr-breadcrumbs li + li::before {
  content: '›' !important;
  margin: 0 0.4rem !important;
  color: var(--pf-border) !important;
}
.sr-breadcrumbs a { color: var(--pf-grey-light) !important; text-decoration: none !important; }
.sr-breadcrumbs a:hover { color: var(--pf-red) !important; text-decoration: underline !important; }

/* Title */
.sr-item-title {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.6rem !important;
  line-height: 1.35 !important;
}
.sr-item-title a { color: var(--pf-text) !important; text-decoration: none !important; transition: color 0.2s !important; }
.sr-item-title a:hover { color: var(--pf-red) !important; }
.sr-external-icon { display: inline-block !important; vertical-align: middle !important; margin-left: 0.4rem !important; opacity: 0.5 !important; }

/* Snippet — max 3 lines */
.sr-item-snippet {
  font-size: 1.45rem !important;
  color: var(--pf-grey) !important;
  line-height: 1.75 !important;
  margin: 0 0 0.8rem !important;
  max-width: 760px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Meta row */
.sr-item-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1.2rem !important;
}
.sr-meta-item { font-size: 1.25rem !important; color: var(--pf-grey-light) !important; }
.sr-meta-votes,
.sr-meta-comments { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; }

/* ── No results state ── */
.sr-no-results {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 7rem 0 4rem !important;
  gap: 1.2rem !important;
}
.sr-no-results-icon {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--pf-bg) !important;
  border-radius: 50% !important;
  margin-bottom: 0.8rem !important;
}
.sr-no-results-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--pf-text) !important;
  margin: 0 !important;
}
.sr-no-results-hint {
  font-size: 1.5rem !important;
  color: var(--pf-grey) !important;
  margin: 0 !important;
  max-width: 400px !important;
}
.sr-no-results-action { margin-top: 0.8rem !important; }
.sr-no-results-action a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  color: var(--pf-red) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  text-decoration: none !important;
  padding: 1rem 2rem !important;
  border: 1.5px solid var(--pf-red) !important;
  border-radius: 8px !important;
  transition: 0.2s !important;
}
.sr-no-results-action a:hover { background: var(--pf-red) !important; color: #fff !important; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .sr-header { padding: 1.4rem 0 !important; }
  .sr-search-wrap { max-width: 100% !important; }
  .sr-filter-tab { padding: 1.2rem 1.2rem !important; }
}
@media (max-width: 640px) {
  .sr-header .search input[type="search"] { height: 46px !important; font-size: 1.5rem !important; padding: 0 40px 0 46px !important; }
  .sr-filter-tab { font-size: 1.35rem !important; padding: 1.1rem 1rem !important; }
  .sr-subfilter-pill { font-size: 1.3rem !important; padding: 0.45rem 1rem !important; }
  .sr-item-title { font-size: 1.6rem !important; }
  .sr-item-snippet { font-size: 1.4rem !important; -webkit-line-clamp: 2 !important; }
  .sr-no-results { padding: 4rem 0 2rem !important; }
  .sr-no-results-title { font-size: 1.8rem !important; }
}

/* ============================================================
   HERO BACKGROUND ILLUSTRATION
   Replaces the old logo watermark with the city SVG.
   ============================================================ */
.hero-bg-img {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 65% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
}
@media (max-width: 960px) {
  .hero-bg-img { width: 55% !important; opacity: 0.85 !important; }
}
@media (max-width: 640px) {
  .hero-bg-img { display: none !important; }
}

/* ============================================================
   HOMEPAGE BOTTOM CTA — tracked link back to PF website
   All links use utm_source=help_center for GA attribution.
   ============================================================ */
.section-homepage-cta {
  background: var(--pf-red) !important;
  padding: 4.8rem 0 !important;
}
.homepage-cta-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3.2rem !important;
  flex-wrap: wrap !important;
}
.homepage-cta-text { flex: 1 1 0 !important; min-width: 0 !important; }
.homepage-cta-title {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 0.8rem !important;
  line-height: 1.3 !important;
}
.homepage-cta-desc {
  font-size: 1.5rem !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}
.homepage-cta-actions {
  display: flex !important;
  gap: 1.2rem !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}
.homepage-cta-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  background: #fff !important;
  color: var(--pf-red) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  padding: 1.1rem 2.4rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: 0.2s !important;
  border: 2px solid #fff !important;
}
.homepage-cta-btn-primary:hover {
  background: rgba(255,255,255,0.92) !important;
  color: var(--pf-red-hover) !important;
}
.homepage-cta-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid rgba(255,255,255,0.65) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  padding: 1.1rem 2.4rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: 0.2s !important;
  background: transparent !important;
}
.homepage-cta-btn-secondary:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
@media (max-width: 960px) {
  .homepage-cta-inner { flex-direction: column !important; align-items: flex-start !important; gap: 2.4rem !important; }
}
@media (max-width: 640px) {
  .section-homepage-cta { padding: 3.2rem 0 !important; }
  .homepage-cta-title { font-size: 2rem !important; }
  .homepage-cta-actions { width: 100% !important; flex-direction: column !important; }
  .homepage-cta-btn-primary,
  .homepage-cta-btn-secondary { justify-content: center !important; font-size: 1.45rem !important; padding: 1rem 1.6rem !important; }
}

/* ============================================================
   MOBILE OPTIMISATION — COMPREHENSIVE v2
   Covers: global touch, article tables, touch targets,
   profile layout, back-to-top, spacing across all pages.
   ============================================================ */

/* ── Global touch polish ─────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
a, button, [role="button"] { touch-action: manipulation; }

/* Prevent iOS auto-zoom on input focus (needs font-size ≥ 16px) */
input[type="search"],
input[type="text"],
input[type="email"],
textarea,
select { font-size: max(1.6rem, 16px) !important; }

/* Screen-reader utility (used in search results markup) */
.visibility-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ── Article body: word-break + table horizontal scroll ──── */
.article-body {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
/* Long URLs in article links shouldn't overflow the column */
.article-body a { word-break: break-all !important; }

/* Tables scroll horizontally inside a block container */
.article-body table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}
/* Keep cell content from wrapping while scrolling */
.article-body table th,
.article-body table td { white-space: nowrap !important; }

/* ── Touch targets — 44 × 44 px minimum ─────────────────── */
.faq-question       { min-height: 44px !important; }
.article-vote       { min-width: 44px !important; min-height: 44px !important; }
.article-list-link  { min-height: 44px !important; padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
.section-list-link  { min-height: 44px !important; }
.sr-filter-tab      { min-height: 44px !important; }
.sidenav-item       { min-height: 44px !important; }
.pagination a,
.pagination .pagination-page { min-width: 44px !important; min-height: 44px !important; }
.collapsible-nav-list a { min-height: 44px !important; display: flex !important; align-items: center !important; }

/* ── Focus rings for keyboard / switch access ────────────── */
:focus-visible {
  outline: 2px solid var(--pf-red) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ── Back-to-top button (mobile only) ────────────────────── */
.back-to-top {
  position: fixed !important;
  bottom: 2rem !important; right: 1.6rem !important;
  width: 48px !important; height: 48px !important;
  background: var(--pf-red) !important;
  color: #fff !important;
  border: 0 !important; border-radius: 50% !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(239,94,78,0.38) !important;
  opacity: 0 !important; pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity 0.25s, transform 0.25s !important;
  z-index: 200 !important;
  font-size: 0 !important; /* hide any stray text */
}
.back-to-top.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.back-to-top:hover { background: var(--pf-red-hover) !important; }
@media (min-width: 641px) { .back-to-top { display: none !important; } }

/* ── Tablet (≤ 960px) ────────────────────────────────────── */
@media (max-width: 960px) {

  /* Slightly tighter article gap */
  .article-container { gap: 3.2rem !important; }

  /* Sidebar doesn't stretch full-width on portrait tablet */
  .lead-gen-sidebar { max-width: 560px !important; }

  /* Profile: options bar wraps under name */
  .options { margin-left: 0 !important; flex-wrap: wrap !important; }
  .basic-info { flex: 1 1 calc(100% - 110px) !important; min-width: 0 !important; }

  /* Homepage CTA title slightly smaller */
  .homepage-cta-title { font-size: 2.2rem !important; }

  /* Search: wrap + button full-width on tablet portrait */
  .sr-search-wrap { max-width: 100% !important; }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────── */
@media (max-width: 640px) {

  /* ─ Base scale: slightly tighter for 375px screens ─ */
  html { font-size: 58% !important; }

  /* ─ Hero ─ */
  .search-container { padding: 0 !important; }

  /* ─ Process cards ─ */
  .process-card { border-radius: 10px !important; }
  .card-title { font-size: 1.6rem !important; }

  /* ─ FAQ home ─ */
  .faq-home-header { margin-bottom: 2rem !important; }

  /* ─ Article ─ */
  .article-body h2 { font-size: 1.9rem !important; margin: 2.4rem 0 1rem !important; }
  .article-body h3 { font-size: 1.65rem !important; margin: 2rem 0 0.8rem !important; }
  .article-votes { flex-wrap: wrap !important; gap: 1rem !important; }
  .article-votes-question { font-size: 1.4rem !important; width: 100% !important; }
  .article-footer { margin-top: 3.2rem !important; }

  /* ─ Breadcrumbs: truncate long middle crumbs ─ */
  .breadcrumbs li { max-width: 150px !important; }
  .sub-nav { margin-bottom: 2rem !important; }

  /* ─ Sidebar ─ */
  .lead-gen-sidebar { max-width: 100% !important; }
  .sidebar-cta-card { padding: 2rem 1.6rem !important; }
  .sidebar-quick-links { margin-top: 1.6rem !important; padding: 1.6rem !important; }

  /* ─ Category / section blocks ─ */
  .article-container { gap: 2.4rem !important; margin-bottom: 4rem !important; }
  .section-block-title { font-size: 1.55rem !important; }

  /* ─ Profile header ─ */
  .profile-header { padding: 2rem 0 !important; }
  .profile-info { gap: 1.2rem !important; flex-wrap: wrap !important; }
  .profile-avatar,
  .profile-avatar .user-avatar { width: 56px !important; height: 56px !important; }
  .basic-info { flex: 1 1 calc(100% - 72px) !important; }
  .name { font-size: 1.9rem !important; }
  .community-name-and-title-badges { gap: 0.6rem !important; flex-wrap: wrap !important; }
  .community-badge-title { font-size: 1.1rem !important; padding: 0.2rem 0.6rem !important; }
  .description { font-size: 1.4rem !important; }

  /* Activity stats: wrap in 2 columns */
  .profile-stats-activity { flex-wrap: wrap !important; gap: 1rem !important; }
  .profile-stats-activity .stat { flex: 1 1 40% !important; }

  /* Counter stats: 2×2 grid instead of 4-in-a-row */
  .profile-stats-counters {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .profile-stats-counters .stat {
    flex: 1 1 calc(50% - 1px) !important;
    min-width: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--pf-border-light) !important;
    text-align: left !important;
    padding: 1.4rem 1.6rem !important;
  }
  .profile-stats-counters .stat:nth-child(odd) {
    border-right: 1px solid var(--pf-border-light) !important;
  }
  .profile-stats-counters .stat:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }
  .profile-stats-counters .stat-value { font-size: 1.6rem !important; }

  /* Options: full-width, buttons expand */
  .options { width: 100% !important; gap: 0.8rem !important; }
  .community-follow button,
  .user-profile-actions button,
  .user-profile-actions a {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  /* Profile contributions */
  .profile-contribution-title a { font-size: 1.4rem !important; }
  .profile-contribution-body { font-size: 1.35rem !important; -webkit-line-clamp: 3; }
  .profile-contribution-list > li { flex-direction: column !important; gap: 0.8rem !important; }
  .profile-contribution-icon { width: 32px !important; height: 32px !important; }

  /* Profile badges: metadata drops below on mobile */
  .profile-badges-item { flex-wrap: wrap !important; }
  .profile-badges-item-metadata { margin-left: 0 !important; flex-basis: 100% !important; text-align: left !important; }

  /* ─ Profile nav ─ */
  .collapsible-nav-list a { font-size: 1.3rem !important; padding: 1.2rem 1.4rem !important; }

  /* ─ Search results page ─ */
  .sr-page { padding-bottom: 4rem !important; }
  .sr-count { font-size: 1.35rem !important; }
  .sr-item-path { margin-bottom: 0.3rem !important; }
  .sr-item-meta { gap: 0.8rem !important; }
  .sr-subfilter-bar { gap: 0.5rem !important; padding: 1rem 0 !important; }
  /* Hide result count badges on filter pills (saves space) */
  .sr-filter-count { display: none !important; }

  /* ─ Pagination ─ */
  .pagination { gap: 0.5rem !important; padding: 2.4rem 0 !important; }
  .pagination a,
  .pagination .pagination-page { width: 38px !important; height: 38px !important; font-size: 1.3rem !important; }

  /* ─ Homepage CTA ─ */
  .section-homepage-cta { padding: 2.8rem 0 !important; }
  .homepage-cta-title { font-size: 1.9rem !important; }
  .homepage-cta-desc { font-size: 1.4rem !important; }

  /* ─ Article FAQ block ─ */
  .article-body details.faq-item > summary { padding: 1.4rem 1.8rem 1.4rem 1.4rem !important; font-size: 1.45rem !important; }
  .article-body details.faq-item > .faq-answer p { padding: 0.4rem 1.6rem 1.6rem !important; font-size: 1.4rem !important; }
}

/* ── Very small (≤ 380px) ────────────────────────────────── */
@media (max-width: 380px) {
  html { font-size: 56% !important; }
  .container { padding: 0 1.4rem !important; }
  .process-card-link { padding: 1.6rem 1.4rem 1.4rem !important; }
  .faq-question { padding: 1.4rem !important; font-size: 1.35rem !important; }
  .homepage-cta-title { font-size: 1.8rem !important; }
  .article-title { font-size: 2rem !important; }
  .sr-item-title { font-size: 1.5rem !important; }
  .name { font-size: 1.8rem !important; }
}

/* ============================================================
   HEADER — MOBILE NAV
   No hamburger. On mobile: text nav links hidden, PF button
   stays visible on the right alongside the logo.
   ============================================================ */

/* Make header position:relative for stacking context */
.header { position: relative !important; z-index: 50 !important; }

@media (max-width: 1023px) {
  /* Shrink header height on mobile */
  .header {
    height: 64px !important;
    padding: 0 1.6rem !important;
  }
  .logo img { max-height: 26px !important; }

  /* Keep user-nav visible but hide text links — only show the button */
  .user-nav { display: flex !important; }
  .user-nav .nav-link { display: none !important; }

  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Slightly smaller button text on very small screens */
  .user-nav .btn-pf-secondary {
    font-size: 1.3rem !important;
    padding: 0.7rem 1.2rem !important;
  }
}


/* ============================================================
   PROCESS CARDS — MOBILE LAYOUT
   Grid: col1=icon, col2=title+description, col3=arrow.
   Step label shown above as a full-width row.
   Description visible with 2-line clamp — no overflow.
   ============================================================ */
@media (max-width: 640px) {

  /* Switch to grid so description sits cleanly below the title */
  .process-card-link {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 1.4rem !important;
    row-gap: 0.4rem !important;
    padding: 2rem 1.6rem !important;
    align-items: start !important;
  }

  /* Step label: full-width top row */
  .card-step {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 1.05rem !important;
    margin-bottom: 0.2rem !important;
  }

  /* Icon: left column, row 2, aligned with title */
  .process-card .card-icon {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    padding: 9px !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
    margin-top: 0.1rem !important; /* optical alignment with title text */
  }

  /* Title: centre column, row 2 */
  .card-title {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 1.55rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* Arrow: right column, row 2 */
  .card-arrow {
    grid-column: 3 !important;
    grid-row: 2 !important;
    font-size: 1.6rem !important;
    margin: 0 !important;
    align-self: center !important;
    padding-top: 0.1rem !important;
  }

  /* Description: centre column, row 3 — 2-line clamp, no overflow */
  .card-description {
    grid-column: 2 !important;
    grid-row: 3 !important;
    font-size: 1.3rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    color: var(--pf-grey) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   ARTICLE PAGE — MOBILE READABILITY & OVERFLOW FIXES
   ============================================================ */

/* ── Blanket overflow protection for article body ── */
/* Anything pasted into the Zendesk editor (images, tables,
   code, iframes, embeds) is capped at 100% of its container. */
.article-body img,
.article-body video,
.article-body iframe,
.article-body embed,
.article-body object { max-width: 100% !important; height: auto !important; }

/* Pre / code blocks scroll instead of breaking layout */
.article-body pre {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: pre !important;
  max-width: 100% !important;
}
.article-body code {
  word-break: break-word !important;
  white-space: pre-wrap !important;
}

/* ── Mobile & tablet article improvements ── */
@media (max-width: 960px) {
  /* Slightly more breathing room on tablet */
  .article-body { line-height: 1.85 !important; }
}

@media (max-width: 640px) {
  /* Increase side padding so text never touches the screen edge */
  .container { padding: 0 2rem !important; }

  /* Article page top spacing */
  .article-page { padding-top: 2rem !important; }

  /* Tighten article container gap between article + sidebar */
  .article-container { gap: 2.4rem !important; margin-bottom: 3.2rem !important; }

  /* Article header */
  .article-title { font-size: 2rem !important; line-height: 1.25 !important; }
  .article-header { margin-bottom: 2rem !important; padding-bottom: 1.6rem !important; }

  /* Body typography — bigger line-height for mobile readability */
  .article-body {
    font-size: 1.55rem !important;
    line-height: 1.9 !important;
  }
  .article-body p { margin: 0 0 1.4rem !important; }

  /* Headings */
  .article-body h2 {
    font-size: 1.95rem !important;
    margin: 2.8rem 0 1rem !important;
    line-height: 1.25 !important;
  }
  .article-body h3 {
    font-size: 1.65rem !important;
    margin: 2.2rem 0 0.8rem !important;
    line-height: 1.3 !important;
  }
  .article-body h4 {
    font-size: 1.5rem !important;
    margin: 1.8rem 0 0.6rem !important;
  }

  /* Lists */
  .article-body ul,
  .article-body ol { padding-left: 2rem !important; margin: 0 0 1.4rem !important; }
  .article-body ul li,
  .article-body ol li { margin-bottom: 0.6rem !important; font-size: 1.5rem !important; }

  /* Blockquotes */
  .article-body blockquote {
    padding: 1.2rem 1.4rem !important;
    margin: 2rem 0 !important;
  }

  /* Tables: already display:block+overflow-x:auto from earlier fix.
     Reduce font/padding further for tight screens. */
  .article-body table { font-size: 1.3rem !important; }
  .article-body table th,
  .article-body table td { padding: 0.8rem 1rem !important; white-space: nowrap !important; }

  /* Breadcrumbs: prevent long paths pushing off-screen */
  .sub-nav { flex-wrap: nowrap !important; overflow: hidden !important; margin-bottom: 1.8rem !important; }
  .breadcrumbs { flex-wrap: nowrap !important; overflow: hidden !important; }
  .breadcrumbs li {
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
  }
  /* Always show first and last crumb at full width */
  .breadcrumbs li:first-child { max-width: 100px !important; flex-shrink: 0 !important; }
  .breadcrumbs li:last-child  { max-width: 160px !important; flex-shrink: 0 !important; }

  /* Sidebar on mobile: full width, compact */
  .lead-gen-sidebar { max-width: 100% !important; }
  .sidebar-cta-card { padding: 1.8rem 1.6rem !important; }
  .sidebar-cta-title { font-size: 1.6rem !important; }
  .sidebar-cta-text { font-size: 1.35rem !important; }

  /* Voting footer */
  .article-footer { margin-top: 3.2rem !important; padding-top: 2.4rem !important; }
  .article-votes { flex-wrap: wrap !important; gap: 1rem !important; }
  .article-votes-question { font-size: 1.4rem !important; flex-basis: 100% !important; }

  /* FAQ blocks inside articles */
  .article-faq-block { padding: 1.8rem 1.6rem !important; margin: 2.4rem 0 !important; }
  .article-body details.faq-item > summary { font-size: 1.45rem !important; padding: 1.4rem 1.8rem !important; }
}

@media (max-width: 380px) {
  .container { padding: 0 1.6rem !important; }
  .article-title { font-size: 1.85rem !important; }
  .article-body { font-size: 1.5rem !important; }
  .article-body h2 { font-size: 1.8rem !important; }
  .article-body h3 { font-size: 1.55rem !important; }
}

/* ============================================================
   ARTICLE OVERFLOW — SAFE CONTAINMENT
   Target individual elements that can overflow — never set
   overflow:hidden on .article or .article-body as Zendesk
   can collapse those containers.
   ============================================================ */

/* Word-wrap on the body text — no overflow-x:hidden */
.article-body {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Images, video, iframes with hardcoded widths from editor */
.article-body img,
.article-body video,
.article-body iframe,
.article-body embed,
.article-body object {
  max-width: 100% !important;
  height: auto !important;
}

/* Pre blocks: horizontal scroll, not overflow */
.article-body pre {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: pre-wrap !important;
  word-break: normal !important;
  max-width: 100% !important;
}

/* Zendesk image/figure wrappers */
.article-body .wysiwyg-image-wrap,
.article-body figure {
  max-width: 100% !important;
}

/* ============================================================
   ARTICLE LAYOUT — MOBILE WIDTH CONSTRAINT FIX
   Flex children don't auto-constrain to parent width.
   Explicitly cap every article layout element at 100%.
   ============================================================ */
@media (max-width: 1023px) {
  .article-container,
  .article,
  .article-content,
  .article-body,
  .article-header,
  .article-footer,
  .lead-gen-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Sub-nav: let breadcrumbs wrap naturally — nowrap forces the
     container wider when paths are long */
  .sub-nav {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .breadcrumbs {
    flex-wrap: wrap !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   ARTICLE — TABLES
   Force all tables in articles to fixed layout so they respect
   container width. table-layout:fixed is the only reliable way
   to prevent <table> from overflowing its parent.
   ============================================================ */
.article-body table {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
}
.article-body table td,
.article-body table th {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 0 !important; /* forces cell to respect table-layout: fixed */
}
.article-body figure.wysiwyg-table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 2rem 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   ARTICLE — ZD-HTML-BLOCK FLEX CARDS
   Side-by-side boxes use inline min-width which can overflow.
   Cap the block and force cards to stack below 960px.
   ============================================================ */

/* Always: prevent zd-html-block from stretching past its container */
.article-body zd-html-block {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.article-body zd-html-block > div {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

@media (max-width: 960px) {
  /* Force cards to stack — overrides inline flex: 1 / min-width: 240px */
  .article-body zd-html-block > div {
    flex-direction: column !important;
  }
  .article-body zd-html-block > div > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}