/* /guides/ index styles. */


body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

.page-header {
    background:
        radial-gradient(720px 380px at 88% -20%, rgba(223,143,171,0.14), transparent 60%),
        linear-gradient(160deg, #d6e9f8 0%, #eaf3fb 50%, #FBFAFE 80%);
    border-bottom: 1px solid var(--color-border);
}
.page-header-inner { max-width: var(--max-width); margin: 0 auto; padding: 4.5rem 2rem 3.5rem; }
.page-header h1 { font-family: var(--font-display); font-size: 2.8rem; letter-spacing: -0.02em; margin-bottom: 1rem; }
.page-header .subtitle { font-size: 1.15rem; color: var(--color-text-secondary); max-width: 660px; line-height: 1.7; }

.content { max-width: var(--max-width); margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.guide-card {
    display: block; text-decoration: none;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 16px; padding: 2rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.guide-card:hover {
    border-color: #c3d8ec;
    box-shadow: 0 14px 40px rgba(47, 111, 181, 0.10);
    transform: translateY(-3px);
}
.guide-tag {
    display: inline-block; font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-accent-strong);
    font-weight: 600; margin-bottom: 0.75rem;
}
.guide-card h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: 0.6rem; line-height: 1.3; }
.guide-card p { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.65; }
.guide-card .read-more { display: inline-block; margin-top: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--color-accent-strong); }

.guides-note {
    /* centred, not left-flush: a bare max-width here left a 256px rag on the right */
    margin: 2.5rem auto 0; max-width: 780px;
    background: var(--color-accent-soft); border: 1px solid #cfe4f6;
    border-radius: 16px; padding: 1.75rem 2rem;
}
.guides-note p { color: var(--color-text-secondary); line-height: 1.7; font-size: 0.98rem; }
.guides-note a { color: var(--color-accent-strong); text-decoration: none; font-weight: 600; }
.guides-note a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .page-header-inner { padding: 3rem 1.5rem 2.5rem; }
    .page-header h1 { font-size: 2.1rem; }
    .content { padding: 2.5rem 1.5rem 3rem; }
    .guide-grid { grid-template-columns: 1fr; }
    .nav-inner { padding: 0.9rem 1.5rem; }
    .nav-links { gap: 1.25rem; }
}
@media (max-width: 480px) {
    .nav-links { gap: 0.85rem; }
    .nav-links a { font-size: 0.82rem; }
    .nav-links li.nav-optional { display: none; }
}