:root{
      --bg:#ffffff;
      --panel: #ffffff;
      --brand:#f5c84b;
      --brand-2:#76e4c5;
      --text:#ffffff;
      --muted:#171417;
      --border:#ffffff;
      --shadow:0 10px 30px rgba(2,6,23,.45);
      --radius:18px;
      --max:1120px;
    }
    
    .social {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }


    .title, h2, p {
      color:#171417;
    }
  
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:16px;font-weight: 400}
    a{color: #808080;}
    img{ width: 100%;height: 100%;object-fit: cover;border-radius: 12px;}
    .wrap{max-width:var(--max);margin:auto;padding:28px}
    header{display:flex;align-items:center;gap:16px;justify-content:space-between}
    .logo{display:flex;gap:14px}
    .logo img{margin-top: 10px;width:44px;height:44px;border-radius:8px}
    .title h1{ font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:70px;color: #000000;line-height:1.1;margin:0}
    .title p{margin:6px 0 0;color:var(--muted)}
    .standout {font-size: 2em}
    .standout-text {font-size: 30px; color: #171417;margin-left: 20px;
    }
    .bigger {font-size: 4em;}

    .hero{margin:28px 0;display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
    .card{border-radius:var(--radius);box-shadow:var(--shadow)}
    .card .inner{padding:22px; margin: 30px 0px;}
    .badge{display:inline-block;color: #000000;font-weight:600;letter-spacing:.02em;font-size:12px}

    h2{color: #000000;font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:22px;margin:0 0 12px; margin-top: 20px;}
    .lead{font-size:18px;font-weight: 600;color:var(--muted);font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}

    .callout{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;margin:28px 0}
    .checklist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    
@media (max-width: 900px) {
  .checklist {
    grid-template-columns: 1fr 1fr; /* 2 per row on tablet/small screens */
  }
}

@media (max-width: 600px) {
  .checklist {
    grid-template-columns: 1fr; /* single column on mobile */
  }
}

    .feature{background:var(--panel);color: #171417; border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:center}
    .feature img{width:44px;height:44px;border-radius:8px}
    .feature b{display:block}
    .feature.steps {padding: 10px;border: 3px solid black;}

    .cta{display:flex;gap:12px;flex-wrap:wrap}
    .btn{appearance:none;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:700}


    .primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));background: linear-gradient(
    135deg,
    #3d155f 0%,
    #5b2a8c 40%,
    #4a90e2 100%
  );
  color: #fff; padding: 12px 20px; border: none; border-radius: 12px; font-weight: 600;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;}

  .primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(61, 21, 95, 0.4);
}
    
  
  .ghost{background:transparent;color: #171417;border:1px solid var(--border)}

  .back-btn{
    color: #2b2c2c;
    margin: 0px 0px 30px 0px;
    font-size: 14px;
  }

    footer{margin:36px 0 8px;color:var(--muted);font-size:14px;text-align:center}

    @media print{
      body{background:#fff;color:#111}
      .card,.feature{box-shadow:none;border-color:#ddd}
      a{text-decoration:none;color:#111}
      header,.cta{page-break-inside:avoid}
    }
    @media (max-width:900px){
      .hero,.callout{grid-template-columns:1fr}
      .gallery{grid-template-columns:repeat(2,1fr)}
      header{flex-direction:column;gap:10px}
    }

    .pin-mobile{ display:none; }
@media (max-width: 900px){
  .pin-desktop{ display:none; }
  .pin-mobile{ display:block; }
}