@import url('./styles.css?v=20260925-guides');

.guide-page {
    min-height: 100vh;
    background: #f7f9f5;
    color: #111513;
}

.guide-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    min-height: 96px;
    padding: 0 7vw;
    background: rgba(250,251,248,.97);
    border-bottom: 1px solid rgba(17,21,19,.1);
}

.guide-brand {
    display: inline-flex;
    align-items: center;
}

.guide-brand img {
    display: block;
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.guide-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
}

.guide-nav a {
    padding: 6px 0;
    color: #273129;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.guide-nav a[aria-current="page"] {
    color: #5e7d00;
    border-bottom: 2px solid #c8f50a;
}

.guide-nav a:hover,
.guide-nav a:focus-visible {
    color: #5e7d00;
}

.guide-main {
    overflow: hidden;
}

.guide-hero {
    position: relative;
    padding: clamp(80px,11vw,150px) 7vw clamp(66px,9vw,110px);
    color: #f8faf5;
    background: #111a17;
}

.guide-hero::after {
    position: absolute;
    right: -12vw;
    bottom: -19vw;
    width: min(54vw,680px);
    aspect-ratio: 1;
    border: 1px solid rgba(200,245,10,.42);
    border-radius: 50%;
    content: "";
}

.guide-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.guide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #c8f50a;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.guide-kicker::before {
    width: 26px;
    height: 2px;
    background: currentColor;
    content: "";
}

.guide-hero h1 {
    max-width: 830px;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(48px,7vw,96px);
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: .9;
}

.guide-hero h1 em {
    color: #c8f50a;
    font-style: normal;
}

.guide-hero p:last-child {
    max-width: 620px;
    margin: 29px 0 0;
    color: rgba(255,255,255,.78);
    font-size: clamp(16px,1.55vw,20px);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.65;
}

.guide-content {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(240px,.34fr);
    gap: clamp(42px,8vw,130px);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(70px,9vw,130px) 7vw;
}

.guide-article {
    min-width: 0;
}

.guide-article > section + section {
    margin-top: clamp(55px,7vw,94px);
}

.guide-article h2 {
    max-width: 650px;
    margin: 0 0 23px;
    color: #111513;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(31px,4vw,54px);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .96;
}

.guide-article p {
    max-width: 710px;
    margin: 0;
    color: #37423a;
    font-size: 17px;
    letter-spacing: -.015em;
    line-height: 1.75;
}

.guide-article p + p {
    margin-top: 16px;
}

.guide-steps {
    display: grid;
    gap: 0;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #cbd1ca;
}

.guide-steps li {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid #cbd1ca;
}

.guide-step-number {
    color: #7c9f00;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.guide-steps h3 {
    margin: 0 0 8px;
    color: #111513;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(21px,2.2vw,28px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
}

.guide-steps p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
}

.guide-note {
    margin: 31px 0 0;
    padding: 20px 23px;
    border-left: 4px solid #c8f50a;
    background: #e8ede5;
}

.guide-note strong {
    display: block;
    margin-bottom: 5px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.guide-note p {
    font-size: 14px;
    line-height: 1.6;
}

.guide-aside {
    align-self: start;
    position: sticky;
    top: 26px;
    padding: 25px 24px;
    color: #f8faf5;
    background: #17211d;
}

.guide-aside .eyebrow {
    margin-bottom: 16px;
    color: #c8f50a;
}

.guide-aside h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: .98;
}

.guide-aside p {
    margin: 15px 0 0;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    line-height: 1.6;
}

.guide-aside-links {
    display: grid;
    gap: 0;
    margin-top: 23px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.guide-aside-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
    color: #c8f50a;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.guide-aside-links a:hover,
.guide-aside-links a:focus-visible {
    color: #fff;
}

.guide-aside .button {
    width: 100%;
    margin-top: 23px;
}

.guide-next {
    padding: clamp(58px,8vw,98px) 7vw;
    color: #f8faf5;
    background: #101513;
}

.guide-next-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(280px,.85fr);
    gap: 34px;
    max-width: 1240px;
    margin: 0 auto;
}

.guide-next .eyebrow {
    margin-bottom: 16px;
    color: #c8f50a;
}

.guide-next h2 {
    max-width: 600px;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(35px,4.6vw,65px);
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: .91;
}

.guide-next-card {
    align-self: center;
    padding: 26px 28px;
    color: #111513;
    background: #c8f50a;
}

.guide-next-card h3 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: .98;
}

.guide-next-card p {
    margin: 13px 0 20px;
    font-size: 15px;
    line-height: 1.55;
}

.guide-next-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.guide-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 27px 7vw;
    color: #fff;
    background: #101513;
    border-top: 1px solid rgba(255,255,255,.14);
}

.guide-footer img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.guide-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
}

.guide-footer a {
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.guide-footer a:hover,
.guide-footer a:focus-visible {
    color: #c8f50a;
}

.guide-footer p {
    margin: 0;
    color: rgba(255,255,255,.5);
    font-size: 12px;
}

@media (max-width: 800px) {
    .guide-header {
        grid-template-columns: auto auto;
        gap: 15px;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .guide-header .language-toggle {
        justify-self: end;
    }

    .guide-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 8px 20px;
        padding-top: 8px;
        border-top: 1px solid rgba(17,21,19,.1);
    }

    .guide-content,
    .guide-next-inner {
        grid-template-columns: 1fr;
    }

    .guide-aside {
        position: static;
    }

    .guide-footer {
        grid-template-columns: auto 1fr;
    }

    .guide-footer p {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .guide-header {
        min-height: 0;
        padding: 8px 26px 16px;
    }

    .guide-brand img {
        width: 68px;
        height: 68px;
    }

    .guide-nav {
        gap: 5px 16px;
    }

    .guide-nav a {
        font-size: 13px;
    }

    .guide-hero,
    .guide-content,
    .guide-next {
        padding-right: 26px;
        padding-left: 26px;
    }

    .guide-hero {
        padding-top: 70px;
        padding-bottom: 66px;
    }

    .guide-hero h1 {
        font-size: clamp(42px,12vw,60px);
    }

    .guide-content {
        padding-top: 62px;
        padding-bottom: 62px;
    }

    .guide-article p {
        font-size: 16px;
    }

    .guide-steps li {
        grid-template-columns: 45px minmax(0,1fr);
        gap: 11px;
    }

    .guide-aside,
    .guide-next-card {
        padding: 25px 22px;
    }

    .guide-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 26px;
    }

    .guide-footer nav {
        justify-content: flex-start;
    }
}