/* Guide pages (shared by every /guides/* article). */

/* One measure for the page. The header and the body both use it, so every block
   sits on the same left edge and the gutters stay even on both sides. Inner blocks
   must not re-cap their own width: a max-width without `margin-inline: auto` piles
   all the slack on the right and the page reads as shifted left. */
:root { --measure: 824px; }  /* 760px of text + 2rem padding each side */


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(--measure); 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); line-height: 1.7; }

.content { max-width: var(--measure); margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.article h2 { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -0.01em; margin: 2.5rem 0 0.9rem; }
.article h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 1.75rem 0 0.6rem; }
.article p { font-size: 1.02rem; color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 1rem; }
.article ul, .article ol { margin: 0 0 1.1rem 1.35rem; color: var(--color-text-secondary); }
.article li { margin-bottom: 0.45rem; line-height: 1.65; }
.article a { color: var(--color-accent-strong); text-decoration: none; font-weight: 600; }
.article a:hover { text-decoration: underline; }
.softly-note { background: var(--color-accent-soft); border: 1px solid #cfe4f6; border-radius: 16px; padding: 1.75rem 2rem; margin: 2.5rem 0 1rem; }
.softly-note h2 { margin-top: 0; }
.article .meta-line { font-size: 0.85rem; color: var(--color-text-tertiary); margin-bottom: 2rem; }

@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; }
    .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; }
}
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b1220; box-shadow: 0 12px 32px rgba(40, 48, 70, 0.14); margin: 0 0 0.75rem; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { font-size: 0.85rem; color: var(--color-text-tertiary); margin-bottom: 2.5rem; }
.article .sources li { font-size: 0.92rem; }
.article .sources a { font-weight: 500; word-break: break-word; }

.article table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.95rem; }
.article th, .article td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.article th { color: var(--color-text); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.content-section { margin-bottom: 3rem; }
.content-section h2 {
    font-family: var(--font-display); font-size: 1.6rem;
    margin-bottom: 1.25rem; letter-spacing: -0.01em;
}
.faq-list { display: grid; gap: 0.85rem; }
.faq-item {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] { border-color: #c3d8ec; box-shadow: 0 10px 30px rgba(47, 111, 181, 0.08); }
.faq-item summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.1rem 1.35rem;
    font-weight: 600; font-size: 1rem; color: #283046;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; font-family: var(--font-display);
    font-size: 1.35rem; line-height: 1; color: var(--color-accent);
    transition: transform 0.2s; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 1.35rem 1.2rem; font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.7; }
.faq-item p + p { margin-top: -0.4rem; }
.faq-item a { color: var(--color-accent-strong); text-decoration: none; font-weight: 600; }
.faq-item a:hover { text-decoration: underline; }

.faq-cta {
    margin-top: 1rem; background: var(--color-accent-soft);
    border: 1px solid #cfe4f6; border-radius: 16px;
    padding: 2rem;
}
.faq-cta h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.5rem; }
.faq-cta p { color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 0; }
.faq-cta a { color: var(--color-accent-strong); text-decoration: none; font-weight: 600; }
.faq-cta a:hover { text-decoration: underline; }

/* byline, related guides, FAQ, sources (added in the port) */
.article .byline { font-size: 0.85rem; color: var(--color-text-tertiary); margin-bottom: 2rem; line-height: 1.7; }
.article .byline a { font-weight: 600; }
.related { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.related h2 { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
.related-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--color-text); transition: border-color 0.2s, box-shadow 0.2s; }
.related-card:hover { border-color: #c3d8ec; box-shadow: 0 10px 30px rgba(47, 111, 181, 0.08); }
.related-card .guide-tag { display: inline-block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-strong); font-weight: 600; margin-bottom: 0.4rem; }
.related-card h3 { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; margin: 0; }
.article .faq h3 { margin-top: 1.5rem; }
.article .tldr { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 12px; padding: 1.1rem 1.4rem; margin: 0 0 1.75rem; }
.article .tldr p { margin-bottom: 0.4rem; }
.article .tldr ul { margin-bottom: 0; }
.article .stands-out, .article .falls-short, .article .costs { margin: 0.75rem 0 1rem 1.35rem; }
.article .rating { font-weight: 600; color: var(--color-text); }
.article figure { margin: 1.5rem 0; }
.article figure img { max-width: 100%; border-radius: 12px; border: 1px solid var(--color-border); }
.article figcaption { font-size: 0.85rem; color: var(--color-text-tertiary); margin-top: 0.5rem; }
.article .callout { background: #fff8ec; border: 1px solid #f1e2c4; border-radius: 12px; padding: 1rem 1.3rem; margin: 1.5rem 0; }
.article .callout p:last-child { margin-bottom: 0; }
.article .cta-inline { display: inline-flex; align-items: center; gap: 0.5rem; background: #0b0b0f; color: #fff !important; border-radius: 100px; padding: 0.55rem 1.1rem; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.article .cta-inline:hover { background: #2b2c3d; text-decoration: none; }