.roll-hero{padding:2.3rem 0;background:#f3efe4;text-align:center;border-bottom:4px solid #1e3a2f}
.roll-hero h1{font-size:clamp(1.25rem,3vw,1.65rem);font-weight:800;margin-bottom:.5rem;color:#1e3a2f}
.roll-hero p{color:#5a5848;font-size:.9rem;max-width:560px;margin:0 auto}
.roll-hero .trust{justify-content:center;margin-top:1.1rem}

.roll-list{padding:2.4rem 0}
.roll{display:grid;grid-template-columns:88px 1fr auto;gap:1rem;align-items:center;background:#fff;border:1px solid #d8d0b8;border-left:6px solid #1e3a2f;padding:1rem 1.1rem;margin-bottom:.7rem}
.roll.star{border-left-color:#c9a227;background:#fffdf4}
.roll-no{font-size:.75rem;font-weight:800;color:#2d6a4f;text-align:center;line-height:1.35}
.roll h2{font-size:.95rem;font-weight:800;margin-bottom:.25rem}
.roll p{font-size:.82rem;color:#5a5848}
.roll img{max-width:140px;border:1px solid #d8d0b8;margin-top:.4rem}
.btn-roll{display:inline-block;background:#1e3a2f;color:#f4ecd0!important;padding:.4rem .85rem;font-size:.78rem;font-weight:800;text-decoration:none!important;white-space:nowrap}

.dl-less{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.dl-l{background:#1e3a2f;color:#f4ecd0;padding:1rem;text-align:center}
.dl-l:nth-child(2){background:#2d6a4f}
.dl-l:nth-child(3){background:#c9a227;color:#1e3a2f}
.dl-l h3{font-size:.88rem;font-weight:800;margin-bottom:.3rem}
.dl-l p{font-size:.8rem;opacity:.85}

.dl-path{max-width:640px;margin:0 auto;background:#fff;border:2px solid #1e3a2f}
.dl-p{display:grid;grid-template-columns:72px 1fr;gap:.8rem;padding:.9rem 1.1rem;border-bottom:1px dashed #d8d0b8}
.dl-p:last-child{border-bottom:none}
.dl-p strong{font-size:.75rem;color:#2d6a4f}
.dl-p h3{font-size:.88rem;font-weight:800;margin-bottom:.15rem}
.dl-p p{font-size:.8rem;color:#5a5848}

.dl-hw{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dl-hw-col{background:#fff;border:2px solid #1e3a2f;padding:1rem}
.dl-hw-col h3{font-size:.86rem;color:#1e3a2f;margin-bottom:.5rem;font-weight:800}
.dl-hw-col li{font-size:.82rem;color:#5a5848;padding:.26rem 0}

.dl-cta{text-align:center;padding:2.3rem 0;background:#1e3a2f;color:#f4ecd0}
.dl-cta h2{font-size:1.15rem;font-weight:800;margin-bottom:.4rem}
.dl-cta p{color:#c8d4c4;margin-bottom:1rem;font-size:.9rem}

@media(max-width:768px){
  .roll{grid-template-columns:1fr}
  .dl-less,.dl-hw{grid-template-columns:1fr}
}