/*
Theme Name: GroundFlow - Child Theme
Theme URI: https://www.paidmembershipspro.com/themes/memberlite
Description: This is a Memberlite child theme.
Author: GroundFlow Team
Author URI: https://groundflow.ai
Template: memberlite
Version: 1.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Full viewport height support for content */
html, body {
  height: 100%;
  margin: 0;
}

#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

iframe {
  margin-bottom: 1rem;
}

/* Tooltip styling */
.tooltip-icon {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  cursor: help;
}

.tooltip-icon:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: normal;
  word-wrap: break-word;
  max-width: 400px;
  width: 400px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  line-height: 1.2rem;
}

.tooltip-icon:hover::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  border: 5px solid transparent;
  border-top-color: #333;
  z-index: 9999;
}


/* Base Typography & Layout */
body {
  background-color: white;
  color: #343434;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

h1, h2, h3 {
  font-weight: 600;
  margin: 0.5em 0;
}

h1 { font-size: 2.35rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

p { margin-bottom: 1rem; }

th {
  background-color: rgb(0,0,0);
}

.soft { color: #666; }

.text-center { text-align: center; }

.center {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.margin-bottom { margin-bottom: 1.5rem; }

/* Buttons */
.button {
  background-color: white;
  /* color: #0066ff;
  border: 2px solid #0066ff; */
  color: #000000;
  border: 2px solid #000000;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  margin: 0.25rem;
  transition: all 0.2s ease;
}

.button:hover {
  border: 2px solid #000000;
  background-color: #efefef;
  color: #000000;
}

.button.primary {
  /* background-color: #0066ff; */
  background-color: #000000;
  color: white;
  border: none;
}

.button.primary:hover {
  /* background-color: #004ecc; */
  background-color: #2f2f2f;
}

/* Header */
.custom-header {
  background: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
}
.logo a {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* adjust spacing as needed */
  text-decoration: none;
}

.logo a span {
  font-weight: bold;
  color: #343434;
}

.logo-img {
  max-height: 48px;
  height: auto;
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: unset;
  background: unset;
}

.header-nav .pseudo {
  /* let Picnic handle styles, just maybe override spacing if needed */
  white-space: nowrap;
  font-weight: 500;
}

.header-nav a,
.header-nav button {
  color: #343434;
  text-decoration: none;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.header-nav a:hover,
.header-nav button:hover {
  /* text-decoration: underline; */
}

.mobile-nav-toggle {
  display: none !important; /* ensure desktop hides it */
  background: none;
  border: none;
  font-size: 1.75rem;
  color: #0066ff;
  cursor: pointer;
}

.mobile-nav-toggle:focus {
  outline: none;
}



/* Hero CTA */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* “What You'll Get” Section */
.what-youll-get {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.what-card {
  max-width: 280px;
  padding: 1.5rem;
  text-align: center;
}

.what-card .ph {
  font-size: 2.5rem;
  color: #444;
  margin-bottom: 0.75rem;
}

/* Choose Test Page */

.choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  max-width: 960px;
}


.choose-card {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.choose-card .icon {
  font-size: 2.5rem;
  /* color: #0066ff; */
  margin-bottom: 0rem;
}

.choose-card h2 {
  margin: 0 auto;
}

.choose-card .meta {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0 1rem;
}

.choose-card a.button {
  margin-top: auto;
}

/* Card Row - for cards using row/columns layout */
.card-row {
  margin-top: 2rem;
}

.card-row > .columns {
  padding: 0;
  display: flex;
}

.card-row .choose-card {
  height: 100%;
  width: 100%;
}

/* Tier Teaser */
.tier-teaser {
  background-color: #f9f9f9;
  padding: 2.5rem;
  margin-top: 3rem;
  border-radius: 8px;
}

.tier-teaser p.soft {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #666;
}

/* Footer */

.custom-footer {
  background-color: #eeeeee;
  border-top: 1px solid #eee;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #666;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0rem 1rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-column a {
  color: #666;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-copyright {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.footer-copyright p {
  margin: 0;
}

/* Utility */
.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}


/* Progress Grid */
.gf-progress-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0rem;
  margin-top: 2rem;
}

.gf-progress-card {
  flex: 1 1 180px;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 0rem;
  text-align: center;
  box-shadow: none;
  align-content: center;
}

.gf-progress-card small {
  font-size: 0.7rem;
  color: #646464;
  text-transform: capitalize;
}

.gf-progress-card:nth-child(4) {
  border-right: 0px;
}

.gf-progress-card i.ph {
  font-size: 1.75rem;
  /* color: #0066ff; */
  /* margin-bottom: 0.5rem; */
  display: block;
}

.gf-progress-card p {
  font-size: 0.95rem;
  margin: 0;
  color: #333;
}


/* Confirmation page */
.gf-membership-cta {
  text-align: center;
  padding: 2rem;
  margin-bottom: 4rem;
}

.gf-membership-cta h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.gf-membership-cta p {
  font-size: 1rem;
  margin-bottom: 0rem;
  color: #444;
}

.gf-step-guide {
  margin-bottom: 2rem;
}

.gf-email-label {
  width: 40%;
}

.gf-email-inputs {
  width: 60%;
}

.gf-email-grid {
  background: #dbdbdb;
  margin: 0;
  padding: 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.gf-email-grid #gf_email {
  width: 70%;
  height: 54px;
}

/* Dashboard */
.report-slot {
  border: 2px dashed var(--border);
  padding: 2rem;
  width: 100%;
  /* max-width: 300px; */
  text-align: center;
  border-radius: 12px;
  margin: 1.5rem auto;
  position: relative;
  transition: border 0.3s;
}

.report-slot:hover {
  border-color: var(--primary);
}

.report-slot .plus {
  font-size: 4rem;
  cursor: pointer;
  user-select: none;
  color: var(--primary);
}

.report-options {
  display: none;
  margin-top: 1rem;
}

.report-options button {
  display: block;
  margin: 0.5rem auto;
  width: 100%;
}

.inline {
  display: inline;
}

.mt-4 {
  margin-top: 2rem;
}

.text-sm {
  font-size: 0.9rem;
}

.notice {
  padding: 1rem;
  background: var(--highlight-bg, #e0ffe0);
  border-left: 4px solid var(--primary);
  margin-bottom: 1rem;
  border-radius: 4px;
}




/* Core Container */
.groundflow-memberships {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Membership Cards Grid */
.membership-cards.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}


/* Membership and Dual Report Cards Shared Styles */
.membership-card,
.dual-report-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    position: relative;
}

.membership-card.most-popular {
    border: 2px solid #3b82f6;
}

.popular-badge {
    position: absolute;
    top: -2px;
    left: 0;
    /* transform: translateX(-50%); */
    background: #3b82f6;
    color: white;
    padding: 4px 16px;
    border-radius: 0px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header Styles */
.card-header h2 {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0.25rem;
}

.card-header .level-description {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.1;
    margin-bottom: 1.8rem;
}

.card-header p.price {
    font-size: 1.4rem;
    margin: 0.5rem 0 1rem;
}

/* Icon List Styles */
.card-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.card-content li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: #333;
}

.card-content li i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Button Container Consistency */
.card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-content a.button {
    margin-top: auto;
}

/* Dual Report Section */
.dual-report-banner {
    margin-top: 3rem;
}

.dual-report-card {
    background: var(--color-light, #f9f9f9);
}

/* Dual Report Tag Style */
.dual-report-card .tag {
    background: var(--color-primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* Reminders Explainer Section */
.reminder-explainer {
    margin-top: 4rem;
}

.example-reminders.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.example-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.example-label {
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

blockquote {
    font-style: italic;
    margin: 0;
    padding-left: 1rem;
    border-left: 4px solid var(--color-primary, #3498db);
}


/* Make dual-report span all columns */
.membership-card.dual-report {
    grid-column: 1 / -1;
}

#pmpro_account-profile .pmpro_list-plain li:nth-child(1) {
  display: none;
}

[type=checkbox]+.checkable:before, 
[type=radio]+.checkable:before {
  border: 2px solid #343434;
}

.pmpro_form_field.pmpro_form_field-first_name,
.pmpro_form_field.pmpro_form_field-last_name {
  display: none !important;
}



  /* Tips container */
.tips {
  /* max-width: 760px; */
  margin: 1.25rem auto;  /* centers the group */
  display: grid;
  gap: 12px;
}

/* Individual tip */
.tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f9f9f9;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;      /* override any parent centering */
}

/* Icon chip */
.icon-chip {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06); /* or var(--primary-10) if you have it */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Icon color/size */
.icon-chip .ph {
  font-size: 16px;
  opacity: 0.75;         /* subtle */
}

/* Text spacing */
.tip p {
  margin: 0;             /* remove default top/bottom margins */
}

.page-template-page-quick-test .tip {
  justify-content: center; 
}

/* ========================================
   MOBILE STYLES
   ======================================== */


/* ========================================
   HERO / HEADER / FRONT-PAGE STYLES
   ======================================== */

/* Hero Video Background */
.hero-video-container {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
}

.hero-with-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  transform: translateX(-50%);
  z-index: -1;
  object-fit: cover;
}

.hero-with-video {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 106px);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  display: flex;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  color: #343434;
  border-radius: 10px;
}

/* Force white text in hero section */
.hero-with-video h1,
.hero-with-video h2,
.hero-with-video h3,
.hero-with-video p,
.hero-with-video a,
.hero-with-video span,
.hero-with-video div {
  color: white !important;
}

.hero-with-video .soft {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Override text color for hero content with background */
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p,
.hero-content span,
.hero-content div,
.hero-content a:not(.button) {
  color: #343434 !important;
}

.hero-content .soft {
  color: #666 !important;
}

.hero-content .button.primary {
  color: #ffffff !important;
}

/* Front page header styles */
body.page-template-page-home-page .custom-header,
body.home .custom-header {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: none;
}

body.page-template-page-home-page .custom-header .logo a span,
body.page-template-page-home-page .custom-header .header-nav a,
body.page-template-page-home-page .custom-header .header-nav button,
body.home .custom-header .logo a span,
body.home .custom-header .header-nav a,
body.home .custom-header .header-nav button {
  color: white !important;
}

body.page-template-page-home-page .custom-header .logo svg,
body.home .custom-header .logo svg {
  filter: brightness(0) invert(1);
}

/* Logo overlay for front page */
body.page-template-page-home-page .custom-header #gf_logo,
body.home .custom-header #gf_logo {
  filter: brightness(0) invert(1);
}

/* Header scroll transition */
.custom-header.scrolled {
  background: #ffffff !important;
  border-bottom: 1px solid #eee;
}

body.page-template-page-home-page .custom-header.scrolled .logo a span,
body.page-template-page-home-page .custom-header.scrolled .header-nav a,
body.page-template-page-home-page .custom-header.scrolled .header-nav button,
body.home .custom-header.scrolled .logo a span,
body.home .custom-header.scrolled .header-nav a,
body.home .custom-header.scrolled .header-nav button {
  color: #343434 !important;
}

.custom-header.scrolled .logo svg,
.custom-header.scrolled #gf_logo {
  filter: none !important;
}

/* Front page proof video */
#fp_proof {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.fp-proof-text {
  width: 50%;
  max-width: 420px;
}

.phone-frame {
  width: 50%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.fp-proof-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* Ensure text transitions properly */
.custom-header .logo a span,
.custom-header .header-nav a,
.custom-header .header-nav button {
  transition: color 0.3s ease;
}

.small-link {
  margin: 1rem auto; 
  display:flex; 
  align-items:center; 
}

.small-link.two {
  width: 50%; 
  justify-content: space-between;
}

.small-link.two.wide {
  width: 100%;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.fp-proof-text a {
  width: 100%;
}

.fp-proof-text small:nth-child(2) {
  text-align: right;
}

.gf-membership-cta.card {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  height: 395px;
  overflow: hidden;
}

.gf-membership-cta.card.dual {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gf-membership-cta.card.dual gf-demo-phone {
  height: 300px;
  align-self: auto;
}

/* 2x2 Grid layout for dual CTA */
.dual-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

/* Row with phone demo has fixed height based on phone element */
.dual-cta-row-phone {
  min-height: 300px;
}

.dual-cta-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dual-cta-box h3 {
  margin-top: 0;
}

.dual-cta-box img {
  align-self: center;
}

.dual-cta-box gf-demo-phone {
  align-self: center;
}

/* Figure styling for how-it-works page */
.page-template-page-how-it-works figure {
  display: flex;
  align-items: center;
  max-height: 400px;
  overflow: hidden;
  margin-top: 4rem;
}

.page-template-page-how-it-works figcaption {
  min-width: 50%;
  margin-right: 1rem;
}

.page-template-page-how-it-works figure img {
  width: 80%;
}

/* ========================================
   MEDIA QUERIES
   ======================================== */

/* Mobile Styles - 640px and below */
@media (max-width: 640px) {
  /* Mobile Navigation */
  .mobile-nav-toggle {
    display: block !important;
    margin-left: auto;
  }
  
  /* Full width buttons on mobile */
  .text-center[style*="width:40%"] {
    width: 100% !important;
  }

  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    display: none;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
  }

  /* Ensure menu items are visible with dark text - override front page styles */
  body.home .custom-header .header-nav.open a,
  body.home .custom-header .header-nav.open button {
    color: #343434 !important;
    background: none !important;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    text-align: left;
    justify-content: flex-start;
  }

  /* Remove button styling from links in mobile menu */
  .header-nav.open a.button {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.75rem 0 !important;
    color: #343434 !important;
    font-weight: 500;
    text-decoration: none;
  }

  .header-nav.open a:last-child,
  .header-nav.open button:last-child {
    border-bottom: none;
  }

  /* Remove top padding from mobile menu */
  .header-nav.open {
    padding-top: 0;
    padding-bottom: 0;
  }

  .header-nav.open {
    display: flex;
    flex-direction: row
  }

  /* Ensure X icon stays in place and has white background when menu is open */
  .header-nav.open ~ .mobile-nav-toggle {
    background: white;
    border-radius: 4px;
    padding: 4px;
  }

  /* General Responsive Styles */
  .hero-cta,
  .what-youll-get {
    flex-direction: column;
  }

  .choose-grid {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
    max-width: 100%;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.125rem; }

  .header-inner,
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-column {
    text-align: center;
  }

  /* Footer: left-align both columns on mobile */
  .custom-footer .row .medium-6.columns {
    justify-content: flex-start !important;
  }

  /* Mobile header layout: logo left, hamburger right */
  .custom-header .header-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    position: relative; /* For absolute positioning of dropdown menu */
  }

  /* Make hamburger icon white on mobile */
  .mobile-nav-toggle,
  .mobile-nav-toggle #menu-icon {
    color: #ffffff;
  }

  /* Turn hamburger black when header is scrolled (white background) */
  .custom-header.scrolled .mobile-nav-toggle,
  .custom-header.scrolled .mobile-nav-toggle #menu-icon {
    color: #343434;
  }

  /* Progress Grid Mobile */
  .gf-progress-grid {
    flex-direction: column;
    align-items: center;
  }

  .gf-progress-card {
    width: 100%;
    max-width: 100%;
  }

  body.pmpro-login .gf-login,
  body.pmpro-login .gf-login .pmpro {
    width: 100% !important;
    padding-left: 0 !important;

  }
}

/* Comprehensive Mobile Styles */
@media (max-width: 700px) {
  /* Front page mobile padding */
  body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  a.button {
    margin: 0;
  }
  
  /* Remove top/bottom padding from first section in content */
  body.page-template-page-choose-test #content section:first-child {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  /* What card mobile width */
  .what-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gf-progress-grid {
    margin-top:0; 
    flex-direction: row;
  }

  .page-template-page-quick-test .tooltip-icon {
    display:block;
  }

  .gf-email-capture-form .gf-email-grid {
    flex-direction: column;
  }

  .gf-email-capture-form #gf_email {
    width: 100%;
    margin: 1rem 0;
  }

  /* Override Picnic CSS "two" class padding on mobile */
  body.pmpro-levels .groundflow-memberships {
    padding:0;
  }

  /* Remove top/bottom padding from first section on dual report dashboard */
  body.page-template-page-dual-report-dashboard section:first-of-type {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .report-card {
    height: 400px !important;
  }

  .pmpro-checkout .pmpro_form_fieldset .pmpro_card .pmpro_form_field {
    width: 100% !important;
  }

  #pmpro_submit_span {
    width: 100% !important;
  }

  .choose-grid {
    padding-top: 0;
  }

  /* Mobile video background adjustments */
  .hero-with-video {
    min-height: calc(100vh - 100px);
  }

  .hero-content {
    padding: 1.5rem;
    margin: 0 1rem 1rem 1rem;
  }

  .hero-video-bg {
    /* Ensure video covers properly on mobile */
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    object-position: 12% 50%
  }

  /* Mobile header adjustments */
  body.page-template-page-home-page .custom-header,
  body.home .custom-header {
  }

  /* Make header full width on mobile */
  .custom-header {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
}

/* GroundFlow Demo CTA Styles */
.gf-membership-cta {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.gf-cta-content {
  width: 50%;
}

.gf-demo-container {
  width: 45%;
  align-self: baseline;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .gf-membership-cta {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .gf-cta-content {
    width: 100%;
  }
  
  .gf-demo-container {
    width: 100%;
  }
  
  /* Stack dual CTA grid on mobile */
  .dual-cta-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .dual-cta-row-phone {
    min-height: auto;
  }
  
  /* How-it-works figure - stack on mobile */
  .page-template-page-how-it-works figure {
    flex-direction: column;
    max-height: none;
  }
  
  .page-template-page-how-it-works figcaption {
    min-width: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .page-template-page-how-it-works figure img {
    width: 100%;
  }
}