:root{
      --bg:#071A12; /* deep green/black */
      --panel:#0C2318;
      --ink:#E8FFEF;
      --muted:#AFDCC0;
      --brand:#14C86E;  /* primary green */
      --brand-2:#2CE39B; /* accent */
      --accent:#9AF5C7;
      --max:1200px;
      --radius:18px;
      --shadow:0 10px 30px rgba(20,200,110,.25);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 80% -10%, rgba(44,227,155,.15), transparent 60%), var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{max-width:var(--max);padding:0 20px;margin:0 auto}

    /* Header */
    header{position:sticky;top:0;z-index:99;backdrop-filter:saturate(140%) blur(10px);background:rgba(7,26,18,.6);border-bottom:1px solid rgba(154,245,199,.12)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .brand{display:flex;align-items:center;gap:12px}
	
   /* Brand mark container (subtle glass badge) */
	.logo-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;

  /* Soft translucent glass for contrast */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(20, 200, 110, 0.25);
  border-radius: 12px;
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 4px rgba(44, 227, 155, 0.15);

  /* Slight padding so logo breathes inside badge */
  padding: 6px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle green lift on hover */
.logo-badge:hover {
  background: rgba(20, 200, 110, 0.08);
  box-shadow:
    0 3px 10px rgba(20, 200, 110, 0.25),
    inset 0 0 5px rgba(44, 227, 155, 0.2);
}




	/* The PNG mark with extra glow for contrast */
.logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(1.85) contrast(1.5);
}



    .logo-type{font-weight:800;letter-spacing:.15px}
    .logo-type span{opacity:.8;font-weight:700}
    .nav-cta{display:flex;gap:10px}
    .btn{border:1px solid rgba(154,245,199,.25); padding:9px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:10px;font-weight:600}
    .btn:hover{border-color:rgba(154,245,199,.6)}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#042012;border:0;box-shadow:var(--shadow)}
    .chip{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(154,245,199,.25);display:inline-flex;gap:8px;align-items:center;background:rgba(20,200,110,.08)}

    /* HERO (updated for tighter above-the-fold) */
    .hero{position:relative;overflow:hidden}
    .hero .container{display:grid;grid-template-columns: 1.05fr .95fr; gap:32px; align-items:center; min-height:78vh; padding-top:36px; padding-bottom:24px}
    .eyebrow{font-size:13px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
    h1{font-family:Inter,system-ui,sans-serif; font-weight:800; font-size:clamp(30px,4vw,48px); line-height:1.15; margin:8px 0 10px}
    .lead{font-size:clamp(15px,1.5vw,18px); color:#D7FFE6; opacity:.95; margin:0 0 18px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
    .stat{background:linear-gradient(180deg,rgba(20,200,110,.18),rgba(20,200,110,.06));border:1px solid rgba(154,245,199,.2);border-radius:14px;padding:12px}
    .stat b{font-size:20px}
    .stat small{display:block;color:var(--muted)}

    /* Hero Illustration */
    .hero-art{position:relative}
    .glass{background:radial-gradient(560px 200px at 20% -10%, rgba(44,227,155,.22), transparent 60%);position:absolute;inset:-20% -10% auto -10%;pointer-events:none;}
    .card{background:rgba(12,35,24,.65); border:1px solid rgba(154,245,199,.15); border-radius:14px; padding:14px; backdrop-filter: blur(6px);}
    .mock{display:grid;gap:10px}
    .row{display:flex;gap:10px;align-items:center}
    .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#C9FFE3,#6EF0B1);}
    .bubble{flex:1;background:rgba(154,245,199,.1);border:1px solid rgba(154,245,199,.2);border-radius:10px;padding:9px;font-size:14px;line-height:1.35}
    .pulse{position:absolute;inset:auto 16px -16px auto; width:120px;height:120px; border-radius:50%; background:radial-gradient(circle, rgba(44,227,155,.35) 0 40%, transparent 41%); filter:blur(8px); opacity:.65}


    .lglm-outcomes { background:#081A14; color:#EAF5F2; padding:clamp(60px,7vw,110px) 16px; }
	.lglm-outcomes .container { max-width:1200px; margin:0 auto; }
	.outcome-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start; }

	.lglm-outcomes h2 { font-size:clamp(28px,4vw,40px); margin:0 0 8px; }
	.lglm-outcomes .subtext { color:#AECFC6; margin:0 0 24px; }

	.funnel-figure { margin:0; }
	.funnel-svg { width:100%; height:auto; display:block; border-radius:12px; }
	.funnel-caption { color:#AECFC6; font-size:14px; margin-top:8px; }

	/* Make the funnel bigger & high contrast */
	
    .funnel-svg.strong {
	  width: 100%;
	  max-width: 1100px;
	  display: block;
	  margin: 24px auto;
	}
	 
	 /* Text styling for labels */
	.stage-label, .count-label {
	  fill: #071F19;
	  font-weight: 800;
	  font-size: 24px;
	  letter-spacing: 0.2px;
	}
	.funnel-svg .onbar { fill:#071F19; font-weight:800; font-size:18px; }
	.funnel-svg .count  { letter-spacing:0.3px; }

	.funnel-svg .chipText { fill:#CFFCF0; font-size:14px; font-weight:700; }
	.funnel-caption {
	  color: #AECFC6;
	  font-size: 15px;
	  margin-top: 10px;
	  text-align: center;
	}
	
	.funnel-svg.animated .bar {
  animation: shimmerFlow 4s ease-in-out infinite;
  transform-origin: left center;
}

@media (max-width: 980px) {
  .funnel-svg.strong { max-width: 100%; height: auto; }
  .stage-label, .count-label { font-size: 18px; }
}

    @keyframes shimmerFlow {
  0%   { filter: brightness(1) drop-shadow(0 0 4px #00FFB4); }
  50%  { filter: brightness(1.6) drop-shadow(0 0 20px #00FFB4); }
  100% { filter: brightness(1) drop-shadow(0 0 4px #00FFB4); }
}

	.stage { fill:#062C24; font-size:18px; font-weight:700; }
	.count { fill:#062C24; font-size:18px; font-weight:700; }

	.note { font-size:14px; color:#AECFC6; margin-top:12px; }

	.quality { background:rgba(255,255,255,0.03); border:1px solid rgba(0,255,180,0.15);
	  border-radius:16px; padding:28px 32px; }
	.quality h3 { color:#00FFB4; margin:0 0 14px; font-size:20px; }
	.quality ul { list-style:none; padding:0; margin:0; }
	.quality li { margin:10px 0; line-height:1.55; }
	.quality li strong { color:#DFF7F0; }

@media (max-width: 980px){
  .outcome-grid { grid-template-columns:1fr; gap:36px; }
}


	.hero-art {
	  position: relative;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.hero-image {
	  width: 100%;
	  max-width: 520px;
	  height: auto;
	  border-radius: 14px;
	  box-shadow: 0 12px 40px rgba(20, 200, 110, 0.25);
	  animation: float 6s ease-in-out infinite;
	}

	@keyframes float {
	  0%, 100% { transform: translateY(0px); }
	  50% { transform: translateY(-6px); }
	}

	@media (max-width: 900px) {
	  .hero .container {
		grid-template-columns: 1fr;
		text-align: center;
	  }
	  .hero-art {
		margin-top: 28px;
	  }
	  .hero-image {
		max-width: 90%;
	  }
	}

    /* SECTION WRAPPER */
    section{padding:64px 0;border-top:1px solid rgba(154,245,199,.08)}
    .section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px;gap:20px}
    .section-head h2{font-weight:800; font-size:clamp(26px,3.2vw,38px); margin:0}
    .section-head p{max-width:720px;color:#CFF6E3}

    /* Emo/Pain grid */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .cardx{background:linear-gradient(180deg,rgba(20,200,110,.14),rgba(20,200,110,.04));border:1px solid rgba(154,245,199,.18);border-radius:14px;padding:16px}
    .cardx h3{margin:0 0 6px;font-size:18px}
    .cardx p{margin:0;color:#DDFCEB}
    .tag{font-size:12px;border:1px solid rgba(154,245,199,.25);padding:6px 10px;border-radius:999px;background:rgba(20,200,110,.06)}

    /* How it works */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .step{position:relative;padding:16px;border:1px dashed rgba(154,245,199,.25);border-radius:14px;background:linear-gradient(180deg,rgba(20,200,110,.10),rgba(20,200,110,.02))}
    .count{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#042012;font-weight:800;margin-bottom:8px}
    .illus{height:84px;border-radius:10px;background:radial-gradient(120px 60px at 30% 20%, rgba(44,227,155,.35), transparent 60%), linear-gradient(135deg, rgba(154,245,199,.18), rgba(154,245,199,.06)); border:1px solid rgba(154,245,199,.2)}

    /* Remove any old illustration placeholders */
.illus { display: none !important; }

	/* Step card image */
	/* Step card image — no cropping */
	.step-img{
	  width: 100%;
	  max-width: 280px;
	  height: auto;             /* preserves proportions */
	  object-fit: contain;
	  display: block;
	  margin: 0 auto 12px;
	  border-radius: 12px;
	  box-shadow: 0 8px 20px rgba(20,200,110,.22);
	}


	/* If you added this earlier, remove it to avoid clipping */
	.step:hover .step-img{ transform: translateY(-2px); } /* optional keep or remove */

	.step { padding-bottom: 18px; }



		.lglm-linkedin-vs-ads {
	  background-color: #081A14;
	  color: #EAF5F2;
	  padding: clamp(48px, 6vw, 96px) 16px;
	}

	.lglm-linkedin-vs-ads .container {
	  max-width: 1200px;
	  margin: 0 auto;
	}

	.lglm-linkedin-vs-ads h2 {
	  font-size: clamp(28px, 4vw, 42px);
	  margin-bottom: 12px;
	  font-weight: 700;
	}

	.lglm-linkedin-vs-ads .intro {
	  color: #AECFC6;
	  font-size: clamp(16px, 2.2vw, 18px);
	  margin-bottom: 32px;
	  max-width: 780px;
	}

	.proof-table {
	  width: 100%;
	  border-collapse: collapse;
	  border: 1px solid rgba(0,255,180,0.15);
	  background-color: rgba(255,255,255,0.02);
	  border-radius: 10px;
	  overflow: hidden;
	}

	.proof-table th {
	  background-color: rgba(0,255,180,0.10);
	  color: #00FFB4;
	  text-align: left;
	  padding: 16px;
	  font-size: 18px;
	  font-weight: 600;
	}

	.proof-table td {
	  padding: 16px;
	  border-top: 1px solid rgba(0,255,180,0.08);
	  color: #DFF7F0;
	  vertical-align: top;
	}

	.proof-table tr:hover td {
	  background-color: rgba(0,255,180,0.04);
	}

	@media (max-width: 780px) {
	  .proof-table thead {
		display: none;
	  }
	  .proof-table, .proof-table tbody, .proof-table tr, .proof-table td {
		display: block;
		width: 100%;
	  }
	  .proof-table tr {
		margin-bottom: 20px;
		border: 1px solid rgba(0,255,180,0.1);
		border-radius: 8px;
		overflow: hidden;
	  }
	  .proof-table td {
		border-top: none;
		padding: 12px 16px;
	  }
	  .proof-table td:first-child {
		background-color: rgba(0,255,180,0.05);
		color: #00FFB4;
		font-weight: 600;
	  }
}

    /* Why LinkedIn */
    .twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
    .proof{padding:18px;border-radius:14px;background:rgba(12,35,24,.7);border:1px solid rgba(154,245,199,.15)}
    .proof ul{margin:0;padding-left:18px}

    /* Value */
    .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .tile{padding:16px;border-radius:14px;border:1px solid rgba(154,245,199,.18);background:linear-gradient(180deg,rgba(20,200,110,.14),rgba(20,200,110,.04))}
    .tile h4{margin:0 0 6px}
	
	.lglm-compare {
  background:#081A14; color:#EAF5F2;
  padding: clamp(48px,6vw,96px) 16px;
}
.lglm-compare .container { max-width:1200px; margin:0 auto; }
.lglm-compare h2 { font-size:clamp(28px,4vw,42px); margin:0 0 10px; }
.lglm-compare .intro { color:#AECFC6; max-width:820px; margin:0 0 24px; }

.compare-table {
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid rgba(0,255,180,.14);
  background:rgba(255,255,255,.02); border-radius:12px; overflow:hidden;
}
.compare-table th, .compare-table td { padding:16px 18px; text-align:left; }
.compare-table thead th {
  background:rgba(0,255,180,.10);
  color:#00FFB4; font-weight:700; font-size:16px;
}
.compare-table tbody tr:nth-child(odd) td,
.compare-table tbody tr:nth-child(odd) th[scope="row"] {
  background:rgba(255,255,255,.02);
}
.compare-table tbody tr:nth-child(even) td,
.compare-table tbody tr:nth-child(even) th[scope="row"] {
  background:rgba(255,255,255,.03);
}
.compare-table th.crit { width:26%; }
.compare-table th.good, .compare-table th.bad { width:37%; }

/* Tick / cross badges */
.ok::before, .no::before {
  content:""; display:inline-block; width:18px; height:18px; margin-right:8px;
  border-radius:999px; vertical-align:-3px;
}
.ok::before  { background: radial-gradient(circle at 30% 30%, #00FFB4, #00B98E); box-shadow:0 0 12px rgba(0,255,180,.35); }
.no::before  { background: radial-gradient(circle at 30% 30%, #B95A5A, #7A2D2D); box-shadow:0 0 10px rgba(255,80,80,.25); }

/* Hover clarity */
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th[scope="row"] {
  background:rgba(0,255,180,.05);
}

/* Mobile: stack each row as a card */
@media (max-width: 860px) {
  .compare-table thead { display:none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td, .compare-table th[scope="row"] { display:block; width:100%; }
  .compare-table tr { margin:14px 12px; border:1px solid rgba(0,255,180,.14); border-radius:10px; overflow:hidden; }
  .compare-table th[scope="row"] {
    background:rgba(0,255,180,.10); color:#00FFB4; font-weight:700;
  }
  .compare-table td { border-top:1px solid rgba(0,255,180,.10); }
  .compare-table td::before {
    content:attr(data-col); display:block; color:#AECFC6; font-size:12px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em;
  }
}


    /* Outcomes & Funnel */
    #outcomes .funnel { 
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:20px;
  align-items:center;
}
    .bars{display:grid;gap:10px}
    .bar{height:16px;border-radius:999px;background:linear-gradient(90deg,var(--brand), var(--brand-2));box-shadow:var(--shadow)}
    .bar:nth-child(1){width:96%}
    .bar:nth-child(2){width:78%}
    .bar:nth-child(3){width:52%}
    .bar:nth-child(4){width:28%}
    .note{font-size:13px;color:var(--muted)}

    /* Testimonials */
    .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .quote{padding:16px;border-radius:14px;border:1px solid rgba(154,245,199,.18);background:linear-gradient(180deg,rgba(20,200,110,.14),rgba(20,200,110,.04))}
    .quote .who{display:flex;align-items:center;gap:10px;margin-top:10px}
    .who .avatar{width:28px;height:28px}

    /* CTA band */
    .cta-band{position:relative;border:1px solid rgba(154,245,199,.18);border-radius:18px;padding:20px;background:linear-gradient(135deg,rgba(20,200,110,.18),rgba(20,200,110,.04))}

    /* Footer */
    footer{padding:44px 0;color:#BDEDD1}
    footer .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    footer small{opacity:.85}

    /* A11y: focus */
    .btn:focus-visible, a:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px }

    /* Animations */
    [data-raise]{transform:translateY(12px);opacity:0;transition:.6s ease}
    .inview{transform:none;opacity:1}

    /* Responsive */
    @media (max-width: 1000px){
      .hero .container{grid-template-columns:1fr; min-height:auto}
      .kpis{grid-template-columns:repeat(3,1fr)}
      .steps{grid-template-columns:repeat(2,1fr)}
      .twocol{grid-template-columns:1fr}
      .funnel{grid-template-columns:1fr}
    }
    @media (max-width: 720px){
      .grid{grid-template-columns:1fr}
      .tiles{grid-template-columns:1fr}
      .quotes{grid-template-columns:1fr}
      .kpis{grid-template-columns:1fr 1fr}
    }
	
	/* === LGLM Outcomes Funnel — visibility + sizing fixes === */
.lglm-outcomes .container { max-width: 1400px !important; }           /* let it breathe */
.lglm-outcomes .outcome-grid { grid-template-columns: 1.6fr .8fr !important; }

.lglm-outcomes .funnel { display: block !important; }                 /* kill accidental 2-col grid */
.lglm-outcomes .funnel-figure { max-width: none !important; }

.lglm-outcomes .funnel-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 1100px !important;                                       /* big, but fits container */
  margin: 24px auto !important;
}

@media (max-width: 980px){
  .lglm-outcomes .container { max-width: 100% !important; }
  .lglm-outcomes .outcome-grid { grid-template-columns: 1fr !important; }
  .lglm-outcomes .funnel-svg { max-width: 100% !important; }
}

/* Funnel text color override */
.lglm-outcomes .stage-label,
.lglm-outcomes .count-label {
  fill: #FFFFFF !important;   /* bright white for all text inside funnel */
}


  /* === Outcomes layout & sizing (Option A) === */
.lglm-outcomes .container { max-width: 1400px !important; }
.lglm-outcomes .outcome-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr !important;
  column-gap: 60px;
  row-gap: 24px;
  align-items:start;
}
.lglm-outcomes .outcome-head{ grid-column: 1 / -1; }

/* Funnel typography color (white) */
.lglm-outcomes .stage-label,
.lglm-outcomes .count-label,
.lglm-outcomes .chipText { fill: #FFFFFF !important; }

/* Funnel width */
.lglm-outcomes .funnel-svg{ width:100%; height:auto; display:block; max-width:1100px; margin:16px auto; }

@media (max-width: 980px){
  .lglm-outcomes .outcome-grid{ grid-template-columns:1fr !important; column-gap:0; }
  .lglm-outcomes .funnel-svg{ max-width:100%; }
}

  


/* === Spacing & Readability Improvements (overrides) === */
html { scroll-behavior: smooth; }
body { line-height: 1.6; }

/* Section breathing room */
section { padding: clamp(56px, 7vw, 112px) 0; }
.section-head { margin-bottom: clamp(16px, 3vw, 32px); }
.section-head p { margin-top: 6px; line-height: 1.65; }

/* Container horizontal paddings for wide screens */
.container { padding-left: clamp(16px, 4vw, 28px); padding-right: clamp(16px, 4vw, 28px); }

/* Card & tile vertical spacing */
.cardx, .tile, .quote, .quality, .stat, .step {
  padding: clamp(16px, 2.4vw, 22px);
}

/* Grid gaps slightly larger for clarity */
.grid, .tiles, .quotes, .steps, .kpis {
  gap: clamp(12px, 2vw, 20px);
}

/* Headings spacing */
h1 { margin: 10px 0 14px; line-height: 1.18; }
h2 { line-height: 1.22; }
h3, h4 { line-height: 1.28; margin-top: 8px; margin-bottom: 8px; }

/* Buttons group breathing room */
.hero-actions { gap: clamp(10px, 2vw, 14px); }

/* Reduce visual density of header nav */
header .nav { padding: 14px 0; }

/* Increase table cell line-height for readability */
.compare-table th, .compare-table td,
.proof-table th, .proof-table td { line-height: 1.55; }

/* Mobile refinements */
@media (max-width: 900px) {
  .section-head { text-align: center; }
  .hero .container { padding-top: 28px; padding-bottom: 12px; }
  .hero-actions, .kpis { justify-content: center; }
}

/* Footer spacing */
footer { padding: clamp(36px, 6vw, 56px) 0; }
footer .foot { row-gap: 10px; }


/* === Responsive Header Menu (hamburger) === */
.hamburger{
  display:none;
  width:44px;height:44px;
  background:transparent;border:1px solid rgba(154,245,199,.25);
  border-radius:10px;
  display:none; align-items:center; justify-content:center;
  gap:4px; padding:6px; cursor:pointer;
}
.hamburger .bar{
  display:block; width:22px; height:2px;
  background:rgba(207,252,227,.95);
  border-radius:2px;
}
.hamburger:focus-visible{ outline:2px dashed var(--accent); outline-offset:2px; }

/* Keep CTAs wrapping nicely on mid sizes */
.nav-cta{ flex-wrap:wrap; }

@media (max-width: 980px){
  .hamburger{ display:flex; }
  /* Transform nav into overlay panel under header */
  header .nav{ position:relative; }
  .nav-cta{
    display:none;
    position:absolute; left:16px; right:16px; top:100%;
    flex-direction:column; gap:10px;
    padding:14px;
    background:rgba(7,26,18,.92);
    border:1px solid rgba(154,245,199,.18);
    border-radius:14px; box-shadow: 0 10px 30px rgba(20,200,110,.25);
  }
  header.nav-open .nav-cta{ display:flex; }
}

/* Steps: go single-column on narrow phones */
@media (max-width: 640px){
  .steps{ grid-template-columns: 1fr; }
}

/* Prevent hero overflow and ensure images scale well on tiny screens */
@media (max-width: 480px){
  .hero .container{ padding-top: 22px; padding-bottom: 8px; }
  .logo-type{ font-size: 14px; }
  .btn{ width:100%; justify-content:center; }
}

/* Make tables scrollable horizontally as a fallback (in addition to card view) */
.compare-table, .proof-table { width: 100%; }
.table-wrap{ width:100%; overflow-x:auto; }

/* Safer long words in headings on mobile */
h1,h2,h3,h4{ word-wrap: break-word; overflow-wrap: anywhere; }


/* === Mobile overflow guards === */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.flex > * { min-width: 0; } /* prevents flex children from forcing overflow */
.grid > * { min-width: 0; }
.container, .container-x, .section, header, footer { max-width: 100%; }
[style*="width: 100%"] { width: 100% !important; } /* patch inline styles using 100vw */

/* mobile typography */

@media (max-width: 480px){
  h1{ font-size: clamp(24px, 6vw, 34px); line-height: 1.2; }
  h2{ font-size: clamp(20px, 5.2vw, 28px); line-height: 1.25; }
  .hero h1, .hero .title, .section h1, .section h2{ overflow-wrap: anywhere; word-break: break-word; }
}


/* Avoid off-canvas nav from expanding page width */
header .nav, #primary-menu { max-width: 100%; overflow-x: hidden; }

/* Section-level clip to avoid accidental x-overflow from negative margins */
.section, .hero, .footer, .header { overflow-x: clip; }


/* === Comfortable desktop container width === */
:root{
  --container-max: 1200px;   /* 1140–1280px are common; 1200 is a safe middle */
}
.container-x, .container, .wrapper, main > section > .container-x{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Limit line-length for big headlines & paragraphs in hero/content areas */
.hero .left, .hero .content, .section .content{
  max-width: min(72ch, 760px);
}

/* Make metric/card rows breathe a bit on large screens */
.stats, .cards, .grid, .metrics-row{
  gap: clamp(16px, 2.4vw, 28px);
}

/* Let any full-bleed backgrounds keep stretching edge-to-edge while */
.section.full-bleed > .container-x,
.hero.full-bleed > .container-x{
  max-width: none;
  padding-inline: clamp(16px, 4vw, 32px);
}


/* === Sticky header visibility & layering === */
header{
  position: sticky;
  top: 0;
  z-index: 9999; /* make sure nothing overlaps */
}
/* Give it a stronger background once the page is scrolled so it doesn't visually 'disappear' */
header.is-scrolled{
  background: rgba(7,26,18,.9);
  border-bottom-color: rgba(154,245,199,.22);
  backdrop-filter: saturate(180%) blur(10px);
}


/* === Desktop-pinned header fallback === */
:root { --header-h: 72px; }

/* Mobile/Tablet keep sticky (already set) */

/* Desktop+: prefer fixed to avoid rare sticky issues in some browsers/contexts */
@media (min-width: 1024px){
  header{
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 9999;
  }
  body{ padding-top: var(--header-h); }
}

.pricing-grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 2rem;
  }

  .pricing-grid .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .pricing-grid .price {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    margin: 6px 0 4px;
  }

  .pricing-grid .unit {
    opacity: .85;
    font-weight: 600;
    font-size: .9em;
  }

  .pricing-grid ul {
    margin-top: 12px;
    padding-left: 18px;
  }

  .pricing-grid li {
    margin: 6px 0;
  }
  
/* === Force every section H2 to the very top on mobile === */
@media (max-width: 768px) {
  section, .section {              /* make sections a positioning context */
    position: relative;
    padding-top: 64px !important;  /* space for the heading now at the top */
  }

  section h2, .section h2 {        /* put the H2 at the top */
    position: absolute !important;
    top: 16px;
    left: 16px;
    right: 16px;
    margin: 0 !important;

    /* make sure vertical styles are cancelled */
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: keep-all !important;

    line-height: 1.3 !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    text-align: left !important;   /* use center if you prefer */
  }
}

@media (max-width: 768px) {
  h2.no-top-fix {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
}



.site-footer {
    background: #071A12;
    color: #E8FFEF;
    padding: 50px 0 20px;
    font-family: "Inter", sans-serif;
  }
  .site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .footer-column {
    flex: 1 1 250px;
    margin-bottom: 20px;
  }
  .footer-column h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #2CE39B;
  }
  .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer-column ul li {
    margin-bottom: 8px;
  }
  .footer-column ul li a {
    color: #AFDCC0;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .footer-column ul li a:hover {
    color: #2CE39B;
  }
  .footer-column p {
    color: #AFDCC0;
    line-height: 1.6;
  }
  .footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    font-size: 0.9rem;
    color: #AFDCC0;
  }
  @media (max-width: 768px) {
    .footer-links {
      flex-direction: column;
    }
  }

.footer-divider-gradient {
  height: 3px;
  border: none;
  background: linear-gradient(90deg, #14C86E, #2CE39B);
  margin: 0;
  opacity: 0.9;
}
 .calendly-section {
    background: linear-gradient(180deg, #071A12 0%, #0C2318 100%);
    color: #E8FFEF;
    text-align: center;
    padding: 80px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .calendly-section h2 {
    font-size: 2rem;
    color: #2CE39B;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .calendly-section p {
    color: #AFDCC0;
    font-size: 1rem;
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .calendly-section .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Responsive fix for mobile */
  @media (max-width: 768px) {
    .calendly-section {
      padding: 60px 15px;
    }
    .calendly-section h2 {
      font-size: 1.6rem;
    }
  }

/* === LGLM logo — size, contrast, alignment fixes === */
:root {
  --logo-size: clamp(40px, 5.2vw, 56px);  /* responsive logo size */
}

/* Brand row spacing */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;                 /* tighter but balanced gap */
}

/* Force-remove inline width/height on the <img> */
.logo-img{
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;

  /* Make the mark pop on dark header */
  filter: brightness(1.15) contrast(1.15) drop-shadow(0 2px 10px rgba(20,200,110,.28));
  /* If your PNG has a white box, round it so it looks like a badge */
  border-radius: 12px;
  background: rgba(255,255,255,0.03);     /* remove if your PNG is transparent */
  border: 1px solid rgba(154,245,199,.16);
}

/* Wordmark scale + hierarchy */
.logo-type{
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 22px);
  letter-spacing: .2px;
  line-height: 1.05;
  white-space: nowrap;   /* keeps it in one line in header */
}

.logo-type span{
  opacity: .9;           /* subtle hierarchy for “Lead Machine” */
  font-weight: 700;
}

/* Hover polish (optional) */
.brand:hover .logo-img{
  filter: brightness(1.22) contrast(1.2) drop-shadow(0 3px 14px rgba(20,200,110,.32));
}

/* Mobile tweaks */
@media (max-width: 640px){
  :root{ --logo-size: 38px; }
  .logo-type{ font-size: 15px; }
}

background: rgba(255,255,255,0.03);
border: 1px solid rgba(154,245,199,.16);

/* ===== Sticky header -> safe hero offset ===== */
:root{
  /* real header height incl. padding; tweak if needed */
  --header-h: 72px;
  --hero-gap: 18px;   /* extra space under header */
}

/* give the page a top offset equal to header height */
main{
  padding-top: calc(var(--header-h) + var(--hero-gap));
}

/* reset any earlier negative margin on hero */
.hero, #hero, main > section:first-of-type{
  margin-top: 0 !important;
  /* anchor jumps won’t hide behind header */
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* tighten on small screens if it feels too airy */
@media (min-width: 900px){
  .hero{
    transform: translateY(-15%);
  }
  /* prevent overlap with the next section */
  .hero + section{
    margin-top: clamp(24px, 4vh, 64px);
  }
}


/* Ensure vertical scrolling isn't disabled anywhere */
html, body{ overflow-y: auto; }