:root{
  --navy:#1a1a2e;
  --cream:#faf8f4;
  --cream2:#f7f1eb;
  --text:#374151;
  --green:#dcfce7;
  --green-dark:#166534;
  --pink:#d94b88;
  --pink-soft:#fde7f0;
  --purple:#7c3ea1;
  --purple-soft:#f0e8fa;
  --peach:#f7a27c;
  --peach-soft:#fff0e8;
  --line:#eadfd8;
  --radius:22px;
  --shadow:0 14px 38px rgba(44,25,52,.09);
}

body{
  font-family:Inter,sans-serif;
  background:
    radial-gradient(circle at 8% 18%, rgba(217,75,136,.06), transparent 22%),
    radial-gradient(circle at 93% 42%, rgba(124,62,161,.05), transparent 24%),
    var(--cream);
  color:var(--navy);
}

/* Restore hero to a contained size instead of stretching across the viewport */
.lg-banner{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 16px;
}

.lg-banner-link{
  display:block;
  width:100%;
}

.lg-banner img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0 0 22px 22px;
}

/* Keep the new top CTA, but make it feel part of the page */
.lg-top-cta{
  text-align:center;
  padding:14px 20px 26px;
}

.lg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--green);
  color:var(--green-dark);
  border:1px solid #86efac;
  border-radius:999px;
  padding:15px 30px;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 8px 22px rgba(22,101,52,.08);
  transition:.18s ease;
}

.lg-btn:hover{
  background:#bbf7d0;
  transform:translateY(-1px);
}

/* Intro stays compact */
.lg-intro{
  max-width:780px;
  margin:0 auto;
  text-align:center;
  padding:30px 20px 16px;
}

.lg-intro .lg-kicker,
.lg-heading .lg-kicker{
  color:var(--pink);
}

.lg-intro h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.65rem,3.3vw,2.35rem);
  line-height:1.18;
  margin:7px 0 10px;
}

.lg-intro p{
  max-width:660px;
  margin:0 auto;
  color:var(--text);
  line-height:1.65;
  font-size:.98rem;
}

/* Benefit cards: shorter, colourful, less clinical */
.lg-benefits{
  max-width:1080px;
  margin:0 auto;
  padding:20px 20px 46px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:20px;
}

.lg-benefits article{
  height:auto;
  min-height:0;
  align-self:start;
  border-radius:var(--radius);
  padding:24px 24px 26px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  background:#fff;
}

