/* ROLLIFY GLOBAL STYLES */
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#ffffff;color:#0f172a;}

/* HEADINGS */
.wp-block-heading{letter-spacing:-0.02em;line-height:1.15;}
h1.wp-block-heading{font-weight:800;}
h2.wp-block-heading{font-weight:800;}
h3.wp-block-heading{font-weight:700;}

/* BUTTONS - PRIMARY */
.wp-block-button:not(.is-style-outline) .wp-block-button__link{background:linear-gradient(90deg,#7c3aed,#4f46e5)!important;color:#ffffff!important;border-radius:999px!important;font-weight:600!important;box-shadow:0 18px 30px -12px rgba(79,70,229,0.55)!important;border:none!important;transition:all 0.22s ease!important;}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{transform:translateY(-1px) scale(1.03)!important;box-shadow:0 22px 40px -18px rgba(79,70,229,0.75)!important;}

/* BUTTONS - OUTLINE */
.wp-block-button.is-style-outline .wp-block-button__link{background:#ffffff!important;color:#0f172a!important;border:1.5px solid #e2e8f0!important;border-radius:999px!important;font-weight:600!important;transition:all 0.22s ease!important;}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:#7c3aed!important;color:#7c3aed!important;}

/* IMAGES */
.wp-block-image img{box-shadow:0 40px 80px -40px rgba(15,23,42,0.45);}

/* SEPARATORS */
.wp-block-separator{border-color:#f1f5f9!important;margin:16px 0!important;opacity:1!important;}

/* PARAGRAPH */
p{line-height:1.7;}

/* LINKS */
a{transition:color 0.15s ease;}

/* STAT NUMBERS PURPLE */
h3.wp-block-heading[style*="color:#7c3aed"]{background:linear-gradient(to right,#9333ea,#4f46e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ============================================
   FULL WIDTH FIX — all pages full width by default
   ============================================ */

:root {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
}

body .wp-site-blocks,
body .is-root-container,
body .entry-content,
body .wp-block-post-content,
body .wp-block-group.has-global-padding,
body .has-global-padding > .alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wp-block-html {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block;
}

.wp-block-html,
.wp-block-html section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.wp-block-post-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.is-root-container > .wp-block + .wp-block {
    margin-top: 0 !important;
}

.is-root-container,
.wp-site-blocks,
.entry-content,
.wp-block-post-content {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.is-root-container > .wp-block-html,
.wp-block-post-content > .wp-block-html {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.wp-block-button {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

/* ============================================
   BLOG POSTS ONLY — narrow reading width
   ============================================ */

.single-post .wp-block-post-content {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
}

/* ============================================
   HEADER — nudge logo away from edge
   ============================================ */

header.wp-block-template-part {
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box;
}
/* ============================================
   MOBILE RESPONSIVE — all pages
   max-width: 768px
   ============================================ */

@media (max-width: 768px) {

  /* GLOBAL */
  body {
    overflow-x: hidden;
  }

  /* HEADER NAV */
  header.wp-block-template-part {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* HERO — floating cards hidden on mobile, too cluttered */
  #hero-rollify .floating-card {
    display: none !important;
  }

  #hero-rollify .glow-effect {
    display: none !important;
  }

  #hero-rollify {
    padding: 1.5rem 1rem 0 !important;
  }

  #hero-rollify .hero-title {
    font-size: 2rem !important;
    text-align: center;
  }

  #hero-rollify .hero-description {
    font-size: 0.95rem !important;
    text-align: center;
  }

  #hero-rollify .button-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #hero-rollify .btn {
    width: 100% !important;
    max-width: 320px;
  }

  #hero-rollify .dashboard-wrapper {
    margin-top: 1.5rem !important;
  }

  #hero-rollify .dashboard-container {
    margin: 0 !important;
    border-radius: 12px !important;
    border-width: 3px !important;
  }

  /* AWARDS GRID — stack to 1 col */
  #hero-rollify .rf-awards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #hero-rollify .rf-awards {
    padding: 24px 0 0 !important;
  }

  /* TESTIMONIALS */
  .rf-testimonial-card {
    padding: 24px 20px !important;
    min-height: auto !important;
  }

  .rf-testimonials-title {
    font-size: 24px !important;
  }

  .rf-testimonial-text {
    font-size: 16px !important;
  }

  .rf-testimonial-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* PROBLEM SECTION */
  .rf-problem-grid {
    grid-template-columns: 1fr !important;
  }

  .rf-problem-title {
    font-size: 24px !important;
  }

  .rf-problem-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }

  .rf-problem-cta-btn {
    width: 100% !important;
    max-width: 280px;
    text-align: center;
  }

  /* FEATURES SECTION */
  .rf-features-grid {
    grid-template-columns: 1fr !important;
  }

  .rf-features-title {
    font-size: 24px !important;
  }

  /* WHY ROLLIFY GRID — 2 cols on mobile */
  .rf-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .rf-why-title {
    font-size: 22px !important;
  }

  /* PRICING SECTION */
  .rf-pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .rf-pricing-title {
    font-size: 26px !important;
  }

  .rf-pricing-card {
    padding: 24px 20px !important;
  }

  /* BLOG INDEX — stack sidebar below header */
  .rf-blog-index-grid,
  div[style*="grid-template-columns:200px 1fr"] {
    display: block !important;
  }

  div[style*="grid-template-columns:200px 1fr"] > div:first-child {
    border-right: none !important;
    border-bottom: 0.5px solid #e5e5e5 !important;
    padding: 1.25rem 1.5rem !important;
    min-height: auto !important;
  }

  div[style*="grid-template-columns:200px 1fr"] > div:first-child .rf-sidebar-cta {
    display: none !important;
  }

  div[style*="grid-template-columns:200px 1fr"] > div:last-child {
    padding: 1.25rem 1rem !important;
  }

  /* BLOG INDEX — featured card stack */
  a[style*="grid-template-columns:280px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  a[style*="grid-template-columns:280px 1fr"] > div:first-child {
    min-height: 120px !important;
    padding: 1.5rem !important;
  }

  a[style*="grid-template-columns:280px 1fr"] > div:last-child {
    padding: 1.25rem !important;
  }

  /* BLOG HEADER */
  div[style*="padding:2rem 3rem 1.75rem"] {
    padding: 1.25rem 1.25rem 1rem !important;
  }

  /* FOOTER */
  .rf-footer-top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .rf-footer {
    padding: 40px 16px 24px !important;
  }

  .rf-footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* CONTACT PAGE */
  .rf-contact-page-wrapper {
    margin: 40px auto !important;
    padding: 0 16px 48px !important;
  }

  /* DEMO PAGE */
  .rf-demo-page {
    padding: 40px 16px 48px !important;
  }

  .rf-demo-title {
    font-size: 26px !important;
  }

  /* PRICING PAGE (standalone) */
  .rf-pricing-section {
    padding: 48px 16px !important;
  }

  /* MODALS */
  .rf-contact-modal,
  #pricing .rf-contact-modal {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  .rf-modal-form-row,
  #pricing .rf-modal-form-row {
    flex-direction: column !important;
  }

  /* BLOG POSTS — already constrained, just fix padding */
  .single-post .wp-block-post-content {
    padding: 0 16px !important;
  }

  article[style*="max-width:720px"] {
    padding: 1.5rem 1rem 3rem !important;
  }

  article[style*="max-width:720px"] h1 {
    font-size: 1.5rem !important;
  }

  article[style*="max-width:720px"] h2 {
    font-size: 1.1rem !important;
  }

  article[style*="max-width:720px"] .rf-stat-grid,
  article[style*="max-width:720px"] div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

}

