.guides-page { color: #173c69; }
.guides-page *, .guides-page *::before, .guides-page *::after { box-sizing: border-box; }
.guides-page [id] { scroll-margin-top: 30px; }
.guides-hero .guides-hero-link { display: inline-block; margin-top: 12px; color: white; font-size: 14px; font-weight: 700; text-underline-offset: 5px; }
.guides-section-heading { margin-bottom: 24px; }
.guides-page .guides-section-heading h2 { color: #083f89; font-size: clamp(25px, 3vw, 33px); line-height: 1.25; margin: 0 0 12px; }
.guides-page .guides-section-heading p { color: #526880; font-size: 15px; line-height: 1.7; margin: 0; max-width: 790px; }
.guides-start { padding-top: 42px; padding-bottom: 28px; }
.guides-journey { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.guides-journey li { min-width: 0; }
.guides-journey a { display: flex; gap: 12px; align-items: center; border: 1px solid #cbdcf2; border-radius: 9px; padding: 17px 15px; background: white; color: #174780; height: 100%; min-height: 80px; text-decoration: none; font-size: 13px; line-height: 1.5; font-weight: 700; transition: border-color .2s, box-shadow .2s; }
.guides-journey span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; color: #086cf4; background: #edf4ff; border-radius: 50%; font-size: 13px; }
.guides-journey a:hover { border-color: #7eacec; box-shadow: 0 5px 16px #1747800c; }
.guides-page .guides-scope { color: #62788e; font-size: 12px; line-height: 1.7; margin: 18px 0 0; }
.guides-library { padding-top: 24px; padding-bottom: 50px; }
.guides-filter-tools label { display: block; color: #224c7b; font-size: 13px; font-weight: 700; max-width: 560px; }
.guides-filter-tools input { display: block; width: 100%; border: 1px solid #b9d0ed; background: white; border-radius: 7px; padding: 13px 15px; margin-top: 9px; font: inherit; font-weight: 400; color: #173c69; min-height: 46px; }
.guides-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.guides-filters button { border: 1px solid #c7d9ef; padding: 10px 15px; border-radius: 7px; background: white; color: #174780; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.guides-filters button[aria-pressed="true"] { color: white; background: #074994; border-color: #074994; }
.guides-filter-tools[hidden], .guides-empty[hidden], .guide-card[hidden] { display: none; }
.guides-page .guides-results { margin: 24px 0 15px; font-size: 12px; color: #62788e; }
.guides-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.guide-card { position: relative; border: 1px solid #d5e3f4; background: white; border-radius: 11px; padding: 24px 25px 42px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.guide-card-icon { color: #086cf4; background: #edf4ff; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 19px; }
.guide-card-icon svg { width: 27px; height: 27px; }
.guides-page .guide-card-category { font-size: 10px; line-height: 1.5; font-weight: 700; color: #5d748e; margin: 0 0 10px; }
.guides-page .guide-card h3 { font-size: 21px; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 12px; color: #083f89; }
.guide-card h3 a { color: inherit; text-decoration: none; }
.guide-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 11px; }
.guides-page .guide-card > p:not(.guide-card-category) { font-size: 14px; line-height: 1.7; color: #526880; margin: 0; }
.guide-card-arrow { position: absolute; right: 23px; bottom: 13px; font-size: 22px; color: #086cf4; }
.guide-card:hover, .guide-card:focus-within { border-color: #82b3f6; box-shadow: 0 8px 20px #16457712; transform: translateY(-3px); }
.guides-page .guides-empty { padding: 24px; border: 1px dashed #b9d0ed; background: white; border-radius: 8px; color: #526880; font-size: 14px; }
.guides-tips { padding: 42px 0 48px; background: white; border-top: 1px solid #dce7f5; border-bottom: 1px solid #dce7f5; }
.guides-tip-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.guides-page .guides-tip-grid article { border-top: 3px solid #086cf4; padding-top: 17px; display: flex; flex-direction: column; }
.guides-page .guides-tip-grid h3 { font-size: 19px; line-height: 1.4; color: #083f89; margin: 0 0 12px; }
.guides-page .guides-tip-grid p { color: #526880; font-size: 13px; line-height: 1.75; margin: 0 0 18px; }
.guides-tip-grid a { margin-top: auto; color: #074994; font-size: 12px; font-weight: 700; text-underline-offset: 4px; }
.guides-help { padding-top: 40px; padding-bottom: 30px; display: flex; gap: 30px; align-items: center; justify-content: space-between; }
.guides-page .guides-help h2 { margin: 0 0 12px; color: #083f89; font-size: 27px; line-height: 1.3; }
.guides-page .guides-help p { margin: 0; color: #526880; font-size: 14px; line-height: 1.7; }
.guides-help > a { border: 1px solid #b9d0ed; padding: 14px 20px; color: #074994; background: white; border-radius: 7px; font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.guides-reading { padding-bottom: 42px; }
.guides-page .guides-reading h2 { margin: 0 0 12px; font-size: 17px; color: #234b77; }
.guides-reading a { display: block; width: fit-content; margin-top: 9px; color: #526880; font-size: 12px; line-height: 1.7; text-underline-offset: 3px; }
.guide-hero .guide-summary { font-size: 17px; color: #eff5ff; line-height: 1.75; max-width: 820px; margin: 20px 0 0; }
.guide-console-path { background: #edf5ff; border-left: 3px solid #086cf4; padding: 20px 22px; margin-bottom: 30px; border-radius: 0 8px 8px 0; }
.guide-console-path span { display: block; color: #526880; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.guides-page .guide-console-path p { color: #104987; font-size: 15px; line-height: 1.75; font-weight: 700; margin: 9px 0 0; }
.guide-context { padding: 20px 22px; background: #f4f7fb; color: #526880; font-size: 12px; line-height: 1.8; border-radius: 8px; margin-top: 30px; }
.guide-next { margin-top: 24px; padding-top: 24px; border-top: 1px solid #d5e3f4; display: flex; justify-content: space-between; gap: 24px; }
.guide-next a { color: #074994; font-size: 13px; line-height: 1.7; text-underline-offset: 4px; }
.guide-next a:last-child { text-align: right; max-width: 65%; }
.guides-page a:focus-visible, .guides-page button:focus-visible, .guides-page input:focus-visible { outline: 3px solid #f5a623; outline-offset: 3px; }
.guide-card h3 a:focus-visible { outline: none; }
.guide-card h3 a:focus-visible::after { outline: 3px solid #f5a623; outline-offset: -3px; }
@media (max-width: 1050px) { .guides-journey { grid-template-columns: repeat(3,minmax(0,1fr)); } .guides-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .guides-tip-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) { .guides-start { padding-top: 30px; } .guides-journey { grid-template-columns: 1fr; gap: 8px; } .guides-journey a { min-height: 0; padding: 12px 15px; } .guides-grid, .guides-tip-grid { grid-template-columns: 1fr; } .guides-help { align-items: stretch; flex-direction: column; gap: 20px; } .guides-help > a { text-align: center; } .guide-next { flex-direction: column; gap: 15px; } .guide-next a:last-child { max-width: none; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .guide-card, .guides-journey a { transition: none; } }