/* =========================================================
   P10Style.css  (Clean LIGHT theme + responsiveness fixes)
   - Built for index.html you pasted
   - Removes dark-rule conflicts and missing variables
   - Mobile: hero text uses ~97% width (reduced side padding)
   - Pricing: stacks cleanly on phones
   ========================================================= */

/* ---------- Theme variables ---------- */
:root{
  /* Layout */
  --max: 1120px;
  --r: 18px;
  --r2: 22px;

  /* Light theme colors */
  --bg: #FFFFFF;
  --panel: rgba(255,255,255,.97);
  --panel2: rgba(255,255,255,.99);
  --text: rgba(12,16,24,.92);
  --muted: rgba(12,16,24,.70);
  --muted2: rgba(12,16,24,.56);
  --line: rgba(12,16,24,.14);

  /* Brand */
  --brand: #ff1e1e;  /* red */
  --brand2:#ff6a00;  /* orange */
  --good: #1a9c5a;

  /* Effects */
  --shadow: 0 16px 40px rgba(0,0,0,.10);
}

/* ---------- Baseline / resets ---------- */
*{ box-sizing: border-box; }
html, body{ width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;	
  color: var(--text);
  background: #E7E7E7;
	/* linear-gradient(90deg,
      rgba(26, 159, 187,.44) 0%,
      rgba(26, 159, 187,.00) 30%,
      rgba(26, 159, 187,.00) 70%,
      rgba(26, 159, 187,.44) 100%*/
    ),  
	  
    radial-gradient(1000px 700px at 12% -10%, rgba(255,246,169,0.04), transparent 60%),
    radial-gradient(1000px 800px at 95% 10%, rgba(61,61,61,0.03), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #ffffff 50%, var(--bg) 100%);
}

/* Prevent fixed topbar from covering anchor targets */
html{ scroll-padding-top: 60px; }

/* Make media responsive by default */
img, video{ max-width:100%; height:auto; }

body{ padding-top: 40px; }  /* adjust to your bar height */
@media (max-width: 980px){
  body{ padding-top: 60px; } /* bar is taller on mobile */
}

/* centers the .box inside the section */
#pricing .wrap{
  display: flex;
  justify-content: center;  /* horizontal center */
}

#pricing .box{
  width: 100%;
           /* pick what looks good: 720–900-ish */
  margin: 0 auto;           /* backup centering */
}
/* centers the PayPal block */
.pp-center{
  max-width: 560px;   /* choose: 480–650 is typical */
  margin: 0 auto;
}

/* make sure PayPal container fills the wrapper */
#paypal-button-container{
  width: 100%;
}
.vid2{
	max-width:480px; width:100%; height:auto; display:block; margin:20px auto; padding:12px;
}

.price .discount{
  font-size: 1.2em;
  font-weight: bold;	
  margin: 0 0 6px;
  line-height: 1.3;
}
.price .today{
  font-size: 1.35rem;
  color:#0911A8;	
  margin: 0;
  font-weight: 900;
  line-height: 1.15;
}

ul li{
  margin: 0 0 10px;
  line-height: 1.2;
}
ul li:last-child{ margin-bottom: 0; }


/* ---------- Layout helpers ---------- */
.wrap{
  width:100%;
  max-width: var(--max, 1120px);
  margin:0 auto;
  padding: 0 10px;
}
@media (max-width: 980px){
  /* ~97% “feel” on phones */
  .wrap{ padding-left: 10px; padding-right: 10px; }
  html{ scroll-padding-top: 10px; } /* topbar is taller on mobile */
}

/* ---------- Top bar ---------- */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #FFFFFF;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  padding: 10px 0;
}
.brand{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 800;
  color: var(--text);
}
.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.12);
  overflow:hidden;
}
.logo img{ width: 28px; height: 28px; object-fit: contain; }

nav{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
nav a{
  text-decoration:none;
  color: rgba(12,16,24,.72);
  padding: 10px 12px;
  border-radius: 12px;
}
nav a:hover{
  background: rgba(0,0,0,.05);
  color: rgba(12,16,24,.92);
}

/* Hide nav on smaller screens */
@media (max-width: 980px){
  nav{ display:none; }
  .row{ gap: 10px; }
}

/* ---------- Cards ---------- */
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
}
.hero-left, .hero-right{ padding: 18px; }
@media (max-width: 980px){
  .hero-left, .hero-right{ padding: 14px; }
}

/* ---------- Hero ---------- */
.hero{ padding: 24px 0 10px; }
.hero-grid{
  display: block;
}
/* Mobile: stack + full width */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero .card{ width:100%; max-width:none; }
}

/* Hero typography */
.hero h1, .hero h2{ margin: 0 0 10px; line-height: 1.15; }
.hero h2{ font-size: 26px; }
@media (max-width: 980px){
  .hero h2{ font-size: 22px; }
}
.sub{ color: var(--muted); font-size: 16px; line-height: 1.5; margin: 10px 0; }

/* CTA buttons */
.cta{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.btn{
  border: 1px solid rgba(12,16,24,.18);
  background: rgba(255,255,255,.92);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.btn:hover{ background: rgba(255,255,255,1); }
.btn.small{ padding: 9px 12px; font-weight: 800; }
.btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 14px 28px rgba(255,30,30,.18), 0 18px 44px rgba(255,106,0,.16);
}

/* Mini quotes */
.miniQuotes{
  display:grid;
  gap: 12px;
  margin-top: 10px;
}
.quote-mini{
  background: var(--panel2);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r);
  padding: 12px 12px;
}
.quote-mini .text,
.quote-mini .a{
  color: var(--text);
  font-family: "Times New Roman", Times, "Nimbus Roman", "Liberation Serif", Georgia, serif;
  font-style: italic;
  font-size: 1.0em;	
  font-weight: 400;   /* remove the bold look */
  line-height: 1.45;
}

