/* --- VISAASSISTPRO HOTFIX: mobile Features contrast --- */
@media (max-width: 768px) {
  /* Put features on a light panel so white cards pop */
  #features.section {
    background: #f7f9fc !important;
  }
  /* Dark, readable heading */
  #features.section > .container > h2 {
    color: #2b3440 !important;
  }
  /* Cards: white with dark text */
  #features.section .cards .card {
    background: #ffffff !important;
    border: 1px solid #e9edf3 !important;
  }
  #features.section .cards .card h3 {
    color: #2b3440 !important;
  }
  #features.section .cards .card p,
  #features.section .cards .card li,
  #features.section .cards .card * {
    color: #324055 !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }
}

/* --- HOTFIX: mobile contrast for How it works + Join --- */
@media (max-width: 768px) {
  /* Ensure no fades/overlays */
  #how-it-works, #how-it-works * ,
  #join, #join * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  /* Put both sections on a light panel */
  #how-it-works.section,
  #join.section  {
    background: #f7f9fc !important;
  }

  /* Headings: dark */
  #how-it-works h2,
  #join h2 {
    color: #2b3440 !important;
  }

  /* Body text: dark */
  #how-it-works p, #how-it-works li,
  #join p,


cd /var/www/html

# 1) Append rules to the hotfix
cat >> hotfix.css <<'CSS'

/* --- HOTFIX: mobile contrast for How it works + Join --- */
@media (max-width: 768px) {
  /* Ensure no fades/overlays */
  #how-it-works, #how-it-works * ,
  #join, #join * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  /* Put both sections on a light panel */
  #how-it-works.section,
  #join.section  {
    background: #f7f9fc !important;
  }

  /* Headings: dark */
  #how-it-works h2,
  #join h2 {
    color: #2b3440 !important;
  }

  /* Body text: dark */
  #how-it-works p, #how-it-works li,
  #join p,         #join li {
    color: #324055 !important;
  }

  /* Step numbers keep brand color; ensure readable */
  #how-it-works .step-num { color:#fff !important; }

  /* Waitlist card/buttons readable */
  #join .card, #join .panel {
    background: #ffffff !important;
    border: 1px solid #e9edf3 !important;
    color: #324055 !important;
  }
}

/* --- HOTFIX: mobile contrast for How it works + Join --- */
@media (max-width: 768px) {
  /* Ensure no fades/overlays */
  #how-it-works, #how-it-works *,
  #join, #join * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  /* Put both sections on a light panel */
  #how-it-works.section,
  #join.section {
    background: #f7f9fc !important;
  }

  /* Headings: dark */
  #how-it-works h2,
  #join h2 {
    color: #2b3440 !important;
  }

  /* Body text: dark */
  #how-it-works p, #how-it-works li,
  #join p, #join li {
    color: #324055 !important;
  }

  /* Step numbers stay readable */
  #how-it-works .step-num { color: #fff !important; }

  /* Waitlist card/buttons readable if you wrap them */
  #join .card, #join .panel {
    background: #ffffff !important;
    border: 1px solid #e9edf3 !important;
    color: #324055 !important;
  }
}

/* --- HOTFIX: mobile contrast for How it works + Join --- */
@media (max-width: 768px) {
  /* Ensure no fades/overlays */
  #how-it-works, #how-it-works *,
  #join, #join * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  /* Put both sections on a light panel */
  #how-it-works.section,
  #join.section {
    background: #f7f9fc !important;
  }

  /* Headings: dark */
  #how-it-works h2,
  #join h2 {
    color: #2b3440 !important;
  }

  /* Body text: dark */
  #how-it-works p, #how-it-works li,
  #join p, #join li {
    color: #324055 !important;
  }

  /* Step numbers readable */
  #how-it-works .step-num {
    color: #ffffff !important;
  }

  /* Waitlist card/buttons readable */
  #join .card, #join .panel {
    background: #ffffff !important;
    border: 1px solid #e9edf3 !important;
    color: #324055 !important;
  }
}

