/* Framez planning guides — scoped styles. Loaded only on guide pages.
   Brand palette: navy #0f172a / #1e1b4b, red #ef4444 / #F50624, white background. */

.fzguide {
    background: #ffffff;
    color: #334155;
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

.fzguide-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 44px 20px 64px;
}

.fzguide a { color: #ef4444; text-decoration: none; }
.fzguide a:hover { color: #b91c1c; text-decoration: underline; }

.fzguide-breadcrumb {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 28px;
}
.fzguide-breadcrumb a { color: #475569; }
.fzguide-breadcrumb span[aria-hidden] { margin: 0 8px; color: #cbd5e1; }
.fzguide-breadcrumb [aria-current] { color: #0f172a; font-weight: 600; }

.fzguide h1 {
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
}

.fzguide h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e1b4b;
    margin: 40px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ef4444;
}

.fzguide h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 26px 0 10px;
}

.fzguide p { margin: 0 0 16px; }
.fzguide ul, .fzguide ol { padding-left: 24px; margin: 0 0 18px; }
.fzguide li { margin-bottom: 8px; }
.fzguide strong { color: #0f172a; }

.fzguide-meta {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
}

.fzguide-answer {
    background: #f8fafc;
    border-left: 4px solid #ef4444;
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
    margin: 0 0 30px;
    color: #0f172a;
    font-size: 1.02rem;
}

.fzguide-toc {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 34px;
}
.fzguide-toc > strong { display: block; color: #0f172a; margin-bottom: 10px; }
.fzguide-toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
.fzguide-toc li { margin-bottom: 6px; font-size: 14.5px; }
.fzguide-toc li::before { content: "›"; color: #ef4444; font-weight: 700; margin-right: 8px; }

.fzguide-tablewrap {
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.fzguide-tablewrap table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.fzguide-tablewrap th {
    background: #1e1b4b;
    color: #ffffff;
    text-align: left;
    padding: 13px 16px;
    font-weight: 700;
    white-space: nowrap;
}
.fzguide-tablewrap td {
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.fzguide-tablewrap tr:nth-child(even) td { background: #f8fafc; }
.fzguide-tablewrap tr:last-child td { border-bottom: none; }

.fzguide-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.fzguide-checklist li {
    position: relative;
    padding: 10px 14px 10px 38px;
    margin-bottom: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.fzguide-checklist li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    color: #ef4444;
    font-weight: 800;
}

.fzguide-note {
    font-size: 14px;
    color: #64748b;
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0 20px;
}

.fzguide-faqs h3 {
    margin-top: 20px;
    font-size: 1.08rem;
}
.fzguide-faqs p { margin-bottom: 6px; }

.fzguide-cta {
    margin-top: 48px;
    padding: 30px 26px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 14px;
    text-align: center;
    color: #e2e8f0;
}
.fzguide-cta h2 {
    color: #ffffff;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 10px;
    font-size: 1.45rem;
}
.fzguide-cta p { color: #cbd5e1; margin-bottom: 20px; }
.fzguide-cta .fzguide-btn {
    display: inline-block;
    background: #ef4444;
    color: #ffffff;
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.fzguide-cta .fzguide-btn:hover { background: #dc2626; color: #ffffff; text-decoration: none; }

.fzguide-related { margin-top: 36px; font-size: 14.5px; color: #475569; }

@media (max-width: 767px) {
    .fzguide-wrap { padding: 30px 16px 48px; }
    .fzguide h1 { font-size: 1.6rem; }
    .fzguide h2 { font-size: 1.3rem; }
    .fzguide-toc ul { columns: 1; }
    .fzguide-tablewrap table { min-width: 560px; }
}