.quote-mini .who{ margin-top: 6px; color: var(--muted2); font-size: 1em; }
.tagrow{ margin-top: 8px; display:flex; gap: 8px; flex-wrap: wrap; }
.tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(12,16,24,.12);
  color: rgba(12,16,24,.72);
}

/* ---------- Right side module preview ---------- */
.right-stack{ display:grid; gap: 14px; }
.videoCard .videoThumb{
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(12,16,24,.12);
  background: rgba(0,0,0,.03);
}
.videoCard img{ display:block; width:100%; }
.playBadge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.playBadge button{
  border: 1px solid rgba(12,16,24,.20);
  background: rgba(255,255,255,.92);
  color: rgba(12,16,24,.92);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
.caption{ margin-top: 8px; color: var(--muted2); font-size: 14px; text-align:center; }

.moduleCard{
  background: var(--panel2);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r2);
  padding: 12px;
}
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tab{
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(12,16,24,.14);
  background: rgba(0,0,0,.03);
  color: rgba(12,16,24,.82);
  font-weight: 800;
  cursor:pointer;
}
.tab.active{
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
}
.shot{
  border-radius: var(--r);
  overflow:hidden;
  border: 1px solid rgba(12,16,24,.12);
  background: rgba(0,0,0,.03);
}
.shot img{ display:block; width:100%; }
.shotcap{ margin-top: 8px; color: var(--muted2); font-size: 14px; }

/* ---------- Sections ---------- */
section{ padding: 10px 0; }
.section-title{ margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.section-sub{ margin: 0 0 14px; color: var(--muted); line-height: 1.55; }

@media (max-width: 980px){
  .section-title{ font-size: 22px; }
}

/* Grid blocks */
.grid3{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){
  .grid3{ grid-template-columns: 1fr; }
}

.box{
  background: var(--panel);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r2);
  padding: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.box h3{ margin: 0 0 6px; }
.box p{ margin: 0; color: var(--muted); line-height: 1.55; }

/* Steps */
.steps{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){
  .steps{ grid-template-columns: 1fr; }
}
.step{
  background: var(--panel);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r2);
  padding: 14px;
}
.step .n{
  width: 34px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  font-weight: 900;
  margin-bottom: 10px;
}
.step h3{ margin: 0 0 6px; }
.step p{ margin: 0; color: var(--muted); line-height: 1.55; }

/* Testimonials */
.testimonial-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 980px){
  .testimonial-grid{ grid-template-columns: 1fr; }
}
.t{
  background: var(--panel);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r2);
  padding: 14px;
}
.t .q{ font-weight: 900; margin-bottom: 8px; }
.t .a{
  color: var(--text);
  font-family: "Times New Roman", Times, "Nimbus Roman", "Liberation Serif", Georgia, serif;
  
  font-size: 1.0em;	
  font-weight: 400;   /* remove the bold look */
  line-height: 1.45;
}
.t .who{ margin-top: 10px; color: var(--muted2); font-weight: 800; }

/* FAQ */
.faq details{
  background: var(--panel);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r2);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.faq summary{
  cursor:pointer;
  font-weight: 900;
}
.faq p{ margin: 10px 0 0; color: var(--muted); line-height: 1.6; }

/* ---------- PRICING (responsive) ---------- */
.pricing{
  display:grid;
  grid-template-columns: 1.2fr .8fr; /* desktop */
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px){
  .pricing{ grid-template-columns: 1fr; }
}

.pricebox, .checkout{
  background: var(--panel);
  border: 1px solid rgba(12,16,24,.12);
  border-radius: var(--r2);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* Pill wraps nicely (no <br><br> needed) */
.pill{
  display:block;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(12,16,24,.12);
  font-weight: 900;
  color: rgba(12,16,24,.82);
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* Price styling */
.price .big p{
  margin: 0 0 8px;
  line-height: 1.15;
}
.stack{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.stack > div{
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(12,16,24,.10);
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(12,16,24,.86);
  line-height: 1.45;
}

/* PayPal container spacing */
.checkout #paypal-button-container{ margin-top: 10px; }
.fine{ margin-top: 10px; color: var(--muted2); font-size: 14px; line-height: 1.55; }

/* Utility */
.center{ text-align:center; }
.img-fluid{ max-width:100%; height:auto; }

/* ---------- Sticky CTA (light) ---------- */
.sticky-cta{
  position: fixed;
  left: 0; right: 0;
  bottom: 14px;
  display:none;
  z-index: 60;
  padding: 0 10px;
}
.sticky-cta .bar{
  max-width: var(--max, 1120px);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(246,247,251,.92);
  border: 1px solid rgba(12,16,24,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}
.sticky-cta .left{
  display:flex;
  flex-direction: column;
  gap: 2px;
}
.sticky-cta .left b{ color: rgba(12,16,24,.92); }
.sticky-cta .left span{ color: rgba(12,16,24,.58); font-size: 13px; }

/* ---------- Modal ---------- */
.modal{
  display:none;
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  z-index: 80;
  padding: 16px;
}
.modal .inner{
  min-height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal .panel{
  width: min(900px, 100%);
  padding: 14px;
}
.modal video{ width:100%; height:auto; display:block; }

/* ---------- Older helpers used in your HTML ---------- */
.imgCenter{ display:block; margin-left:auto; margin-right:auto; }
.max320{ max-width: 320px; }

p, li, span, div, details, summary {
    font-size: 1.02em !important;
}