.guides-parent { position: relative; z-index: 2; margin-top: -72px; padding-bottom: 68px; color: #4b443d; }
.guides-parent__hero { width: min(620px,90%); padding: 22px 32px 25px; background: #b4a898; color: #fff; }
.guides-parent__hero h1 { margin: 4px 0 0; color: inherit; font-size: 34px; font-weight: 600; line-height: 1.2; }
.guides-parent__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.guides-parent__breadcrumb { margin: 18px 2px 8px; color: #766c60; font-size: 13px; }
.guides-parent__breadcrumb p { margin: 0; }
.guides-parent__breadcrumb a { color: #766c60; text-underline-offset: 3px; }
.guides-parent__intro { max-width: 900px; margin: 24px 0; color: #544d46; font-size: 16px; line-height: 1.75; }
.guides-parent__tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 18px 20px; border: 1px solid rgba(184,184,184,.4); border-radius: 14px; background: #f4f4f3; }
.guides-parent__tools p { flex: 0 0 auto; margin: 0; color: #766c60; font-size: 13px; }
.guides-search { position: relative; display: block; width: min(560px,100%); }
.guides-search i { position: absolute; top: 50%; left: 16px; color: #998d80; font-size: 13px; transform: translateY(-50%); }
.guides-search input { box-sizing: border-box; width: 100%; height: 48px; padding: 10px 16px 10px 43px; border: 1px solid #c6c1ba; border-radius: 9px; outline: 0; background: #fff; color: #403a34; font-family: Raleway,sans-serif; font-size: 15px; transition: border-color .18s ease,box-shadow .18s ease; }
.guides-search input:focus { border-color: #b4a898; box-shadow: 0 0 0 3px rgba(180,168,152,.16); }
.guides-letters { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 28px; }
.guides-letters a { display: grid; width: 35px; height: 35px; border: 1px solid #c6c1ba; border-radius: 7px; background: #fff; color: #62594f; font-size: 12px; font-weight: 700; text-decoration: none; place-items: center; transition: .18s ease; }
.guides-letters a:hover { border-color: #b8b8b8; background: #f2f2f2; transform: translateY(-1px); }
.guides-groups { display: grid; gap: 30px; }
.guides-group { scroll-margin-top: 90px; }
.guides-group__header { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.guides-group__header span { display: grid; width: 38px; height: 38px; border-radius: 8px; background: #b4a898; color: #fff; font-size: 16px; font-weight: 600; place-items: center; }
.guides-group__header div { flex: 1; height: 1px; background: #e3e0dc; }
.guides-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.guide-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 17px; border: 1px solid rgba(184,184,184,.42); border-radius: 10px; background: #fff; color: #4b443d; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; box-shadow: 0 8px 22px rgba(87,78,68,.035); transition: border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.guide-card i { flex: 0 0 auto; color: #b4a898; font-size: 11px; transition: transform .18s ease; }
.guide-card:hover { border-color: #b8b8b8; background: #f2f2f2; box-shadow: 0 12px 26px rgba(87,78,68,.07); transform: translateY(-2px); }
.guide-card:hover i { transform: translateX(3px); }
.guide-card[hidden],.guides-group[hidden] { display: none; }
.guides-empty { padding: 28px; border-radius: 12px; background: #f2f2f2; color: #62594f; text-align: center; }
@media (max-width: 980px) { .guides-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .guides-parent { margin-top: -55px; padding-bottom: 42px; } .guides-parent__hero { padding: 16px 20px 18px; } .guides-parent__hero h1 { font-size: 27px; } .guides-parent__tools { align-items: stretch; flex-direction: column; gap: 10px; padding: 14px; } .guides-grid { grid-template-columns: 1fr; } .guide-card { min-height: 58px; } }