.djb-article {


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


    color: #1f2937;


    line-height: 1.75;


    max-width: 880px;


    margin: 0 auto;


    padding: 0 16px;


  }


  .djb-article h1 {


    font-size: 2.4rem;


    font-weight: 800;


    line-height: 1.15;


    color: #0f172a;


    margin-bottom: 0.35em;


    letter-spacing: -0.02em;


  }


  .djb-article .lead {


    font-size: 1.15rem;


    color: #475569;


    margin-bottom: 1.5rem;


    max-width: 720px;


  }


  .djb-article h2 {


    font-size: 1.55rem;


    font-weight: 700;


    color: #0f172a;


    margin-top: 2.6rem;


    margin-bottom: 1rem;


    padding-bottom: 0.35rem;


    border-bottom: 2px solid #e2e8f0;


  }


  .djb-article h3 {


    font-size: 1.2rem;


    font-weight: 700;


    color: #1e293b;


    margin-top: 1.6rem;


    margin-bottom: 0.6rem;


  }


  .djb-article p {


    margin-bottom: 1.1rem;


  }


  .djb-article ul, .djb-article ol {


    margin-bottom: 1.2rem;


    padding-left: 1.4rem;


  }


  .djb-article li {


    margin-bottom: 0.45rem;


  }


  .djb-article img {


    max-width: 100%;


    height: auto;


    border-radius: 12px;


    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);


    display: block;


  }


  .djb-article figure {


    margin: 1.6rem 0;


  }


  .djb-article figcaption {


    font-size: 0.875rem;


    color: #64748b;


    text-align: center;


    margin-top: 0.6rem;


    font-style: italic;


  }





  /* Hero */


  .hero-wrap {


    position: relative;


    border-radius: 16px;


    overflow: hidden;


    margin: 1.5rem 0 2rem;


  }


  .hero-wrap img {


    width: 100%;


    border-radius: 16px;


    box-shadow: none;


  }


  .hero-caption {


    text-align: center;


    font-size: 0.9rem;


    color: #64748b;


    margin-top: 0.5rem;


  }





  /* Two/three column grids */


  .djb-grid-2 {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 18px;


    margin: 1.4rem 0;


  }


  .djb-grid-3 {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 16px;


    margin: 1.4rem 0;


  }


  @media (max-width: 640px) {


    .djb-grid-2, .djb-grid-3 {


      grid-template-columns: 1fr;


    }


    .djb-article h1 { font-size: 1.9rem; }


  }





  /* Finish cards */


  .finish-card {


    background: #fff;


    border: 1px solid #e2e8f0;


    border-radius: 14px;


    padding: 14px;


    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);


    transition: transform .15s ease, box-shadow .15s ease;


  }


  .finish-card:hover {


    transform: translateY(-3px);


    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);


  }


  .finish-card img {


    border-radius: 10px;


    margin-bottom: 0.75rem;


    aspect-ratio: 4 / 3;


    object-fit: cover;


  }


  .finish-card h4 {


    font-size: 1rem;


    font-weight: 700;


    color: #0f172a;


    margin: 0 0 0.35rem;


  }


  .finish-card p {


    font-size: 0.9rem;


    color: #475569;


    margin: 0;


    line-height: 1.55;


  }





  /* Process steps */

  .djb-article ol.process-list,

  .djb-article .process-list {

    list-style: none !important;

    padding-left: 0 !important;

    margin-left: 0 !important;

    counter-reset: step;

  }

  .djb-article ol.process-list li,

  .djb-article .process-list li {

    position: relative;

    padding-left: 3rem !important;

    margin-bottom: 1rem;

    min-height: 2.2rem;

    list-style: none !important;

  }

  .djb-article ol.process-list li::before,

  .djb-article .process-list li::before {

    content: attr(data-n) !important;

    position: absolute;

    left: 0;

    top: 0;

    width: 2rem;

    height: 2rem;

    background: #0284c7;

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.9rem;

    z-index: 1;

  }



  /* Tip / warning boxes */


  .djb-box {


    background: #f8fafc;


    border-left: 4px solid #0284c7;


    padding: 1rem 1.2rem;


    border-radius: 0 12px 12px 0;


    margin: 1.4rem 0;


  }


  .djb-box strong {


    color: #0369a1;


  }


  .djb-cta {


    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);


    color: #fff;


    padding: 2rem;


    border-radius: 16px;


    text-align: center;


    margin: 2.5rem 0 1rem;


  }


  .djb-cta h3 {


    color: #fff;


    margin-top: 0;


    font-size: 1.4rem;


  }


  .djb-cta p {


    color: #cbd5e1;


    margin-bottom: 1.2rem;


  }


  .djb-cta a {


    display: inline-block;


    background: #0284c7;


    color: #fff;


    text-decoration: none;


    padding: 0.75rem 1.6rem;


    border-radius: 999px;


    font-weight: 600;


    transition: background .15s ease;


  }


  .djb-cta a:hover {


    background: #0ea5e9;


  }
.djb-article .djb-article-title{font-size:2.4rem;font-weight:800;line-height:1.15;color:#0f172a;margin-bottom:.35em;letter-spacing:-.02em;}
.djb-related{margin:2.5rem 0 1rem;padding:1.2rem 1.4rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;}
.djb-related h3{margin:0 0 .6rem;font-size:1.15rem;color:#0f172a;}
.djb-related ul{margin:0;padding-left:1.2rem;}
.djb-related li{margin-bottom:.4rem;}
.djb-related a{color:#1f4e9c;text-decoration:none;}
.djb-related a:hover{text-decoration:underline;}