/* ===== Landing page SEO (bimbel-tni, bimbel-polri, dll) ===== */

/* breadcrumb inside dark hero */
.lp-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;margin-bottom:20px}
.lp-crumb a{color:rgba(255,255,255,.62);text-decoration:none}
.lp-crumb a:hover{color:#fff}
.lp-crumb span{color:rgba(255,255,255,.38)}

/* hero kicker note */
.hero-kicker-note{margin-left:10px}
.lp-hero .hero-copy{padding-bottom:0}
.lp-hero .hero-lead{max-width:560px}

/* form card as hero right column */
.lp-hero-aside{position:relative;z-index:3;align-self:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);border-radius:26px;padding:27px;backdrop-filter:blur(9px);box-shadow:0 26px 70px rgba(0,0,0,.35)}
.lp-form-head{margin-bottom:17px}
.lp-form-head h2{margin:0 0 6px;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.8px;line-height:1.15;color:#fff;font-weight:800}
.lp-form-head h2 em{font-style:normal;color:#f5cf62}
.lp-form-head p{margin:0;font-size:13px;line-height:1.7;color:rgba(255,255,255,.62)}

/* target strip links (landing pages cross-link each other) */
.target-strip a{font-size:12px;letter-spacing:1.2px;font-weight:700;color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s}
.target-strip a:hover{color:#fff}
.target-strip span{white-space:nowrap}

/* 4-step preparation flow */
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.lp-step{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.lp-step>span{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:11px;background:var(--red);color:#fff;font-size:12px;font-weight:800;margin-bottom:13px}
.lp-step h3{margin:0 0 7px;font-size:15.5px;letter-spacing:-.3px}
.lp-step p{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}

/* bottom CTA: actions column instead of form */
.lp-cta-actions{display:flex;flex-direction:column;gap:13px;align-self:center;position:relative;z-index:2}
.lp-cta-actions .btn{font-size:15px}
.lp-cta-actions small{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.7}

/* related block spacing on landing pages */
.lp-related{background:#fff}

@media (max-width:900px){
  .lp-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .lp-steps{grid-template-columns:1fr}
  .lp-hero-aside{padding:21px;border-radius:20px}
}