.lg-benefits article:nth-child(1){
  background:linear-gradient(180deg,#fff 0%,#fff8fb 100%);
  border-top:4px solid var(--pink);
}

.lg-benefits article:nth-child(2){
  background:linear-gradient(180deg,#fff 0%,#faf6ff 100%);
  border-top:4px solid var(--purple);
  transform:none;
}

.lg-benefits article:nth-child(3){
  background:linear-gradient(180deg,#fff 0%,#fff9f5 100%);
  border-top:4px solid var(--peach);
}

.lg-benefits article > i{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  font-size:1.05rem;
}

.lg-benefits article:nth-child(1) > i{
  background:var(--pink-soft);
  color:var(--pink);
}

.lg-benefits article:nth-child(2) > i{
  background:var(--purple-soft);
  color:var(--purple);
}

.lg-benefits article:nth-child(3) > i{
  background:var(--peach-soft);
  color:#d76b42;
}

.lg-benefits h3{
  font-family:"Playfair Display",serif;
  font-size:1.2rem;
  line-height:1.25;
  margin:0 0 10px;
}

.lg-benefits article:nth-child(1) h3{color:#a82460}
.lg-benefits article:nth-child(2) h3{color:#62318c}
.lg-benefits article:nth-child(3) h3{color:#b95c3b}

.lg-benefits p{
  color:var(--text);
  line-height:1.6;
  margin:0;
  font-size:.94rem;
}

/* Personalisation highlight */
.lg-highlight{
  max-width:980px;
  margin:0 auto 46px;
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:
    linear-gradient(100deg,rgba(253,231,240,.8),rgba(240,232,250,.78) 52%,rgba(220,252,231,.72));
  border:1px solid #ead7e6;
  border-radius:26px;
  box-shadow:var(--shadow);
}

.lg-highlight h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.45rem,3vw,2.05rem);
  margin:5px 0 8px;
}

.lg-highlight p{
  max-width:620px;
  margin:0;
  color:var(--text);
  line-height:1.65;
}

/* Steps: cleaner and more visual */
.lg-steps{
  background:linear-gradient(180deg,#fff 0%,#fffaf7 100%);
  padding:48px 20px;
  border-top:1px solid #f0e9e4;
  border-bottom:1px solid #f0e9e4;
}

.lg-heading{
  text-align:center;
  margin-bottom:26px;
}

.lg-heading h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.6rem,3.2vw,2.25rem);
  margin:5px 0 0;
}

.lg-step-grid{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.lg-step{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:#fff;
  border:1px solid #eee5df;
  border-radius:18px;
  padding:20px;
  box-shadow:0 7px 18px rgba(26,26,46,.05);
}

.lg-step:nth-child(1){border-left:4px solid var(--pink)}
.lg-step:nth-child(2){border-left:4px solid var(--purple)}
.lg-step:nth-child(3){border-left:4px solid #db7a9d}
.lg-step:nth-child(4){border-left:4px solid #8e5bb7}

.lg-num{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.lg-step b{
  display:block;
  font-family:"Playfair Display",serif;
  margin-bottom:5px;
  font-size:1.02rem;
}

.lg-step div span{
  color:var(--text);
  line-height:1.55;
  font-size:.89rem;
}

/* Reassurance strip */
.lg-strip{
  background:linear-gradient(90deg,#e2fbe9,#f0e9fa,#fdeaf2);
  color:#245b38;
  display:flex;
  justify-content:center;
  gap:34px;
  flex-wrap:wrap;
  padding:14px 20px;
  font-weight:750;
  border-top:1px solid #d8efde;
  border-bottom:1px solid #eadff0;
}

/* Mid CTA: no big clinical empty block */
.lg-mid-cta{
  text-align:center;
  padding:42px 20px;
  background:
    radial-gradient(circle at 15% 50%,rgba(217,75,136,.07),transparent 24%),
    radial-gradient(circle at 88% 50%,rgba(124,62,161,.07),transparent 24%),
    var(--cream2);
}

.lg-mid-cta h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.55rem,3vw,2.2rem);
  margin:0;
}

.lg-mid-cta p{
  max-width:650px;
  margin:10px auto 20px;
  line-height:1.65;
  color:var(--text);
}

/* FAQs: compact */
.lg-faq{
  max-width:840px;
  margin:0 auto;
  padding:44px 20px 48px;
}

.lg-faq details{
  background:#fff;
  border:1px solid #eadfe6;
  border-radius:14px;
  margin-bottom:10px;
  box-shadow:0 5px 16px rgba(26,26,46,.04);
}

.lg-faq summary{
  cursor:pointer;
  padding:16px 18px;
  font-weight:750;
  color:var(--navy);
}

.lg-faq details div{
  padding:0 18px 16px;
  color:var(--text);
  line-height:1.65;
}

/* Bottom CTA has colour without becoming loud */
.lg-bottom-cta{
  text-align:center;
  padding:48px 20px;
  background:
    radial-gradient(circle at 12% 30%,rgba(255,255,255,.08),transparent 20%),
    linear-gradient(120deg,#4f1f66 0%,#7a2d78 48%,#b43e75 100%);
  color:#fff;
}

.lg-bottom-cta h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  margin:0;
}

.lg-bottom-cta p{
  max-width:650px;
  margin:10px auto 20px;
  color:rgba(255,255,255,.84);
  line-height:1.65;
}

/* Cards on the LGBT index */
.lg-cards{
  max-width:1040px;
  margin:30px auto 18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  padding:0 20px;
}

.lg-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  border:1px solid #eadfe6;
  box-shadow:var(--shadow);
}

.lg-card img{
  width:100%;
  height:auto;
  display:block;
}

.lg-card div{
  padding:17px;
}

.lg-card b{
  display:block;
  color:var(--navy);
  font-family:"Playfair Display",serif;
  margin-bottom:6px;
}

.lg-card span{
  color:#6b7280;
  font-size:.88rem;
  line-height:1.55;
}

@media(max-width:820px){
  .lg-benefits,
  .lg-cards{
    grid-template-columns:1fr;
  }

  .lg-highlight{
    margin-left:16px;
    margin-right:16px;
    display:block;
    text-align:center;
  }

  .lg-highlight .lg-btn{
    margin-top:18px;
  }

  .lg-step-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .lg-banner{
    max-width:100%;
    padding:0 10px;
  }

  .lg-banner img{
    border-radius:0 0 16px 16px;
  }

  .lg-top-cta{
    padding:12px 16px 20px;
  }

  .lg-top-cta .lg-btn,
  .lg-mid-cta .lg-btn,
  .lg-bottom-cta .lg-btn{
    display:flex;
    width:100%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    padding:15px 18px;
  }

  .lg-intro{
    padding-top:24px;
  }

  .lg-benefits{
    padding:16px 16px 32px;
    gap:14px;
  }

  .lg-benefits article{
    padding:20px;
  }

  .lg-highlight{
    margin-bottom:32px;
    padding:24px 20px;
  }

  .lg-steps{
    padding:38px 16px;
  }

  .lg-strip{
    flex-direction:column;
    align-items:center;
    gap:7px;
    text-align:center;
  }

  .lg-mid-cta{
    padding:36px 16px;
  }

  .lg-faq{
    padding:38px 16px 42px;
  }

  .lg-bottom-cta{
    padding:40px 16px;
  }
}

/* Hide duplicate visible page heading above LGBT hero artwork */
.lgbt-page-title,
.lg-page-title,
main > h1:first-child,
body > h1:first-of-type{
    display:none !important;
}

/* Remove duplicated visible heading above LGBT hero */
body > main > h1,
body > .page-title,
body > .container > h1:first-child{
    display:none !important;
}