from pathlib import Path import re src = Path("/mnt/data/10X_BSA_Community_Landing_Page.html") html = src.read_text(encoding="utf-8") # Strengthen layout clarity and prevent visual overlap at every breakpoint. css_patch = r""" /* ===== VISIBILITY + NO-OVERLAP V2 ===== */ html, body { width:100%; min-width:0; } body { overflow-x:hidden; } section, header, footer, nav, .container, .hero-grid, .offer-grid, .features, .testimonials, .timeline, .stats, .footer-grid, .card, .feature, .testimonial, .step, .cta, .logo-stage { position:relative; } .container { max-width:1180px; width:calc(100% - 40px); } section { clear:both; isolation:isolate; } .nav { z-index:1000; } .nav-inner { min-width:0; } .nav-links { flex-wrap:wrap; } .nav .btn { flex-shrink:0; white-space:nowrap; } .hero { isolation:isolate; } .hero-grid { min-width:0; } .hero-grid > * { min-width:0; } .hero-copy { overflow-wrap:anywhere; } .hero-actions { position:relative; z-index:10; } .hero-actions .btn { position:relative; z-index:11; } .logo-stage { isolation:isolate; min-width:0; contain:layout paint; } .logo-main { max-width:78%; max-height:390px; height:auto; object-fit:contain; } .float-card { z-index:5; max-width:190px; white-space:normal; line-height:1.35; } .fc1 { top:8%; left:4%; } .fc2 { top:28%; right:4%; } .fc3 { bottom:9%; left:4%; } .fc4 { bottom:20%; right:4%; } .offer-grid, .features, .testimonials, .timeline, .stats { align-items:stretch; } .card, .feature, .testimonial, .step, .stat { min-width:0; overflow:hidden; word-break:normal; overflow-wrap:anywhere; } .card h3, .feature h4, .testimonial strong, .step h4 { overflow-wrap:anywhere; } .card p, .feature p, .testimonial .quote, .step p { max-width:100%; } .testimonial .person { min-width:0; align-items:flex-start; } .testimonial .person > div { min-width:0; } .testimonial .person span, .testimonial .result { display:block; max-width:100%; overflow-wrap:anywhere; } .testimonial .result { width:max-content; max-width:100%; } .cta { isolation:isolate; } .cta > * { position:relative; z-index:2; } .cta .btn { position:relative; z-index:3; } @media (max-width: 1050px) { .hero-grid { grid-template-columns:1fr; } .logo-stage { width:100%; max-width:760px; margin:10px auto 0; } .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .features { grid-template-columns:repeat(2,minmax(0,1fr)); } .testimonials { grid-template-columns:repeat(2,minmax(0,1fr)); } .timeline { grid-template-columns:repeat(2,minmax(0,1fr)); } .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 760px) { .container { width:calc(100% - 28px); } .nav { width:calc(100% - 20px); } .nav-inner { gap:8px; } .nav-links { display:none; } .brand { min-width:0; } .brand img { width:40px; height:40px; flex:0 0 40px; } .brand span { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; } .nav .btn { min-height:43px; padding:0 13px; font-size:11px; } .hero { padding:125px 0 70px; } h1 { font-size:clamp(43px,13vw,64px); letter-spacing:-2.5px; } .hero-copy { font-size:15px; line-height:1.7; } .hero-actions { flex-direction:column; align-items:stretch; } .hero-actions .btn { width:100%; } .micro-proof { align-items:flex-start; } .logo-stage { min-height:360px; border-radius:28px; margin-top:5px; } .logo-main { width:68%; max-width:320px; max-height:290px; } .float-card { font-size:9px; padding:8px 9px; max-width:125px; border-radius:11px; } .fc1 { top:5%; left:3%; } .fc2 { top:24%; right:3%; } .fc3 { bottom:8%; left:3%; } .fc4 { bottom:20%; right:3%; } section { padding:68px 0; } .section-head { margin-bottom:34px; } .section-head h2 { font-size:clamp(32px,9vw,48px); letter-spacing:-1.5px; } .section-head p { font-size:14px; } .offer-grid, .features, .testimonials, .timeline, .stats { grid-template-columns:1fr; } .card { min-height:auto; padding:23px; } .feature { padding:20px; } .testimonial { padding:20px; } .cta { padding:42px 20px; border-radius:26px; } .cta h2 { font-size:clamp(33px,9vw,48px); } .footer-grid { flex-direction:column; text-align:center; } .footer-links { flex-wrap:wrap; justify-content:center; } } @media (max-width: 430px) { .brand span { max-width:115px; } .nav .btn { padding:0 10px; font-size:10px; } .logo-stage { min-height:315px; } .logo-main { width:62%; max-width:250px; } .float-card { max-width:108px; font-size:8px; } .float-card i { margin-right:3px; } .fc1 { top:4%; } .fc2 { top:24%; } .fc3 { bottom:6%; } .fc4 { bottom:19%; } } """ # Insert the patch before html = html.replace("", css_patch + "\n", 1) # Add a small visual rule to make placeholder testimonials unmistakably editable. html = html.replace( ".result{", ".testimonial .result{font-style:normal}.result{", 1 ) out = Path("/mnt/data/10X_BSA_Community_Landing_Page_V2_Clear_No_Overlap.html") out.write_text(html, encoding="utf-8") print(f"Created: {out}") print(f"Size: {out.stat().st_size/1024:.1f} KB")