.page-guide { display: grid; gap: 24px; max-width: 1240px; margin: 0 auto; }
.guide-hero { display: flex; justify-content: space-between; gap: 32px; align-items: center; padding: 38px 42px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #13243a, #1f4d78); box-shadow: 0 18px 40px rgba(15, 35, 58, .18); }
.guide-hero h1 { margin: 4px 0 10px; max-width: 720px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; }
.guide-hero p:last-child { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.05rem; }
.guide-hero-icon { font-size: 76px; opacity: .22; }
.guide-quick-grid, .guide-role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.guide-quick-grid article { position: relative; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.guide-quick-grid article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #2e74b5; font-weight: 800; }
.guide-quick-grid h2, .guide-role-grid h2 { margin: 14px 0 6px; font-size: 1.05rem; }
.guide-quick-grid p, .guide-role-grid p, .guide-section p { margin: 0; color: var(--muted); line-height: 1.58; }
.guide-section { padding: 28px; }
.guide-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.guide-columns h3, .guide-feature-list h3 { margin: 0 0 6px; font-size: .98rem; }
.guide-feature-list { display: grid; gap: 0; }
.guide-feature-list article { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--border); }
.guide-feature-list article:first-child { border-top: 0; }
.guide-feature-list article > span { color: #2e74b5; }
.guide-definition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guide-definition-grid > div { padding: 18px; border-radius: 12px; background: var(--surface-subtle); }
.guide-definition-grid strong { display: block; margin-bottom: 5px; color: var(--text); }
.guide-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 16px; border: 1px solid #e2b84e; border-radius: 12px; background: #fff9e8; color: #5f4700; }
.guide-note p { color: inherit; }
.guide-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: guide-step; }
.guide-steps li { display: grid; grid-template-columns: minmax(190px, .7fr) 1.3fr; gap: 18px; padding: 14px 16px; border-radius: 10px; background: var(--surface-subtle); counter-increment: guide-step; }
.guide-steps li strong:before { content: counter(guide-step) ". "; color: #2e74b5; }
.guide-steps span { color: var(--muted); }
.guide-role-grid { grid-template-columns: repeat(3, 1fr); }
.guide-role-grid article { padding: 24px; }
.guide-role-grid article > span { color: #2e74b5; font-size: 32px; }
.guide-final { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 28px; }
.guide-final h2 { margin: 4px 0 6px; }
.guide-final p:last-child { max-width: 760px; margin: 0; color: var(--muted); }
@media (max-width: 900px) { .guide-quick-grid { grid-template-columns: repeat(2, 1fr); } .guide-columns, .guide-definition-grid, .guide-role-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .guide-hero { padding: 28px 24px; } .guide-hero-icon { display: none; } .guide-quick-grid { grid-template-columns: 1fr; } .guide-section { padding: 22px 18px; } .guide-steps li { grid-template-columns: 1fr; gap: 5px; } .guide-final { align-items: flex-start; flex-direction: column; } }