/* ============================================
   SMALL MOBILE — under 480px
   ============================================ */

@media (max-width: 480px) {

  #hero-rollify .hero-title {
    font-size: 1.75rem !important;
  }

  .rf-why-grid {
    grid-template-columns: 1fr !important;
  }

  .rf-testimonials-title {
    font-size: 22px !important;
  }

  .rf-problem-cta-title {
    font-size: 20px !important;
  }

}
/* STICKY HEADER */
header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 12px rgba(15,23,42,0.08) !important;
}
/* FIX — problem section vertical line behind numbers */
.rf-step-list {
    isolation: isolate;
}

.rf-step-list::before {
    z-index: 0 !important;
}

.rf-step-number {
    position: relative;
    z-index: 1 !important;
}
/* HEADER LOGIN BUTTON — fix mobile wrapping */
header.wp-block-template-part .wp-block-button__link {
    white-space: nowrap !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 40px !important;
}
/* MOBILE MENU — dark styled overlay */
.wp-block-navigation__responsive-container.is-menu-open {
    background: #0f172a !important;
    padding: 24px 20px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #f1f5f9 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 12px 0 !important;
    border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: #a78bfa !important;
}

.wp-block-navigation__responsive-container-close svg {
    color: #f1f5f9 !important;
    stroke: #f1f5f9 !important;
}

.wp-block-navigation__responsive-container-close {
    color: #f1f5f9 !important;
}
/* =============================================
   1. REMOVE HERO IMAGE BLUE TINT
   ============================================= */
#hero-rollify .dashboard-shine {
    display: none !important;
}

/* =============================================
   2. MOBILE MENU — light purple/white gradient
   ============================================= */
.wp-block-navigation__responsive-container.is-menu-open {
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 40%, #f3e8ff 100%) !important;
    padding: 24px 20px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 14px 0 !important;
    border-bottom: 0.5px solid rgba(124,58,237,0.12) !important;
    transition: color 0.18s ease, padding-left 0.18s ease !important;
    display: block !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: #7c3aed !important;
    padding-left: 8px !important;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg {
    color: #0f172a !important;
    stroke: #0f172a !important;
}

/* =============================================
   3. BUTTON HOVER EFFECTS — homepage
   ============================================= */

/* Primary gradient buttons */
.rf-pricing-button,
#hero-rollify .btn-primary,
.rf-problem-cta-btn-primary,
.rf-demo-btn,
.rf-modal-submit,
#pricing .rf-modal-submit {
    transition: all 0.2s ease !important;
}

.rf-pricing-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(124,58,237,0.4) !important;
    opacity: 1 !important;
}

#hero-rollify .btn-primary:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 20px 40px rgba(79,70,229,0.5) !important;
}

/* Secondary/outline buttons */
#hero-rollify .btn-secondary:hover {
    background: #f5f3ff !important;
    border-color: #7c3aed !important;
    color: #7c3aed !important;
    transform: translateY(-2px) !important;
}

/* CTA section buttons */
.rf-problem-cta-btn-primary:hover {
    background: #f5f3ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

.rf-problem-cta-btn-secondary:hover {
    background: #1e1b4b !important;
    transform: translateY(-2px) !important;
}

/* Nav book demo button */
.rf-ba-section a:hover,
.rf-why-section a:hover {
    transform: translateY(-1px) !important;
}
/* Hide WordPress auto-generated title on blog posts */
.single-post .wp-block-post-title,
.single-post h1.wp-block-post-title,
.single .entry-title,
.single-post .entry-title {
    display: none !important;
}