/* ============================================================
   Post Property (city landing pages) — e.g. "Post Property in Gurgaon"
   Ported from: DreamAcco Post Property - Gurgaon (Desktop / Mobile) mockups
   All rules are scoped under .ppl-page so they never leak into the
   shared site header, footer or other pages. One CSS file is shared
   across every city view in resources/views/front/postPropertyLanding.
   ============================================================ */

.ppl-page{
  --blue:#0E8AE0;
  --blue-dark:#0A6EB5;
  --blue-tint:#E6F3FC;
  --orange:#FF9A1F;
  --orange-dark:#E5821A;
  --orange-tint:#FFF3E0;
  --ink:#0B1726;
  --ink-soft:#3A4757;
  --muted:#6B7785;
  --hairline:#E5E9EE;
  --hairline-soft:#EEF1F5;
  --canvas:#F6F8FB;
  --ok-bg:#E8F6EE; --ok-ink:#1B7F47;
  --display:"Plus Jakarta Sans","SF Pro Display",system-ui,sans-serif;
  --body:"Inter","SF Pro Text",system-ui,sans-serif;
  --shadow-sm:0 1px 3px rgba(15,30,50,.05);
  --shadow-md:0 8px 24px rgba(15,30,50,.08);

  font-family:var(--body); color:var(--ink); font-size:16px; line-height:1.55;
}
.ppl-page,.ppl-page *,.ppl-page *::before,.ppl-page *::after{ box-sizing:border-box; }
.ppl-page h1,.ppl-page h2,.ppl-page h3,.ppl-page p{ margin:0; }
.ppl-page a{ text-decoration:none; }
.ppl-page button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.ppl-container{ max-width:1200px; margin:0 auto; padding:0 32px; }

/* ---------- Type helpers ---------- */
.ppl-eyebrow{
  font-family:var(--body); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px;
}
.ppl-eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor; opacity:.5;}
.ppl-eyebrow.center{justify-content:center;}
.ppl-eyebrow.center::before{display:none;}

/* ---------- Buttons ---------- */
.ppl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:12px; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ppl-btn:active{transform:translateY(1px);}
.ppl-btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(14,138,224,.28);}
.ppl-btn-primary:hover{background:var(--blue-dark); color:#fff;}
.ppl-btn-accent{background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(255,154,31,.30);}
.ppl-btn-accent:hover{background:var(--orange-dark); color:#fff;}
.ppl-btn-ink{background:var(--ink); color:#fff;}
.ppl-btn-ink:hover{background:#000; color:#fff;}
.ppl-btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--hairline);}
.ppl-btn-ghost:hover{border-color:var(--blue); color:var(--blue-dark);}
.ppl-btn-lg{font-size:16px; padding:16px 28px;}

/* ---------- Chips / pills ---------- */
.ppl-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--body); font-weight:600; font-size:13.5px;
  padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--hairline); color:var(--ink-soft);
}
.ppl-pill svg{flex-shrink:0; color:var(--blue);}
.ppl-badge-zero{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:13px;
  padding:8px 16px; border-radius:999px;
  background:var(--blue-tint); color:var(--blue-dark);
}
.ppl-badge-zero .dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}
.ppl-free-tag{
  display:inline-flex; align-items:center; font-family:var(--body); font-weight:800;
  font-size:10px; letter-spacing:.08em; color:#0B3D1F; background:#3DDC84;
  padding:4px 8px; border-radius:6px;
}

/* ---------- Section rhythm ---------- */
.ppl-section{padding:88px 0;}
.ppl-section.tint{background:var(--canvas);}
.ppl-section-head{max-width:640px;}
.ppl-section-head.center{margin:0 auto; text-align:center;}
.ppl-section-title{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.03em; line-height:1.1; margin-top:16px;}
.ppl-section-sub{color:var(--muted); font-size:17px; margin-top:16px; line-height:1.6;}

/* ---------- Hero ---------- */
.ppl-hero{position:relative; padding:44px 0 48px; overflow:hidden;}
.ppl-hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.ppl-hero-bg .glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55;}
.ppl-hero-bg .g1{width:480px; height:480px; background:var(--blue-tint); top:-180px; left:-100px;}
.ppl-hero-bg .g2{width:380px; height:380px; background:#FFF0DA; bottom:-160px; right:-60px; opacity:.6;}
.ppl-hero .ppl-container{position:relative; z-index:1;}
.ppl-hero-top{max-width:760px; margin:0 auto; text-align:center;}
.ppl-hero h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,4.6vw,50px); line-height:1.1; letter-spacing:-.03em; margin-top:20px;}
.ppl-hero h1 .b{color:var(--blue);}
.ppl-hero .lede{font-size:18px; color:var(--ink-soft); margin:18px auto 0; max-width:580px; line-height:1.6;}

.ppl-trustrow{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:36px;}

