:root{
  --navy:#143489;
  --teal:#509C98;
  --card-bg:#f6f7fb;
  --page-bg:#ffffff;
  --text:#1f2937;
  --muted:#5b6472;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background:var(--page-bg);
  color:var(--text);
  line-height:1.5;
}
b, strong{
  color:var(--navy);
}

/* TOP BAR */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 40px;
  max-width:1400px;
  margin:0 auto;
}
.topbar img{
  height:40px;
}

/* PAGE TITLE */
.page-title{
  max-width:1400px;
  margin:40px auto 0;
  padding:0 40px;
  text-align:center;
}
.page-title h1{
  font-size:52px;
  font-weight:800;
  color:var(--navy);
  letter-spacing:-0.5px;
  text-align:center;
}
.page-title p{
  margin-top:12px;
  color:var(--muted);
  font-size:16px;
}

/* TABLE OF CONTENTS */
nav.toc{
  max-width:1400px;
  margin:24px auto 0;
  padding:0 40px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
nav.toc a{
  text-decoration:none;
  color:var(--navy);
  background:var(--card-bg);
  padding:8px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  transition:.15s;
}
nav.toc a:hover{
  background:var(--teal);
  color:#fff;
}

main{
  max-width:1400px;
  margin:32px auto 60px;
  padding:0 40px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* STEP CARD */
.step-card{
  background:var(--card-bg);
  border-radius:20px;
  padding:40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  box-shadow:0 4px 16px rgba(20,52,137,.08), 0 1px 3px rgba(20,52,137,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(20,52,137,.14), 0 3px 8px rgba(20,52,137,.08);
}

.step-content h2{
  color:var(--teal);
  font-size:38px;
  font-weight:800;
  line-height:1.15;
  margin-bottom:20px;
  max-width:480px;
}
.step-content p.desc{
  color:var(--text);
  margin-bottom:18px;
  font-size:16px;
}
.step-content ol{
  padding-left:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.step-content ol li{
  font-size:16px;
  color:var(--text);
}

.note{
  background:#eaf2f1;
  border-left:4px solid var(--teal);
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  color:var(--navy);
  margin-top:16px;
}

/* MEDIA / VIDEO PLACEHOLDER - phone frame */
.step-media{
  background:#0f1e3d;
  border-radius:32px;
  overflow:hidden;
  aspect-ratio:9/16;
  max-width:260px;
  max-height:498px;
  margin:0 auto;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:8px solid #0f1e3d;
  box-shadow:0 16px 36px rgba(20,52,137,.22);
}
.step-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
}
.step-media.video-pending video{
  display:none;
}
.placeholder{
  display:none;
  text-align:center;
  color:#9fb3d9;
  padding:20px;
}
.step-media.video-pending .placeholder{
  display:block;
}
.placeholder .play-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
}
.placeholder .play-icon:after{
  content:'';
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
.placeholder small{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#7288ab;
}

/* FOOTER */
footer{
  text-align:center;
  padding:40px 20px 32px;
  margin-top:20px;
  background:var(--navy);
  color:#fff;
  font-size:13px;
}
footer strong{
  color:var(--teal);
}

@media (max-width:1024px){
  .step-card{
    padding:32px;
    gap:28px;
  }
  .page-title h1{ font-size:42px; }
  .step-content h2{ font-size:32px; }
}

@media (max-width:760px){
  .topbar,
  .page-title,
  nav.toc,
  main{
    padding-left:20px;
    padding-right:20px;
  }
  .step-card{
    grid-template-columns:1fr;
    padding:28px 24px;
  }
  .page-title h1{ font-size:32px; }
  .step-content h2{ font-size:26px; max-width:none; }
}

@media (max-width:420px){
  .page-title h1{ font-size:26px; }
  .step-media{ max-width:220px; max-height:392px; }
}