/* --- HOTFIX: mobile contrast for How it works + Join --- */
@media (max-width: 768px) {
  /* Ensure no fades/overlays */
  #how-it-works, #how-it-works *,
  #join, #join * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  /* Put both sections on a light panel */
  #how-it-works.section,
  #join.section {
    background: #f7f9fc !important;
  }

  /* Headings: dark */
  #how-it-works h2,
  #join h2 {
    color: #2b3440 !important;
  }

  /* Body text: dark */
  #how-it-works p, #how-it-works li,
  #join p, #join li {
    color: #324055 !important;
  }

  /* Step numbers readable */
  #how-it-works .step-num {
    color: #ffffff !important;
  }

  /* Waitlist card/buttons readable */
  #join .card, #join .panel {
    background: #ffffff !important;
    border: 1px solid #e9edf3 !important;
    color: #324055 !important;
  }
/* --- HOTFIX: mobile contrast for How it works + Join --- */
@media (max-width: 768px) {
  /* Ensure no fades/overlays */
  #how-it-works, #how-it-works *,
  #join, #join * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  /* Put both sections on a light panel */
  #how-it-works.section,
  #join.section {
    background: #f7f9fc !important;
  }

  /* Headings: dark */
  #how-it-works h2,
  #join h2 {
    color: #2b3440 !important;
  }

  /* Body text: dark */
  #how-it-works p, #how-it-works li,
  #join p, #join li {
    color: #324055 !important;
  }

  /* Step numbers readable */
  #how-it-works .step-num {
    color: #ffffff !important;
  }

  /* Waitlist card/buttons readable */
  #join .card, #join .panel {
    background: #ffffff !important;
    border: 1px solid #e9edf3 !important;
    color: #324055 !important;
  }
}
CSS
}
@media (max-width:768px){#pricing.section{background:#f7f9fc!important} #pricing h2{color:#2b3440!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}}
@media (max-width:768px){#faq.section{background:#f7f9fc!important} #faq h2{color:#2b3440!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}}
@media (min-width:1024px) and (max-width:1366px){
  .hero{padding:4rem 0 3rem}
  .hero-ctas{gap:.9rem;margin-top:1.1rem;margin-bottom:1.1rem}
  .hero-pills{margin-top:.4rem;margin-bottom:1.4rem}
  .strip{margin:1.2rem 0}
  .section{padding:3rem 0}                  /* was tighter on laptops */
  #features .cards{gap:2rem}                /* more air between feature cards */
  .cards .card{padding:1.25rem}
  .pricing{gap:2rem}                        /* more room between pricing columns */
  .price-card{padding:1.25rem}
}
/* --- HOTFIX: Roomier laptop view (1024–1366px) --- */
@media (min-width:1024px) and (max-width:1366px) {
  /* Hero section breathing room */
  .hero {
    padding: 6rem 0 5rem !important; /* more vertical space */
  }
  .hero-ctas {
    gap: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  .hero-pills {
    margin-top: 1rem !important;
    margin-bottom: 2.5rem !important;
  }

  /* Section spacing */
  .section {
    padding: 5rem 0 !important; /* more top/bottom space between sections */
  }

  /* Features section */
  #features .cards {
    gap: 3rem !important; /* more space between cards */
  }
  .cards .card {
    padding: 2rem !important;
  }

  /* Pricing section */
  .pricing {
    gap: 3rem !important;
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .price-card {
    padding: 2rem !important;
  }

  /* FAQ section spacing */
  #faq.section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}
@media (min-width:1000px) and (max-width:1500px){
  .container{max-width:1200px!important}
  .hero{padding:7rem 0 5rem!important}
  .hero-ctas{gap:1.5rem!important;margin:2rem 0!important}
  .hero-pills{margin-bottom:2rem!important}
  .strip{margin:2rem 0!important}
  .section{padding:6rem 0!important}
  #features .cards{gap:3.5rem!important}
  .cards .card{padding:2.25rem!important}
  .pricing{gap:3.5rem!important;margin:4rem 0!important}
  .price-card{padding:2.25rem!important}
  #faq.section{padding-top:5rem!important;padding-bottom:5rem!important}
}
/* --- HOTFIX: Roomier laptop/desktop layout --- */
@media (min-width: 1000px) {
  .container {
    max-width: 1400px !important; /* make entire page wider */
  }
  .hero {
    padding: 9rem 0 7rem !important;
  }
  .hero-ctas {
    gap: 2.5rem !important;
    margin: 3rem 0 !important;
  }
  .hero-pills {
    margin-bottom: 3rem !important;
  }
  .strip {
    margin: 3rem 0 !important;
  }
  .section {
    padding: 8rem 0 !important; /* much more breathing space */
  }
  #features .cards {
    gap: 5rem !important; /* big horizontal spacing between feature cards */
  }
  .cards .card {
    padding: 3rem !important;
  }
  .pricing {
    gap: 5rem !important;
    margin: 6rem 0 !important;
  }
  .price-card {
    padding: 3rem !important;
  }
  #faq.section {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
}
html{scroll-behavior:smooth}

/* ===== Day 3: Hero polish (additive, safe) ===== */
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.hero-copy{ display:grid; gap: .9rem; }

.hero .lead{ 
  color: var(--muted, #cdd3df);
  font-size: clamp(1rem, .45vw + 1rem, 1.125rem);
}

.hero .legal.small{
  font-size: .85rem;
  color: #9aa3b2;
  margin-top: -.25rem;
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap: .65rem; margin-top:.25rem; }

.hero .benefits{
  margin: .5rem 0 0 0; padding:0;
  list-style: none; display:grid; gap:.35rem;
}
.hero .benefits li{
  position:relative; padding-left:1.25rem; color:#cfd6e3;
}
.hero .benefits li::before{
  content:"•"; position:absolute; left:.2rem; top:0; color:#8ea3ff; 
}

/* Keep the right column (hero-art) from collapsing even if empty */
.hero-art{ min-height: 80px; }

/* Responsive tweaks */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ display:none; }
}
@media (max-width: 600px){
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn, .hero-ctas .btn-ghost{ width:100%; }

/* Center hero section text */
.hero-section {
  text-align: center;
}

/* Center "How it works" section text */
.how-it-works {
  text-align: center;
}

/* Center "Join the waitlist" section text */
.join-waitlist-section {
  text-align: center;
}

/* Day-3/4: center key sections */
section:has(#hero-title),
section:has(#how-it-works),
section:has(#join-waitlist-title) {
  text-align: center;
}

/* Keep lists readable while centered blocks are used */
section:has(#hero-title) ul,
section:has(#how-it-works) ul {
  display: inline-block;   /* lets bullets stay left within a centered block */
  text-align: left;
}

/* Nudge common button rows to center if they’re flex */
section:has(#hero-title) .buttons,
section:has(#join-waitlist-title) .buttons {
  justify-content: center;
}

/* Fallback: make lone buttons center even without a row wrapper */
section:has(#hero-title) a.button,
section:has(#join-waitlist-title) a.button {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Day 4: forced centering for key blocks --- */
.centered-block { text-align: center !important; }

/* Keep bullet lists readable while the block is centered */
.centered-block ul {
  display: inline-block;
  text-align: left;
}

/* Hard-centering helper: keep text readable in a centered block */
.centered-block-hard > p,
.centered-block-hard > ul,
.centered-block-hard > div p {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Centered block readability */
.centered-block-hard > p,
.centered-block-hard > ul,
.centered-block-hard > div p {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.centered-block-hard ul { display: inline-block; text-align: left; }

/* Bullet fix for centered sections */
.centered-block-hard ul {
  display: inline-block;
  text-align: left;
  list-style-position: inside; /* keep bullets inside the box */
  padding-left: 0;             /* no extra gutter */
  margin-left: 0;
}

/* Kill default markers that can leak outside when centering */
.centered-block-hard ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Optional: add neat inline bullets so the list still looks like a list */
.centered-block-hard li::before {
  content: "• ";
  font-weight: 600;
  opacity: 0.9;
}

/* Remove bullets in hero section lists */
section:has(h1) ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* Nuke bullets + markers just in the hero region */
main section:first-of-type ul,
main section:first-of-type li { list-style: none !important; }
main section:first-of-type li::marker { content: '' !important; }
main section:first-of-type li::before { content: none !important; }

/* Belt stays tidy if it’s a list */
main section:first-of-type ul { padding-left: 0 !important; margin-left: 0 !important; }

/* Hero benefits: center, no native bullets, clean inline separators */
ul.benefits {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .75rem; /* row/col gaps */
  text-align: center;
}
ul.benefits li {
  display: inline;                  /* render inline so separators feel natural */
}
ul.benefits li::marker { content: '' !important; } /* belt-and-suspenders */
ul.benefits li + li::before {
  content: "•";
  margin: 0 .5rem;
  font-weight: 600;
  opacity: .85;
}

/* Hero benefits: center, no native bullets, clean inline separators */
ul.benefits {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .75rem; /* row/col gaps */
  text-align: center;
}
ul.benefits li {
  display: inline;                  /* render inline so separators feel natural */
}
ul.benefits li::marker { content: '' !important; } /* belt-and-suspenders */
ul.benefits li + li::before {
  content: "•";
  margin: 0 .5rem;
  font-weight: 600;
  opacity: .85;
}

/* Bullet kill switch just for the hero benefits row */
.fix-bullets li { list-style: none !important; }
.fix-bullets li::marker { content: '' !important; }
.fix-bullets li::before { content: none !important; }
/* === Day 4: Phase 3 — Mobile & Tablet touch-ups ===================== */

/* 1) Safer mobile spacing and container padding */
.section { padding-top: clamp(1.75rem, 4vw, 2.5rem); padding-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.container { padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); }

/* 2) Tap targets >= 44px */
a.btn, .btn, .button, .hero-ctas a, .nav a { min-height: 44px; padding: .7rem 1.1rem; }

/* 3) Tight/loose stack fixes on small screens */
@media (max-width: 640px) {
  .cards { gap: 1rem !important; }
  .cta-row, .hero-ctas { gap: .7rem !important; }
  .benefits { row-gap: .25rem; }
}

/* 4) Form ergonomics on mobile */
input[type="email"], input.form-control {
  width: 100% !important;
  min-height: 44px;
  padding: .7rem .9rem;
}
.waitlist-panel .ml-form-embedSubmit button { min-height: 44px; }

/* 5) Ensure the join section stays centered on all widths even if ML injects styles */
#join.section > .container { margin-left: auto; margin-right: auto; text-align: left; }
#join.section .ml-form-embedContainer, 
#join.section .ml-form-embedWrapper { margin-left: auto; margin-right: auto; width: 100%; max-width: 640px; }
/* Day 4: Mobile & tablet touch-ups (safe, #join untouched) */
.section { padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.container { padding-inline: clamp(16px, 4vw, 24px); }

/* Tap targets */
a.btn, .btn, .button, .hero-ctas a, .nav a {
  min-height: 44px; padding: .7rem 1.1rem;
}

/* Small-screen spacing */
@media (max-width: 640px) {
  .cards { gap: 1rem !important; }
  .cta-row, .hero-ctas { gap: .7rem !important; }
  .benefits { row-gap: .25rem; }
}

/* Form ergonomics (generic) */
input[type="email"], input.form-control { width: 100%; min-height: 44px; padding: .7rem .9rem; }
/* Day 4: Mobile contrast fix for waitlist subtitle */
@media (max-width: 640px) {
  /* Lighten the subtitle inside the MailerLite panel */
  #join.section .waitlist-panel .ml-form-embedContent p,
  #join.section .waitlist-panel .ml-form-embedBody p {
    color: #DBE2FF !important; /* tweak lighter/darker to taste */
  }

  /* Improve placeholder readability too */
  #join.section .waitlist-panel input.form-control::placeholder {
    color: #BFC8FF !important;
    opacity: 1;
  }

  /* Ensure input text remains readable */
  #join.section .waitlist-panel input.form-control {
    color: #E9EFFF !important;
  }
}