/* ---------- CTA cards ---------- */
.ppl-cta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
.ppl-cta-card{background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:30px 26px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:.18s;}
.ppl-cta-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.ppl-cta-card .ci{width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:20px;}
.ppl-cta-card h3{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em;}
.ppl-cta-card p{color:var(--muted); font-size:14.5px; margin-top:9px; line-height:1.6; flex:1;}
.ppl-cta-card .ppl-btn{margin-top:22px; width:100%;}
.ppl-cta-card .ppl-free-tag{align-self:flex-start; margin-bottom:14px;}

/* ---------- Stat band ---------- */
.ppl-band{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.ppl-band .stat{text-align:center; padding:8px;}
.ppl-band .stat .n{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-.03em; color:var(--ink); line-height:1;}
.ppl-band .stat .n .u{color:var(--blue);}
.ppl-band .stat .l{color:var(--muted); font-size:14px; margin-top:8px; font-weight:500;}
.ppl-band .stat + .stat{border-left:1px solid var(--hairline-soft);}

/* ---------- Why grid ---------- */
.ppl-why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;}
.ppl-why{background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:26px;}
.ppl-why .ico{width:48px; height:48px; border-radius:13px; background:var(--blue-tint); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.ppl-why:nth-child(2) .ico, .ppl-why:nth-child(5) .ico{background:var(--orange-tint); color:var(--orange-dark);}
.ppl-why:nth-child(3) .ico, .ppl-why:nth-child(6) .ico{background:var(--ok-bg); color:var(--ok-ink);}
.ppl-why h3{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em;}
.ppl-why p{color:var(--muted); font-size:14.5px; margin-top:8px; line-height:1.6;}

/* ---------- Steps (dark) ---------- */
.ppl-steps{background:var(--ink); color:#fff;}
.ppl-steps .ppl-section-title{color:#fff;}
.ppl-steps .ppl-section-sub{color:rgba(255,255,255,.6);}
.ppl-steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px; position:relative;}
.ppl-step4{position:relative;}
.ppl-step4 .num{font-family:var(--display); font-weight:800; font-size:15px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.ppl-step4 h3{font-family:var(--display); font-weight:700; font-size:19px; margin-top:20px;}
.ppl-step4 p{color:rgba(255,255,255,.58); font-size:14px; margin-top:9px; line-height:1.6;}
.ppl-step4:not(:last-child)::after{content:""; position:absolute; top:22px; left:60px; right:-12px; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.2),transparent);}

/* ---------- Coverage / areas ---------- */
.ppl-areas{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:36px;}

/* ---------- SEO copy ---------- */
.ppl-seo-copy{max-width:820px; margin:0 auto;}
.ppl-seo-copy p{color:var(--ink-soft); font-size:15.5px; line-height:1.8; margin-top:18px;}
.ppl-seo-copy h3{font-family:var(--display); font-weight:800; font-size:20px; margin-top:32px; letter-spacing:-.01em;}
.ppl-seo-copy a{color:var(--blue-dark); font-weight:600; text-decoration:underline;}
.ppl-seo-copy a:hover{color:var(--blue);}

/* ---------- FAQ accordion ---------- */
.ppl-faq-list{max-width:800px; margin:44px auto 0; display:flex; flex-direction:column; gap:12px;}
.ppl-faq-item{background:#fff; border:1px solid var(--hairline); border-radius:16px; overflow:hidden;}
.ppl-faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 22px; text-align:left; font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--ink);}
.ppl-faq-q .chev{flex-shrink:0; color:var(--muted); transition:transform .2s ease;}
.ppl-faq-item.open .ppl-faq-q .chev{transform:rotate(180deg); color:var(--blue-dark);}
.ppl-faq-a{max-height:0; overflow:hidden; transition:max-height .22s ease;}
.ppl-faq-a p{padding:0 22px 20px; color:var(--muted); font-size:14.5px; line-height:1.65;}
.ppl-faq-item.open .ppl-faq-a{max-height:280px;}

/* ---------- Final CTA ---------- */
.ppl-final{text-align:center; padding:88px 0;}
.ppl-final h2{font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.03em; line-height:1.1;}
.ppl-final p{color:var(--muted); font-size:17px; margin:16px auto 0; max-width:520px; line-height:1.6;}
.ppl-final .actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .ppl-cta-grid,.ppl-why-grid,.ppl-steps4{grid-template-columns:1fr 1fr;}
  .ppl-band{grid-template-columns:1fr 1fr;} .ppl-band .stat:nth-child(3){border-left:none;}
  .ppl-step4::after{display:none;}
  .ppl-section{padding:64px 0;}
}
@media (max-width:640px){
  .ppl-container{padding:0 20px;}
  .ppl-cta-grid,.ppl-why-grid,.ppl-steps4,.ppl-band{grid-template-columns:1fr;}
  .ppl-band .stat + .stat{border-left:none; border-top:1px solid var(--hairline-soft); padding-top:18px;}
  .ppl-section{padding:48px 0;}
  .ppl-hero{padding:28px 0 20px;}
  .ppl-hero h1{font-size:29px; margin-top:14px;}
  .ppl-hero .lede{font-size:14.5px; margin-top:12px;}
  .ppl-final{padding:46px 0;}
  .ppl-final .actions{flex-direction:column;}
  .ppl-final .actions .ppl-btn{width:100%;}
}