/* ================================================================
   FI-FY KOFI PAGES — MASTER CSS OVERRIDE
   Fixes layout chaos when Webflow CSS loads locally
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  line-height: 1.6 !important;
  background-image: none !important;
  background-attachment: unset !important;
}

/* Our-story: fix text touching left edge (no container) */
.section-story-hero,
.story-section-text,
section:not(.fify-topnav) > p,
section:not(.fify-topnav) > h1,
section:not(.fify-topnav) > h2 {
  padding-left: max(24px, calc((100vw - 1140px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1140px) / 2)) !important;
}

/* Our-story: all direct text content should be max-width centered */
.page-wrapper > section:not(.fify-topnav):not(.section-footer) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-wrapper > section:not(.fify-topnav):not(.section-footer) > * {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero images in pricing page - constrain oversized icons */
.header-section img:not(.membership-character) {
  max-height: 420px !important;
  object-fit: contain !important;
  width: 100% !important;
}



/* ── TYPOGRAPHY ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', 'Montserrat', sans-serif !important;
  line-height: 1.15 !important;
  color: #111827 !important;
  margin-top: 0 !important;
}

h1, .h1-heading {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

h2, .h2-heading, .paragraph-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
  font-weight: 700 !important;
}

p, .paragraph-regular, .paragraph-small {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: #374151 !important;
}

.paragraph-regular { font-size: 1.05rem !important; }
.paragraph-small { font-size: 0.95rem !important; }

a { color: inherit; text-decoration: none; }

/* ── WEBFLOW LAYOUT CORE ──────────────────────────────── */
.page-wrapper {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.container-full {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.w-layout-grid {
  display: grid !important;
}

.w-inline-block {
  display: inline-block !important;
}

/* ── HEADER/HERO SECTION ─────────────────────────────── */
.header-section {
  padding: 80px 0 60px !important;
  background: #ffffff !important;
}

.header-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  text-align: center !important;
  gap: 24px !important;
}

@media (min-width: 992px) {
  .header-grid {
    grid-template-columns: 1fr 1fr !important;
    text-align: left !important;
    max-width: 1140px !important;
    align-items: center !important;
  }
}

.header-content { max-width: 560px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.button, .w-button, .ce-button-big, .btn-register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
  animation: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.button:hover, .w-button:hover, .ce-button-big:hover {
  background: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* ── VIDEO SECTION ───────────────────────────────────── */
.section-video, .video-animation {
  padding: 40px 0 !important;
}

.video-card {
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important;
}

.background-video {
  border-radius: 24px !important;
  overflow: hidden !important;
}

.background-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  
}

/* ── TESTIMONIAL SECTION ─────────────────────────────── */
.testimonial-section {
  padding: 60px 0 !important;
  background: #f9fafb !important;
}

.testimonial-grid-desktop {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

@media (max-width: 768px) {
  .testimonial-grid-desktop {
    grid-template-columns: 1fr !important;
  }
}

.testimonial-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e7eb !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
}

.testimonialtitle {
  font-size: 0.95rem !important;
  color: #374151 !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  font-style: italic !important;
}

.testimonial-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f3f4f6 !important;
}

.avatar-regular {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.avatar-regular img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.overline-black {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── DETAIL SECTIONS ─────────────────────────────────── */
.section-detail {
  padding: 80px 0 !important;
  background: #ffffff !important;
}

.content-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 60px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.content-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

.content-text-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.content-image-wrapper {
  border-radius: 24px !important;
  padding: 32px !important;
  min-height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.content-image-wrapper.purple { background: #f3e8ff !important; }
.content-image-wrapper.blue { background: #dbeafe !important; }
.content-image-wrapper.yellow { background: #fef9c3 !important; }
.content-image-wrapper.orange { background: #ffedd5 !important; }
.content-image-wrapper.red { background: #fee2e2 !important; }
.content-image-wrapper.green { background: #dcfce7 !important; }
.content-image-wrapper.pink { background: #fce7f3 !important; }

.image-inside-detail {
  max-width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.image-inside-detail:hover {
  transform: scale(1.05) !important;
}

/* ── CTA SECTIONS ────────────────────────────────────── */
.section-cta {
  padding: 80px 24px !important;
  background: #f9fafb !important;
}

.section-cta-end {
  padding: 80px 24px !important;
  background: #111827 !important;
}

.section-cta-end * { color: #ffffff !important; }
.section-cta-end .h2-heading { color: #ffffff !important; }

.cta-content {
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
}

.cta-patagraph p { color: #6b7280 !important; }
.section-cta-end .cta-patagraph p { color: rgba(255,255,255,0.65) !important; }

.character-block {
  position: relative !important;
  margin-top: 40px !important;
  text-align: center !important;
}

.character {
  max-width: 100% !important;
  height: auto !important;
}

/* ── FAQ SECTION ─────────────────────────────────────── */
.section-faq-2 {
  padding: 80px 24px !important;
  background: #ffffff !important;
}

.section-faq-2.blue { background: #eff6ff !important; }
.section-faq-2.yellow { background: #fefce8 !important; }
.section-faq-2.green { background: #f0fdf4 !important; }
.section-faq-2.pink { background: #fdf2f8 !important; }

.faq_section {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 40px !important;
  align-items: start !important;
}

@media (max-width: 768px) {
  .faq_section { grid-template-columns: 1fr !important; }
}

.faq_section-title { position: relative; }



.faq_question.blue .paragraph-regular.bold strong { color: #1d4ed8 !important; }

.faq_expand-icon img { width: 20px !important; flex-shrink: 0 !important; }

.faq_answer-3 {
  padding: 0 0 20px !important;
  
}

.faq_item.open .faq_answer-3 {
  
}

.faq_item { border-bottom: 1px solid #e5e7eb !important; }

.faq_bg {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: #dbeafe !important;
  margin-top: 12px !important;
}

/* ── MEMBERSHIP CHARACTER ────────────────────────────── */
.membership-character {
  position: absolute !important;
  bottom: -10px !important;
  right: 20px !important;
  width: 160px !important;
  height: auto !important;
  pointer-events: none !important;
}

.membership-character.c2 { right: -20px !important; }

/* ── NAME/SIGNUP FORM ────────────────────────────────── */
.h2-form-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.name-form-block { width: 100% !important; max-width: 480px !important; }

.form-6 {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  border: 2px solid #e5e7eb !important;
  padding: 6px 6px 6px 20px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.field-label-3 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
}

.text-field-4 {
  border: none !important;
  outline: none !important;
  font-size: 1rem !important;
  padding: 8px 12px !important;
  flex: 1 !important;
  background: transparent !important;
  min-width: 0 !important;
}

.submit-button-4 {
  background: #111827 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: none !important;
  animation: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.submit-button-4.hide { display: none !important; }

/* ── FOOTER ──────────────────────────────────────────── */
.section-footer {
  background: #111827 !important;
  padding: 60px 0 40px !important;
  color: #d1d5db !important;
}

.section-grid-block {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.footer-grid-block {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 32px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid #374151 !important;
}

@media (max-width: 768px) {
  .footer-grid-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 480px) {
  .footer-grid-block { grid-template-columns: 1fr !important; }
}

.footer-column-2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-header-text {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #9ca3af !important;
  margin-bottom: 4px !important;
}

.footer-linktext {
  font-size: 0.9rem !important;
  color: #d1d5db !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: color 0.15s !important;
}

.footer-linktext:hover { color: #ffffff !important; }

.footer-end {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 32px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.div-block-213 {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.85rem !important;
  color: #6b7280 !important;
}

.text-block-33 { color: #6b7280 !important; font-size: 0.85rem !important; }

.social-block {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.link-block {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #374151 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  color: #d1d5db !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}

.link-block:hover { background: #4b5563 !important; color: #ffffff !important; }

.image-26 {
  width: 80px !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.8 !important;
}

/* ── OWL CAROUSEL (Testimonials) ─────────────────────── */
.owl-carousel .owl-stage-outer {
  border-radius: 20px !important;
  overflow: hidden !important;
}

.owl-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.owl-carousel .owl-nav button {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
}

.owl-carousel .owl-nav button:hover {
  background: #111827 !important;
  color: #ffffff !important;
}

/* ── SOCIAL PAGES (Instagram, TikTok etc.) ───────────── */
.section-features-platform {
  padding: 60px 24px !important;
  background: #ffffff !important;
}

/* ── PLAY/PAUSE BUTTON ───────────────────────────────── */
.play-pause-button {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  background: rgba(0,0,0,0.5) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: none !important;
  animation: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.play-pause-button img { width: 20px !important; height: 20px !important; }

/* ── HIDE/SHOW UTILITIES ─────────────────────────────── */
.hide, .hidden {  }

/* ── W-FORM elements ─────────────────────────────────── */
.w-form-done, .w-form-fail { display: none; }

/* ── ICONS (Font Awesome fallback) ───────────────────── */
.icon-sm { font-size: 1rem !important; }
.text-block-78 { font-size: 1rem !important; }

/* ── HERO SECTION gradient override ─────────────────── */
.hero, .guide-hero, .kp-hero {
  background: #ffffff !important;
  background-size: unset !important;
  animation: none !important;
  color: #111827 !important;
  border-bottom: none !important;
}

.hero h1, .guide-hero h1, .kp-hero h1 {
  color: #111827 !important;
  text-shadow: none !important;
}

.hero p, .guide-hero p, .kp-hero p {
  color: #374151 !important;
}

/* ── GLASSMORPHISM Reset ─────────────────────────────── */
.gc, .guide-card, .dash-card, .wp-mock, .cat-card, .faq-item {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
}

/* ── SECTION BG COLORS ───────────────────────────────── */
.body-color { background: #ffffff !important; }
.navbar-wrapper { background: #ffffff !important; }

/* ── CONTENT GRID node placement fix ────────────────── */
[id^="w-node-"] {
  min-width: 0 !important;
}

/* ── MOBILE ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .container-full { padding: 0 16px !important; }
  .header-section { padding: 48px 0 40px !important; }
  .section-detail { padding: 48px 0 !important; }
  .section-faq-2 { padding: 48px 24px !important; }
  .section-cta { padding: 48px 24px !important; }
  .section-cta-end { padding: 48px 24px !important; }
  .h1-heading { font-size: 2rem !important; }
  .h2-heading { font-size: 1.6rem !important; }
}

/* ── OUR STORY PAGE ──────────────────────────────────── */
.section-story {
  padding: 80px 0 !important;
}

.story-content {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ── PRICING PAGE ────────────────────────────────────── */
.section-pricing-plans {
  padding: 60px 24px !important;
  background: #f9fafb !important;
}

/* ── BLOG PAGE (fi-fy style) ─────────────────────────── */
.kfds-c-srf-cover-height {
  height: 200px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #7C3AED !important;
  position: relative !important;
}

.kfds-c-srf-profile-image {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  object-fit: cover !important;
}

.panel {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* ── HELP CENTER PAGES ───────────────────────────────── */
.kfds-lyt-width-100 { width: 100% !important; }
.kfds-font-bold { font-weight: 700 !important; }
.kfds-btm-mrgn-16 { margin-bottom: 16px !important; }
.kfds-lyt-between { justify-content: space-between !important; }
.kfds-font-size-16 { font-size: 16px !important; }
.kfds-lyt-column { flex-direction: column !important; }
.lt-d-flex, .flex { display: flex !important; }
.lt-align-items-center { align-items: center !important; }
.flex-col { flex-direction: column !important; }
.text-center { text-align: center !important; }
.w-full { width: 100% !important; }
.font-semibold { font-weight: 600 !important; }
.text-base { font-size: 1rem !important; }
.hidden {  }
.row { display: flex !important; flex-wrap: wrap !important; }

/* ── HELP CENTER CONTENT ─────────────────────────────── */
.article-related__item {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 16px !important;
  border: 1px solid #e5e7eb !important;
  transition: box-shadow 0.2s !important;
}

.article-related__item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

.get-started__item {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
  background: #f9fafb !important;
  border-radius: 12px !important;
}

/* ── ANIMATIONS OFF (prevents chaos) ────────────────── */
.fadein {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.fadein.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── CARDS ───────────────────────────────────────────── */
.card-block, .pricing-card, .feature-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #e5e7eb !important;
  padding: 28px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ── CUSTOM SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar { width: 8px !important; }
::-webkit-scrollbar-track { background: #f3f4f6 !important; }
::-webkit-scrollbar-thumb { background: #d1d5db !important; border-radius: 99px !important; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

/* ── SELECTION ───────────────────────────────────────── */
::selection { background: #ddd6fe !important; color: #4c1d95 !important; }

/* ── MASCOT & HERO IMAGE SIZE CONTROL ───────────────── */
.character {
  max-width: 380px !important;
  width: 100% !important;
  height: auto !important;
  
  margin: 0 auto !important;
}

.character-block {
  max-width: 400px !important;
  margin: 40px auto 0 !important;
}

/* Pricing hero fix - mascot was overlapping title */
.header-section .header-grid .character,
.header-section img.character {
  max-height: 360px !important;
  object-fit: contain !important;
}

/* Our-story page specific */
.story-hero-image, 
img[src*="story-hero"],
img[src*="story_hero"] {
  max-height: 400px !important;
  object-fit: contain !important;
  width: 100% !important;
}

img[src*="pricing-hero"],
img[src*="pricing_hero"] {
  max-height: 320px !important;
  object-fit: contain !important;
  width: 100% !important;
}

img[src*="story_envelop"],
img[src*="story-footer"] {
  max-width: 260px !important;
  height: auto !important;
}

/* All content images: prevent overflow */
.image-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Section video poster images */
.w-background-video video {
  min-height: 360px !important;
  max-height: 520px !important;
}

/* Prevent any image from overflowing its container */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Webflow character in CTA section */
.section-cta .character-block {
  max-width: 320px !important;
  overflow: hidden !important;
}

/* ── PRICING PAGE SPECIFIC ───────────────────────────── */
.section-pricing {
  padding: 60px 24px !important;
}

.pricing-content-block {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* Calculator block */
.section-pricing-calculator {
  background: #f9fafb !important;
  padding: 60px 24px !important;
}

/* ── HELP CENTER ARTICLE LAYOUT ──────────────────────── */
.article-body {
  max-width: 760px !important;
  margin: 0 auto !important;
  line-height: 1.8 !important;
  font-size: 1rem !important;
}

.article-body h1, .article-body h2, .article-body h3 {
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}

/* ── CAREERS PAGE ────────────────────────────────────── */
.position-block {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: #f9fafb !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  transition: all 0.2s !important;
}

.position-block:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  transform: translateX(4px) !important;
}

.country-block { margin-bottom: 32px !important; }

.h3.country {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #e5e7eb !important;
}

/* ── BRAND ASSETS PAGE ───────────────────────────────── */
.brand-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 32px !important;
  background: #f9fafb !important;
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  text-align: center !important;
}

/* ── PATREON ALTERNATIVE PAGE ────────────────────────── */
.comparison-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 40px auto !important;
}

@media (max-width: 640px) {
  .comparison-grid { grid-template-columns: 1fr !important; }
}

/* ── WORDPRESS PAGE ──────────────────────────────────── */
.plugin-feature {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  padding: 20px !important;
  background: #f9fafb !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
}

/* ── OVERALL WEBFLOW GRID NORMALIZATION ──────────────── */
.w-layout-grid.header-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

@media (max-width: 768px) {
  .w-layout-grid.header-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}

.w-layout-grid.content-grid.open,
.w-layout-grid.content-grid.end {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* Fix CTA section on end of pages */
.section-cta-end {
  position: relative !important;
  overflow: hidden !important;
}

.section-cta-end .cta-content {
  position: relative !important;
  z-index: 2 !important;
}

.section-cta-end .character-block {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  opacity: 0.15 !important;
  pointer-events: none !important;
  max-width: 280px !important;
}

/* ── HERO IMAGES SIZING FIXES ────────────────────────── */
img[src*="story-hero"],
img[src*="story_hero"] {
  max-height: 400px !important;
  object-fit: contain !important;
  width: auto !important;
  max-width: 100% !important;
}

img[src*="pricing-hero"],
img[src*="pricing_hero"] {
  max-height: 300px !important;
  object-fit: contain !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Fix pricing hero image overlap */
img[src*="pricing-hero"] {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
}

section:has(img[src*="pricing-hero"]) .absolute.-bottom-36.right-0 {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  justify-content: center !important;
  margin-top: 2rem !important;
}

@media (min-width: 768px) {
  section:has(img[src*="pricing-hero"]) .absolute.-bottom-36.right-0 {
      justify-content: flex-end !important;
      margin-top: 0 !important;
  }
}

/* ── FIFY FOOTER STYLES ───────────────────────────────── */
.section-footer {
  background: #111827 !important;
  padding: 60px 0 40px !important;
  color: #d1d5db !important;
  border-top: none !important;
  margin-top: 40px !important;
}
.section-footer a {
  color: #9ca3af !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.section-footer a:hover {
  color: #ffffff !important;
}
.section-grid-block {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.footer-grid-block {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 32px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid #374151 !important;
}
.footer-column-2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.footer-header-text {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
}
.footer-linktext {
  font-size: 14px !important;
}
.footer-end {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 24px !important;
  font-size: 14px !important;
}
.social-block {
  display: flex !important;
  gap: 16px !important;
}
.social-block a {
  font-size: 20px !important;
}

/* ── ZENDESK HELP CENTER BRANDING OVERRIDES ───────────── */
/* Override Fi-Fy Blue/Red with Fi-Fy Blue/Yellow */
.article-header__title, .h2-heading, .h3-heading {
  color: #111827 !important;
}
.article-body a, .breadcrumbs a {
  color: #29abe0 !important;
}
.article-body a:hover, .breadcrumbs a:hover {
  color: #1a8bb8 !important;
}
.btn, .button, .w-button, .submit-button-4, .startpage-button {
  background-color: #fde047 !important;
  color: #111827 !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
}
.btn:hover, .button:hover, .w-button:hover, .submit-button-4:hover, .startpage-button:hover {
  background-color: #facc15 !important;
  color: #111827 !important;
}
.callout--success, .note--success {
  border-color: #29abe0 !important;
  background-color: #f0f9ff !important;
}
.callout__title {
  color: #111827 !important;
}
.lt-popular-searches__item {
  color: #29abe0 !important;
  border-color: #29abe0 !important;
}
.hero {
  background-color: #111827 !important;
}
.search input[type='submit'] {
  background-color: #fde047 !important;
  color: #111827 !important;
}


/* CTA & Footer Overrides for shop/marketing pages */
.name-form-block label,
.name-form-block input[type="text"],
.name-form-block .field-label-3,
.name-form-block .text-field-4 {
  color: #111827 !important;
}

.name-form-block input[type="text"]::placeholder,
.name-form-block .text-field-4::placeholder {
  color: #9ca3af !important;
}

.name-form-block .submit-button-4,
.name-form-block input[type="submit"],
.name-form-block a.submit-button-4 {
  color: #111827 !important;
  background-color: #fde047 !important;
}

.section-footer .footer-grid-block {
  background-color: transparent !important;
  border-radius: 0 !important;
}


/* Fix the white margin stripe above footer */
.section-footer {
  margin-top: 0 !important;
}

/* Force child elements of the claim button to inherit text color */
.name-form-block .submit-button-4 div,
.name-form-block .submit-button-4 span,
a.submit-button-4 div,
a.submit-button-4 span {
  color: #111827 !important;
}

/* Hard override for text input */
form input[type="text"].text-field-4 {
  color: #111827 !important;
  background-color: #ffffff !important;
}
form label.field-label-3 {
  color: #111827 !important;
}


/* Cross-browser placeholder color fixes */
.name-form-block input[type="text"]::-webkit-input-placeholder { color: #9ca3af !important; }
.name-form-block input[type="text"]::-moz-placeholder { color: #9ca3af !important; }
.name-form-block input[type="text"]:-ms-input-placeholder { color: #9ca3af !important; }
.name-form-block input[type="text"]:-moz-placeholder { color: #9ca3af !important; }

/* Ensure label text inside CTA block is dark */
.name-form-block label * {
  color: #111827 !important;
}


/* Fix overlapping text in CTA input field */
.name-form-block input[type="text"].text-field-4 {
  padding-left: 8.5rem !important;
  font-size: 20px !important;
}