.guides-hero,
.guide-article-hero {
    background:
        radial-gradient(circle at 83% 15%, rgba(91, 58, 246, .14), transparent 27%),
        linear-gradient(135deg, #f8f7ff 0%, #fff 52%, #f0f8ff 100%);
    border-bottom: 1px solid #e4e8f2;
}

.guides-hero .container,
.guide-article-hero .container {
    padding-top: clamp(42px, 7vw, 88px);
    padding-bottom: clamp(44px, 7vw, 82px);
}

.guides-hero nav,
.guide-article-hero nav {
    display: flex;
    margin-bottom: 38px;
    align-items: center;
    gap: 10px;
    color: #66708a;
    font-size: .78rem;
}

.guides-hero nav a,
.guide-article-hero nav a { color: #5635f5; }
.guides-eyebrow { color: #5b3df5; font-size: .72rem; font-weight: 800; letter-spacing: .11em; }
.guides-hero h1,
.guide-article-hero h1 { max-width: 900px; margin: 15px 0 18px; color: #09142e; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -.055em; }
.guide-article-hero h1 { max-width: 980px; font-size: clamp(2.25rem, 4.2vw, 4.35rem); }
.guides-hero > .container > p,
.guide-article-hero > .container > p { max-width: 760px; margin: 0; color: #4f5d7c; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.75; }
.guides-review,
.guide-byline { display: flex; width: fit-content; margin-top: 27px; align-items: center; gap: 11px; }
.guides-review > span,
.guide-byline > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: #5734f5; font-weight: 800; }
.guides-review p,
.guide-byline p { display: grid; margin: 0; gap: 2px; color: #1a2540; font-size: .82rem; }
.guides-review small,
.guide-byline small { color: #6a7690; }

.guides-list { padding: clamp(55px, 7vw, 92px) 0; }
.guides-list > .container > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); margin-bottom: 30px; align-items: end; gap: 30px; }
.guides-list header span { color: #5b3df5; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.guides-list header h2 { margin: 7px 0 0; color: #0b1530; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; }
.guides-list header p { margin: 0; color: #63708a; line-height: 1.7; }
.guides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #dfe4ef; border-left: 1px solid #dfe4ef; }
.guides-grid article { position: relative; display: grid; min-height: 250px; padding: 30px; grid-template-columns: 48px 1fr; grid-template-rows: 1fr auto; gap: 15px 20px; border-right: 1px solid #dfe4ef; border-bottom: 1px solid #dfe4ef; background: #fff; transition: background .2s ease; }
.guides-grid article:hover { background: #faf9ff; }
.guides-card-number { color: #8b78ef; font-family: var(--font-mono); font-size: .72rem; }
.guides-grid article small { color: #6c7690; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.guides-grid article h2 { margin: 8px 0 11px; font-size: 1.18rem; line-height: 1.3; }
.guides-grid article h2 a { color: #0c1733; }
.guides-grid article p { margin: 0; color: #68738c; font-size: .86rem; line-height: 1.65; }
.guides-card-link { grid-column: 2; color: #5838f4; font-size: .8rem; font-weight: 750; }
.guides-card-link b { margin-left: 5px; }

.guide-article-layout { display: grid; padding-top: 58px; padding-bottom: 80px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: clamp(36px, 6vw, 90px); }
.guide-article-body > section { display: grid; padding: 0 0 46px; grid-template-columns: 50px 1fr; gap: 20px; }
.guide-article-body > section + section { padding-top: 45px; border-top: 1px solid #e1e5ee; }
.guide-section-number { color: #755ef2; font-family: var(--font-mono); font-size: .75rem; }
.guide-article-body h2 { margin: -7px 0 18px; color: #111b35; font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.035em; }
.guide-article-body p { color: #495872; font-size: .98rem; line-height: 1.85; }
.guide-article-body ul { display: grid; margin: 20px 0 0; padding: 0; gap: 9px; list-style: none; }
.guide-article-body li { position: relative; padding-left: 24px; color: #34415d; line-height: 1.65; }
.guide-article-body li::before { position: absolute; top: .7em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: #5e3cf5; content: ""; }
.guide-sources a { color: #5436e8; text-decoration: underline; text-decoration-color: #c8befd; text-underline-offset: 3px; }
.guide-editorial-note { padding: 25px 28px; border: 1px solid #dcd6ff; border-radius: 16px; background: #f7f5ff; }
.guide-editorial-note strong { color: #21184d; }
.guide-editorial-note p { margin-bottom: 0; font-size: .86rem; }
.guide-editorial-note a { display: inline-flex; margin-top: 14px; color: #5738ec; font-size: .76rem; font-weight: 750; }
.guide-related { position: sticky; top: 24px; padding: 24px; border: 1px solid #dfe4ee; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(21, 31, 61, .07); }
.guide-related > span { color: #6040f5; font-size: .67rem; font-weight: 800; letter-spacing: .1em; }
.guide-related > h2 { margin: 7px 0 18px; color: #101a35; font-size: 1.25rem; }
.guide-related > a:not(.guide-all-tools) { display: grid; padding: 14px 0; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; border-top: 1px solid #edf0f5; }
.guide-related > a > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #5b3df5; background: #f0edff; }
.guide-related svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.guide-related p { display: grid; min-width: 0; margin: 0; gap: 3px; }
.guide-related strong { color: #111b36; font-size: .78rem; }
.guide-related small { overflow: hidden; color: #78829a; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.guide-related b { color: #6143ed; }
.guide-all-tools { display: block; margin-top: 16px; padding: 12px; border-radius: 10px; color: #fff; background: #5734f5; font-size: .78rem; font-weight: 750; text-align: center; }

@media (max-width: 800px) {
    .guides-list > .container > header,
    .guide-article-layout { grid-template-columns: 1fr; }
    .guides-grid { grid-template-columns: 1fr; }
    .guide-related { position: static; }
}

@media (max-width: 520px) {
    .guides-grid article { padding: 23px 18px; grid-template-columns: 32px 1fr; }
    .guide-article-body > section { grid-template-columns: 32px 1fr; gap: 10px; }
}

.methodology-body { padding-top: 54px; padding-bottom: 80px; }
.methodology-body > section { display: grid; padding: 42px 0; grid-template-columns: 50px minmax(0, 1fr); gap: 24px; border-bottom: 1px solid #e1e5ee; }
.methodology-body > section > span { color: #745ff0; font-family: var(--font-mono); font-size: .72rem; }
.methodology-body h2 { margin: -8px 0 18px; color: #111b35; font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.methodology-body p { max-width: 920px; color: #526079; line-height: 1.8; }
.methodology-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #e0e4ed; border-left: 1px solid #e0e4ed; }
.methodology-cards article { padding: 23px; border-right: 1px solid #e0e4ed; border-bottom: 1px solid #e0e4ed; background: #fafbfe; }
.methodology-cards h3 { margin: 0 0 9px; color: #17213b; font-size: .92rem; }
.methodology-cards p { margin: 0; font-size: .78rem; }
.methodology-cards p + p,
.methodology-cards code + p { margin-top: 12px; }
.methodology-cards code { display: block; overflow-x: auto; margin: 12px 0; padding: 11px; border-radius: 8px; color: #36218d; background: #efecff; font-size: .72rem; }
.methodology-contact { display: inline-flex; margin-top: 15px; color: #5838ee; font-weight: 750; }
@media (max-width: 720px) { .methodology-cards { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .methodology-body > section { grid-template-columns: 30px 1fr; gap: 10px; } }