.guide-page { background: linear-gradient(180deg, #f7fbff 0%, #fff 42%); color: #12345a; }
.guide-article { width: min(100% - 32px, 860px); margin-inline: auto; padding-block: clamp(2.5rem, 7vw, 5rem); }
.guide-article section, .guide-header { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.guide-header { max-width: 780px; }
.guide-article h1, .guide-article h2 { color: #073e7b; font-family: 'Libre Franklin', sans-serif; line-height: 1.14; }
.guide-article h1 { margin: .35rem 0 1.35rem; font-size: clamp(2rem, 5vw, 3.55rem); letter-spacing: -.045em; }
.guide-article h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 3vw, 2rem); }
.guide-article p, .guide-article li, .guide-article dd, .guide-faq summary { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.7; }
.guide-article p { margin: 0 0 1rem; }.guide-intro { font-size: clamp(1.08rem, 2vw, 1.24rem) !important; color: #294c75; }
.guide-article ul { padding-left: 1.35rem; margin: .5rem 0 1rem; }.guide-article li + li { margin-top: .45rem; }
.guide-flow { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; margin: 1.5rem 0; padding: 1.15rem 0 0; list-style: none; counter-reset: guide-step; isolation: isolate; }
.guide-flow::before { position: absolute; z-index: -1; top: 2.03rem; right: 8.5%; left: 8.5%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #52c7a7, #0b6796 58%, #bd0d42); content: ''; opacity: .55; }
.guide-flow::after { position: absolute; z-index: 1; top: 1.66rem; left: 8.5%; width: .78rem; height: .78rem; border: 3px solid #fff; border-radius: 50%; background: #ffcd52; box-shadow: 0 0 0 3px rgba(255, 205, 82, .34), 0 0 18px 5px rgba(255, 205, 82, .8); content: ''; animation: guide-journey 10s ease-in-out infinite; }
.guide-flow li { position: relative; min-height: 6.6rem; padding: 2.85rem .42rem .5rem; color: #073e7b; font-size: .92rem; line-height: 1.35; text-align: center; font-weight: 700; }
.guide-flow li::before { position: absolute; top: .15rem; left: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; transform: translateX(-50%); border: 2px solid #d9ecf6; border-radius: 50%; background: #fff; color: #073e7b; box-shadow: 0 5px 14px rgba(22, 73, 128, .12); content: counter(guide-step); counter-increment: guide-step; font-size: .92rem; }
.guide-flow li:nth-child(2n)::before { border-color: #d7f0e9; background: #f4fffb; }.guide-flow li:nth-child(3n)::before { border-color: #f6d9e1; background: #fff8fa; }
@keyframes guide-journey { 0%, 8% { left: 8.5%; } 17%, 25% { left: 25%; } 34%, 42% { left: 41.5%; } 51%, 59% { left: 58%; } 68%, 76% { left: 74.5%; } 85%, 100% { left: calc(91.5% - .78rem); } }
@media (prefers-reduced-motion: reduce) { .guide-flow::after { animation: none; left: calc(91.5% - .78rem); } }
.guide-note, .guide-important { padding: 1rem 1.2rem; border-left: 4px solid #bd0d42; border-radius: .25rem .75rem .75rem .25rem; background: #fff5f7; color: #173f6f; font-weight: 600; }
.guide-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; }.guide-checklist div { padding: 1rem; border: 1px solid #dceaf5; border-radius: .8rem; background: #fff; }.guide-checklist dt { color: #073e7b; font-weight: 800; }.guide-checklist dd { margin: .25rem 0 0; color: #45607d; }
.guide-faq details { padding: 1rem 1.15rem; border-top: 1px solid #dce7f2; }.guide-faq details:last-child { border-bottom: 1px solid #dce7f2; }.guide-faq summary { color: #073e7b; cursor: pointer; font-weight: 700; }.guide-faq p { margin: .7rem 0 0; }
.guide-sources { padding-top: .4rem; }.guide-sources h2 { font-size: 1.15rem; }.guide-sources a { color: #075b9a; text-underline-offset: .18em; }
.guide-cta { padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: 1.25rem; background: linear-gradient(135deg, #073e7b, #1261a4); color: #fff; box-shadow: 0 14px 35px rgba(7, 62, 123, .2); }.guide-cta h2 { color: #fff; }.guide-cta p { max-width: 680px; }.guide-cta > div { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 .9rem; }.guide-cta .button { text-decoration: none; }.guide-cta .button-outline { border-color: #fff; color: #fff; }.guide-cta small { display: block; opacity: .82; line-height: 1.5; }
@media (max-width: 720px) { .guide-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .75rem; padding: 0; }.guide-flow::before { top: 2rem; right: 25%; left: 25%; }.guide-flow::after { top: 1.63rem; animation: guide-journey-mobile 7s ease-in-out infinite; }.guide-flow li { min-height: 6rem; }.guide-checklist { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .guide-flow { grid-template-columns: 1fr; }.guide-flow::before, .guide-flow::after { display: none; }.guide-flow li { min-height: auto; padding-top: 2.95rem; }.guide-cta > div .button { width: 100%; justify-content: center; } }
@keyframes guide-journey-mobile { 0%, 8% { left: 25%; } 17%, 25% { left: calc(75% - .78rem); } 34%, 42% { left: 25%; top: 8rem; } 51%, 59% { left: calc(75% - .78rem); top: 8rem; } 68%, 76% { left: 25%; top: 14.3rem; } 85%, 100% { left: calc(75% - .78rem); top: 14.3rem; } }