:root {
    --ink: #0D1E35; /* deep navy — primary text + dark surfaces */
    --ink-mid: #2A3A47; /* body copy */
    --ink-soft: #6B7785; /* muted text, captions */
    --ink-mute: #C0C7CE; /* very muted — dots, separators */
    --white: #FFFFFF;
    --bg: #F4F2EC; /* canvas cream */
    --bg-warm: #EDEAE2; /* warmer cream for cards */
    --rule: #DCD8CE; /* border / divider */
    --rule-soft: #E7E4DA; /* lighter rule */
    --teal: #006B6B; /* primary teal */
    --teal-bright: #5BBAB5; /* bright teal — used on dark surfaces */
    --teal-lt: #E8F4F2; /* soft teal highlight bg */
    --amber: #C8923A; /* TPPL amber accent */
}

*, *::before, *::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    font-weight: 300;
    color: var(--ink);
  /*  background: var(--bg);*/
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

button {
    font-family: inherit
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px
}

@media (max-width:899px) {
    .container {
        padding: 0 24px
    }
}
 


/* FOOTER */
.footer {
    background: var(--ink);
    color: rgba(255,255,255,.82);
    padding: 80px 0 32px
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.footer-brand-mark {
    width: 36px;
    height: 46px;
    margin-bottom: 16px
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    margin-bottom: 16px
}

    .footer-brand-text .primary {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .18em;
        color: var(--white)
    }

    .footer-brand-text .secondary {
        font-family: 'Cormorant Garamond',serif;
        font-style: italic;
        font-size: 16px;
        color: var(--teal-bright);
        margin-top: 2px
    }

    .footer-brand-text .tertiary {
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: .22em;
        color: rgba(255,255,255,.5);
        margin-top: 4px
    }

.footer-tagline {
    font-family: 'Cormorant Garamond',serif;
    font-style: italic;
    font-size: 14px;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    margin: 0;
    max-width: 280px
}

.footer-heading {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal-bright);
    margin-bottom: 18px
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-link {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    transition: color .2s
}

    .footer-link:hover {
        color: var(--white)
    }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(255,255,255,.7);
    line-height: 1.5
}

    .footer-contact-item svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--teal-bright)
    }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    font-size: 12px;
    color: rgba(255,255,255,.5)
}

.footer-bottom-links {
    display: flex;
    gap: 20px
}

@media (max-width:899px) {
    .footer {
        padding: 56px 0 24px
    }

    .footer-inner {
        padding: 0 24px
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 40px
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px
    }
}

/* ─── Contrast patch: --white was referenced but never defined in :root ─── */
:root {
    --white: #FFFFFF;
}

.bl-cta-btn {
    color: #FFFFFF !important;
}

    .bl-cta-btn svg {
        stroke: #FFFFFF;
        color: #FFFFFF;
    }

    .bl-cta-btn:hover {
        color: #FFFFFF !important;
    }

.bl-cta-btn-icon svg {
    stroke: #FFFFFF;
}
/* ─── End contrast patch ─── */

/* ─── Editorial FAQ Section ─── */
.bl-faq {
    padding-top: 72px;
    margin-top: 64px;
    border-top: 1px solid rgba(15,25,35,.08);
}

.bl-faq-eyebrow {
    display: block;
    font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber,#C8923A);
    margin-bottom: 16px;
}

.bl-faq > h2 {
    font-family: 'Cormorant Garamond',Georgia,serif;
    font-size: clamp(30px,4.2vw,42px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.012em;
    color: var(--ink,#0D1E35);
    margin: 0 0 48px 0;
}

    .bl-faq > h2 em {
        font-style: italic;
        color: var(--teal,#006B6B);
        font-weight: 400;
    }

.bl-faq-list {
    display: flex;
    flex-direction: column;
}

.bl-faq-item {
    border-top: 1px solid rgba(15,25,35,.10);
    padding: 28px 0;
    position: relative;
    transition: background-color .25s ease;
}

    .bl-faq-item:last-child {
        border-bottom: 1px solid rgba(15,25,35,.10);
    }

    .bl-faq-item > summary {
        list-style: none;
        cursor: pointer;
        display: grid;
        grid-template-columns: 56px 1fr 32px;
        align-items: start;
        gap: 20px;
        font-family: 'Cormorant Garamond',Georgia,serif;
        font-size: clamp(20px,2.2vw,25px);
        font-weight: 500;
        line-height: 1.35;
        color: var(--ink,#0D1E35);
        letter-spacing: -.005em;
        transition: color .25s ease;
        outline: none;
    }

        .bl-faq-item > summary::-webkit-details-marker {
            display: none;
        }

        .bl-faq-item > summary::marker {
            display: none;
        }

        .bl-faq-item > summary:focus-visible {
            outline: 2px solid var(--teal,#006B6B);
            outline-offset: 6px;
            border-radius: 2px;
        }

.bl-faq-num {
    font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--amber,#C8923A);
    text-transform: uppercase;
    padding-top: 8px;
    align-self: start;
}

.bl-faq-q {
    padding-top: 0;
}

.bl-faq-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    position: relative;
    align-self: start;
    margin-top: 6px;
    justify-self: end;
}

    .bl-faq-toggle::before,
    .bl-faq-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--teal,#006B6B);
        transition: transform .35s cubic-bezier(.4,0,.2,1),background-color .25s ease;
    }

    .bl-faq-toggle::before {
        width: 14px;
        height: 1.2px;
        transform: translate(-50%,-50%);
    }

    .bl-faq-toggle::after {
        width: 1.2px;
        height: 14px;
        transform: translate(-50%,-50%);
    }

.bl-faq-item[open] .bl-faq-toggle::after {
    transform: translate(-50%,-50%) rotate(90deg);
    opacity: 0;
}

.bl-faq-item > summary:hover {
    color: var(--teal,#006B6B);
}

    .bl-faq-item > summary:hover .bl-faq-toggle::before,
    .bl-faq-item > summary:hover .bl-faq-toggle::after {
        background-color: var(--ink,#0D1E35);
    }

.bl-faq-answer {
    padding: 18px 0 4px 76px;
    font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
    font-size: 15.5px;
    line-height: 1.78;
    color: rgba(15,25,35,.74);
    max-width: 64ch;
}

    .bl-faq-answer p {
        margin: 0;
    }

.bl-faq-item[open] .bl-faq-answer {
    animation: bl-faq-fade .42s cubic-bezier(.4,0,.2,1);
}

@keyframes bl-faq-fade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width:720px) {
    .bl-faq {
        padding-top: 56px;
        margin-top: 48px;
    }

        .bl-faq > h2 {
            margin-bottom: 32px;
        }

    .bl-faq-item {
        padding: 22px 0;
    }

        .bl-faq-item > summary {
            grid-template-columns: 40px 1fr 24px;
            gap: 14px;
            font-size: 18px;
            line-height: 1.38;
        }

    .bl-faq-num {
        font-size: 10px;
        padding-top: 5px;
    }

    .bl-faq-toggle {
        width: 22px;
        height: 22px;
        margin-top: 3px;
    }

        .bl-faq-toggle::before {
            width: 11px;
        }

        .bl-faq-toggle::after {
            height: 11px;
        }

    .bl-faq-answer {
        padding-left: 54px;
        font-size: 15px;
    }
}
/* ─── End Editorial FAQ ─── */


/* ─── Footer · Connect with us block ─── */
.footer-connect {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-connect-label {
    font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.footer-connect-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.78);
    transition: transform .32s cubic-bezier(.32,.72,0,1),background .32s ease,border-color .32s ease,color .32s ease;
    text-decoration: none;
}

    .footer-social svg {
        width: 16px;
        height: 16px;
        display: block;
    }

    .footer-social:hover, .footer-social:focus-visible {
        transform: translateY(-2px);
        background: rgba(255,255,255,.10);
        outline: none;
    }

    .footer-social.fb:hover, .footer-social.fb:focus-visible {
        color: #1877F2;
        border-color: rgba(24,119,242,.55);
    }

    .footer-social.ig:hover, .footer-social.ig:focus-visible {
        color: #E4405F;
        border-color: rgba(228,64,95,.55);
    }

    .footer-social.li:hover, .footer-social.li:focus-visible {
        color: #0A66C2;
        border-color: rgba(10,102,194,.55);
    }

    .footer-social.x:hover, .footer-social.x:focus-visible {
        color: #FFFFFF;
        border-color: rgba(255,255,255,.55);
    }

    .footer-social.yt:hover, .footer-social.yt:focus-visible {
        color: #FF0000;
        border-color: rgba(255,0,0,.55);
    }

    .footer-social.wa:hover, .footer-social.wa:focus-visible {
        color: #25D366;
        border-color: rgba(37,211,102,.55);
    }

@media (max-width:640px) {
    .footer-connect {
        margin-top: 28px;
        padding-top: 22px;
    }

    .footer-social {
        width: 36px;
        height: 36px;
    }
}
/* ─── End Connect block ─── */


/* Legacy brand-text spans are no longer used (canonical SVG carries typography) */
/*.brand-text, .footer-brand-text {
    display: none !important;
}*/


/* ─── Logo sizing fix — canonical unified SVG needs more room than old icon-only ─── */
 

.footer-brand-mark {
    width: 320px !important;
    height: auto !important;
    max-width: 100%;
    margin-bottom: 16px;
    display: block;
}
 
/*@media (max-width:840px) {
    .brand-mark {
        width: 220px !important;
        height: 51px !important;
    }
}

@media (max-width:480px) {
    .brand-mark {
        width: 180px !important;
        height: 42px !important;
    }

    .footer-brand-mark {
        width: 260px !important;
    }
}*/
/* ─── End logo sizing fix ─── */



/* ═══ HERO (feature image forward) ═══ */
.bl-hero {
    padding: 48px 0 0;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 36px
}

    .breadcrumb a {
        color: var(--ink-soft)
    }

        .breadcrumb a:hover {
            color: var(--ink)
        }

    .breadcrumb .sep {
        opacity: .5
    }

    .breadcrumb .current {
        color: var(--ink)
    }

.bl-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px
}

.bl-cat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 28px
}

    .bl-cat::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--teal)
    }

.bl-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(40px,5.5vw,72px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 28px;
    text-align: center
}

    .bl-title em {
        font-style: italic;
        color: var(--teal)
    }

.bl-subtitle {
    font-family: 'Cormorant Garamond',serif;
    font-style: italic;
    font-size: clamp(20px,2.2vw,26px);
    font-weight: 400;
    color: var(--ink-mid);
    line-height: 1.45;
    text-align: center;
    margin-bottom: 36px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

/* BYLINE ROW */
.bl-byline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap
}

.bl-byline-author {
    display: flex;
    align-items: center;
    gap: 12px
}

.bl-byline-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink)
}

.bl-byline-author-meta {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4
}

    .bl-byline-author-meta a {
        color: var(--ink);
        font-weight: 500
    }

    .bl-byline-author-meta small {
        display: block;
        color: var(--ink-soft);
        font-size: 11px;
        margin-top: 2px
    }

.bl-byline-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-mute)
}

.bl-byline-meta {
    font-size: 12px;
    color: var(--ink-soft)
}

    .bl-byline-meta strong {
        color: var(--ink);
        font-weight: 500
    }

/* ═══ BODY LAYOUT ═══ */
.bl-body {
    padding: 72px 0 80px
}

.bl-body-grid {
    display: grid;
    grid-template-columns: 60px 1fr 240px;
    gap: 64px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px
}

/* LEFT: SOCIAL / BOOKMARK RAIL (sticky) */
.bl-social {
    position: sticky;
    top: 108px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.bl-social-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto 10px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule)
}

.bl-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .25s cubic-bezier(.32,.72,0,1)
}

    .bl-social-btn:hover {
        background: var(--ink);
        color: var(--white);
        border-color: var(--ink);
        transform: translateY(-2px)
    }

/* CENTER: ARTICLE */
.bl-content {
    max-width: 720px
}

.bl-section {
    margin-bottom: 48px;
    scroll-margin-top: 100px
}

    .bl-section h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: clamp(28px,3.5vw,40px);
        font-weight: 300;
        line-height: 1.1;
        color: var(--ink);
        margin-bottom: 20px;
        letter-spacing: -.008em;
        padding-top: 8px
    }

        .bl-section h2 em {
            font-style: italic
        }

    .bl-section h3 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 22px;
        font-weight: 400;
        color: var(--ink);
        margin: 28px 0 12px;
        line-height: 1.3
    }

    .bl-section p {
        font-size: 17px;
        font-weight: 300;
        color: var(--ink-mid);
        line-height: 1.85;
        margin-bottom: 22px
    }

        .bl-section p strong {
            font-weight: 500;
            color: var(--ink)
        }

        .bl-section p em {
            font-style: italic
        }

    .bl-section ul {
        list-style: none;
        padding: 0;
        margin: 18px 0 24px
    }

        .bl-section ul li {
            position: relative;
            padding: 7px 0 7px 26px;
            font-size: 16px;
            font-weight: 300;
            color: var(--ink-mid);
            line-height: 1.75
        }

            .bl-section ul li::before {
                content: '';
                position: absolute;
                left: 10px;
                top: 18px;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: var(--teal)
            }

    .bl-section sup a {
        color: var(--teal);
        font-weight: 500;
        font-size: 11px;
        text-decoration: none;
        border-bottom: 1px solid transparent
    }

        .bl-section sup a:hover {
            border-bottom-color: var(--teal)
        }

    .bl-section a {
        color: var(--teal);
        border-bottom: 1px solid var(--rule);
        transition: border-color .2s
    }

        .bl-section a:hover {
            border-bottom-color: var(--teal)
        }

    /* DROP CAP */
    .bl-section.bl-first > p:first-child::first-letter {
        font-family: 'Cormorant Garamond',serif;
        font-weight: 400;
        font-size: 80px;
        float: left;
        line-height: .9;
        margin: 6px 12px -4px 0;
        color: var(--teal);
        font-style: italic
    }

/* AEO SUMMARY BLOCK — surfaces directly under hero for citation extraction */
.bl-aeo {
    margin: 0 0 36px;
    padding: 24px 28px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--teal);
    border-radius: 10px
}

.bl-aeo-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px
}

    .bl-aeo-label::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--teal)
    }

.bl-aeo p {
    font-size: 15.5px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 8px
}

    .bl-aeo p:last-child {
        margin-bottom: 0
    }

    .bl-aeo p strong {
        font-weight: 600;
        color: var(--ink);
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .12em;
        display: inline-block;
        margin-right: 6px
    }

/* COMPARISON TABLE */
.bl-compare {
    margin: 36px 0;
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    background: var(--white)
}

    .bl-compare table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px
    }

    .bl-compare th {
        background: var(--bg-warm);
        padding: 14px 18px;
        text-align: left;
        font-family: 'Cormorant Garamond',serif;
        font-size: 18px;
        font-weight: 500;
        color: var(--ink);
        border-bottom: 1px solid var(--rule)
    }

        .bl-compare th:first-child {
            font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ink-soft)
        }

        .bl-compare th em {
            font-style: italic;
            color: var(--teal)
        }

    .bl-compare td {
        padding: 14px 18px;
        border-bottom: 1px solid var(--rule-soft);
        font-weight: 300;
        color: var(--ink-mid);
        line-height: 1.6;
        vertical-align: top
    }

        .bl-compare td:first-child {
            font-weight: 500;
            color: var(--ink);
            font-size: 13px
        }

    .bl-compare tr:last-child td {
        border-bottom: none
    }

/* PULL QUOTE */
.bl-pullquote {
    margin: 44px 0;
    padding: 28px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: 'Cormorant Garamond',serif;
    font-size: 28px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    color: var(--ink);
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto
}

/* KEY TAKEAWAY BOX */
.bl-key {
    margin: 36px 0;
    padding: 28px 32px;
    background: var(--teal-lt);
    border: 1px solid rgba(0,107,107,.25);
    border-radius: 14px
}

.bl-key-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px
}

    .bl-key-label::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--teal)
    }

.bl-key ul {
    margin-top: 10px
}

    .bl-key ul li {
        font-size: 14.5px
    }

/* INLINE FIGURE */
.bl-figure {
    margin: 36px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--white)
}

.bl-figure-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg,var(--bg-warm) 0%,var(--bg) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

    .bl-figure-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 40% 40%,rgba(0,107,107,.1) 0%,transparent 50%)
    }

.bl-figure-placeholder {
    font-family: 'Cormorant Garamond',serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    z-index: 1;
    padding: 20px;
    text-align: center
}

.bl-figure figcaption {
    padding: 14px 20px;
    font-size: 13px;
    color: var(--ink-soft);
    background: var(--bg);
    border-top: 1px solid var(--rule);
    line-height: 1.6
}

    .bl-figure figcaption strong {
        color: var(--ink);
        font-weight: 500
    }

/* INLINE CTA BANNER */
.bl-cta {
    margin: 44px 0;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center
}

.bl-cta-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.3
}

    .bl-cta-title em {
        font-style: italic;
        color: var(--teal)
    }

.bl-cta-desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 14px
}

.bl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 24px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: all .35s cubic-bezier(.32,.72,0,1);
    white-space: nowrap
}

    .bl-cta-btn:hover {
        background: var(--teal);
        border-color: var(--teal)
    }

.bl-cta-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s
}

.bl-cta-btn:hover .bl-cta-btn-icon {
    background: rgba(255,255,255,.2);
    transform: translate(2px,-1px)
}

.bl-cta-contacts {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px
}

.bl-cta-mini {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-mid);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: color .2s,border-color .2s
}

    .bl-cta-mini:hover {
        color: var(--teal);
        border-bottom-color: var(--teal)
    }

    .bl-cta-mini svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0
    }

    .bl-cta-mini.wa {
        color: #128C7E
    }

        .bl-cta-mini.wa:hover {
            color: #075E54;
            border-bottom-color: #128C7E
        }

/* PRICING DISCLAIMER */
.bl-disclaimer {
    margin: 24px 0 36px;
    padding: 20px 24px;
    background: #FFF8E8;
    border: 1px solid #E8D8A8;
    border-left: 3px solid var(--amber);
    border-radius: 10px
}

.bl-disclaimer-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px
}

    .bl-disclaimer-label::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--amber)
    }

.bl-disclaimer p {
    font-size: 13.5px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.7;
    margin: 0
}

    .bl-disclaimer p strong {
        font-weight: 500;
        color: var(--ink)
    }

    .bl-disclaimer p a {
        color: var(--teal);
        border-bottom: 1px solid var(--rule)
    }

        .bl-disclaimer p a:hover {
            border-bottom-color: var(--teal)
        }

/* PRIMARY SOURCES BLOCK */
.bl-sources {
    margin: 48px 0 0;
    padding: 28px 32px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 14px
}

.bl-sources-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px
}

    .bl-sources-label::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--teal)
    }

.bl-sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

    .bl-sources-list li {
        font-size: 13.5px;
        font-weight: 300;
        color: var(--ink-mid);
        line-height: 1.6;
        padding-left: 0;
        position: relative
    }

        .bl-sources-list li::before {
            display: none
        }

        .bl-sources-list li strong {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: 2px;
            font-family: 'Plus Jakarta Sans',sans-serif
        }

        .bl-sources-list li a {
            color: var(--teal);
            font-size: 12.5px;
            word-break: break-all;
            border-bottom: 1px solid var(--rule-soft);
            transition: border-color .2s
        }

            .bl-sources-list li a:hover {
                border-bottom-color: var(--teal)
            }

.bl-sources-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    background: #FFF8E8;
    border-radius: 999px;
    vertical-align: middle
}

/* AUTHOR NOTE BLOCK (variant of bl-key with warm tone) */
.bl-note {
    margin: 36px 0;
    padding: 26px 30px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--teal);
    border-radius: 12px
}

.bl-note-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 12px
}

    .bl-note-label::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--teal)
    }

.bl-note p {
    font-size: 14.5px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.75;
    margin: 0
}

    .bl-note p strong {
        font-weight: 500;
        color: var(--ink)
    }

    .bl-note p em {
        font-style: italic;
        color: var(--teal)
    }

/* RIGHT: TOC / PROGRESS (sticky) */
.bl-toc-wrap {
    position: sticky;
    top: 108px
}

.bl-toc-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px
}

.bl-toc-progress {
    height: 2px;
    background: var(--rule);
    border-radius: 2px;
    margin-bottom: 16px;
    overflow: hidden
}

.bl-toc-progress-bar {
    height: 100%;
    background: var(--teal);
    width: 0;
    transition: width .1s linear
}

.bl-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

    .bl-toc-list a {
        display: block;
        padding: 7px 10px;
        font-size: 12.5px;
        color: var(--ink-soft);
        border-left: 2px solid transparent;
        transition: all .2s;
        line-height: 1.5
    }

        .bl-toc-list a:hover {
            color: var(--ink)
        }

        .bl-toc-list a.active {
            color: var(--ink);
            border-left-color: var(--teal);
            font-weight: 500
        }

.bl-toc-tags {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rule)
}

.bl-toc-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 4px 4px 0;
    font-size: 11px;
    color: var(--ink-mid);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 999px;
    transition: all .2s
}

    .bl-toc-tag:hover {
        background: var(--ink);
        color: var(--white);
        border-color: var(--ink)
    }

/* CITATIONS */
.bl-citations {
    margin-top: 56px;
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 14px
}

    .bl-citations h3 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 20px;
        font-weight: 400;
        color: var(--ink);
        margin-bottom: 14px
    }

        .bl-citations h3 em {
            font-style: italic;
            color: var(--teal)
        }

.bl-citations-list {
    display: flex;
    flex-direction: column;
    counter-reset: bcite
}

.bl-cite {
    font-size: 12.5px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.6;
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    counter-increment: bcite
}

    .bl-cite:last-child {
        border-bottom: none
    }

    .bl-cite::before {
        content: counter(bcite);
        position: absolute;
        left: 0;
        top: 10px;
        font-family: 'Cormorant Garamond',serif;
        font-style: italic;
        font-size: 13px;
        color: var(--teal);
        font-weight: 500
    }

    .bl-cite a {
        color: var(--teal);
        border-bottom: 1px solid var(--rule)
    }

        .bl-cite a:hover {
            border-bottom-color: var(--teal)
        }

/* REVIEWED-BY FOOTER */
.bl-reviewed {
    margin: 36px 0 0;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
    margin-bottom:20px;
}

    .bl-reviewed strong {
        font-style: normal;
        font-weight: 500;
        color: var(--ink)
    }

/* AUTHOR BOX */
.bl-author {
    margin-top: 56px;
    background: var(--bg-warm);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 36px;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 28px;
    align-items: start
}

.bl-author-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond',serif;
    font-style: italic;
    font-size: 42px;
    color: var(--ink)
}

.bl-author-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 8px
}

.bl-author-name {
    font-family: 'Cormorant Garamond',serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 8px
}

    .bl-author-name em {
        font-style: italic
    }

.bl-author-cred {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 12px
}

.bl-author-bio {
    font-size: 14.5px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.75;
    margin-bottom: 16px
}

.bl-author-links {
    display: flex;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    flex-wrap: wrap
}

    .bl-author-links a {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink);
        border-bottom: 1px solid var(--rule);
        padding-bottom: 3px
    }

/* NEWSLETTER */
.bl-newsletter {
    padding: 100px 0;
    background: var(--ink);
    color: var(--white);
    position: relative;
    overflow: hidden
}

    .bl-newsletter::before {
        content: '';
        position: absolute;
        top: -200px;
        right: -200px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(126,204,200,.1) 0%,transparent 65%)
    }

.bl-nl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative
}

.bl-nl-label {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal-bright);
    margin-bottom: 22px
}

.bl-nl-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(32px,4vw,52px);
    font-weight: 300;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 20px;
    letter-spacing: -.01em
}

    .bl-nl-title em {
        font-style: italic;
        color: var(--teal-bright)
    }

.bl-nl-desc {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.68);
    line-height: 1.7;
    max-width: 500px
}

.bl-nl-form {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px
}

.bl-nl-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 20px;
    color: var(--white);
    font-family: inherit;
    font-size: 14px;
    outline: none
}

    .bl-nl-input::placeholder {
        color: rgba(255,255,255,.5)
    }

.bl-nl-submit {
    padding: 12px 28px;
    background: var(--teal-bright);
    color: var(--ink);
    border: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: all .25s;
    white-space: nowrap
}

    .bl-nl-submit:hover {
        background: var(--white);
        transform: translateY(-1px)
    }

/* RELATED ARTICLES */
.bl-related {
    padding: 100px 0;
    background: var(--bg-warm)
}

.bl-related-head {
    max-width: 720px;
    margin-bottom: 56px
}

    .bl-related-head .eyebrow {
        display: inline-block;
        padding: 6px 14px;
        background: var(--white);
        border: 1px solid var(--rule);
        border-radius: 999px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 22px
    }

    .bl-related-head h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: clamp(32px,4vw,48px);
        font-weight: 300;
        color: var(--ink);
        line-height: 1.05;
        letter-spacing: -.005em
    }

        .bl-related-head h2 em {
            font-style: italic;
            color: var(--teal)
        }

.rel-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 32px
}

.rel-card {
    display: flex;
    flex-direction: column;
    transition: transform .4s cubic-bezier(.32,.72,0,1)
}

    .rel-card:hover {
        transform: translateY(-4px)
    }

.rel-thumb {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg,var(--bg) 0%,var(--white) 100%);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative
}

    .rel-thumb::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 35%,rgba(0,107,107,.08) 0%,transparent 45%),radial-gradient(circle at 75% 65%,rgba(184,129,10,.06) 0%,transparent 50%)
    }

.rel-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    background: var(--white);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    z-index: 2
}

.rel-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-bottom: 12px
}

    .rel-meta .dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--ink-mute)
    }

.rel-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 12px;
    transition: color .25s
}

.rel-card:hover .rel-title {
    color: var(--teal)
}

.rel-title em {
    font-style: italic
}

.rel-excerpt {
    font-size: 14px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.7
}

/* RESPONSIVE */
@media (max-width:1199px) {
    .bl-body-grid {
        grid-template-columns: 1fr 240px;
        gap: 48px
    }

    .bl-social {
        display: none
    }

    .bl-nl-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .rel-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:899px) {
    .bl-hero {
        padding: 36px 0 0
    }

    .bl-body {
        padding: 48px 0 64px
    }

    .bl-body-grid {
        grid-template-columns: 1fr;
        padding: 0 24px
    }

    .bl-toc-wrap {
        display: none
    }

    .bl-hero-inner, .bl-feature-wrap {
        padding: 0 24px
    }

    .bl-feature {
        border-radius: 14px
    }

    .bl-newsletter, .bl-related {
        padding: 56px 0
    }

    .rel-grid {
        grid-template-columns: 1fr
    }

    .bl-cta {
        grid-template-columns: 1fr;
        text-align: center
    }

    .bl-author {
        grid-template-columns: 1fr;
        text-align: center
    }

    .bl-author-avatar {
        margin: 0 auto
    }

    .bl-author-links {
        justify-content: center
    }

    .bl-compare {
        font-size: 13px
    }

        .bl-compare th, .bl-compare td {
            padding: 10px 12px
        }
}

@media (max-width:599px) {
    .bl-byline {
        gap: 12px
    }

    .bl-nl-form {
        flex-direction: column;
        border-radius: 16px;
        padding: 14px
    }

    .bl-nl-input {
        padding: 10px 14px
    }

    .bl-nl-submit {
        width: 100%
    }

    .bl-pullquote {
        font-size: 22px;
        padding: 22px 0
    }

    .bl-cta, .bl-key, .bl-citations, .bl-author, .bl-aeo, .bl-disclaimer, .bl-sources, .bl-note {
        padding: 22px 20px
    }

    .bl-cta-contacts {
        flex-direction: column;
        gap: 12px
    }

    .bl-sources-list li a {
        font-size: 11.5px
    }
}
.bl-pullquote-attr {
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    margin-top: -28px;
    margin-bottom: 44px;
}
.bl-clinical-cta {
    margin: 40px 0;
    padding: 30px 28px;
    background: var(--bg-warm);
    border-left: 3px solid var(--teal);
    border-radius: 6px;
}
.bl-pullquote-attr a {
    color: var(--teal);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.bl-clinical-cta-label {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px;
}
.bl-clinical-cta p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 22px;
}
.bl-clinical-cta .bl-cta-btn {
    margin: 0;
}
.bl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 24px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: all .35s cubic-bezier(.32, .72, 0, 1);
    white-space: nowrap;
}
.bl-review {
    margin: 36px 0 0;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
    margin-bottom:20px;
}
    .bl-review svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--teal);
    }
    .bl-review strong {
        color: var(--ink);
        font-weight: 500;
    }
.bl-key p {
    font-size: 15.5px;
    font-weight: 300;
    color: var(--ink-mid);
    line-height: 1.7;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}.bl-faq>h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(30px, 4.2vw, 42px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.012em;
    color: var(--ink, #0D1E35);
    margin: 0 0 48px 0;
}


/* DISCLAIMER */
.std-disclaimer {
    background: var(--bg);
    padding: 48px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule)
}

.std-disclaimer-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: flex-start
}

.std-disclaimer-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(200,146,58,.12);
    border: 1px solid rgba(200,146,58,.30);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--amber)
}

    .std-disclaimer-icon svg {
        width: 18px;
        height: 18px
    }

.std-disclaimer-body {
    font-family: 'Cormorant Garamond',serif;
    font-size: 16.5px;
    font-style: italic;
    line-height: 1.7;
    color: var(--ink-mid);
    font-weight: 300
}

    .std-disclaimer-body strong {
        font-style: normal;
        color: var(--ink);
        font-weight: 500;
        letter-spacing: .02em
    }

.std-disclaimer-label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Plus Jakarta Sans',sans-serif;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber)
}

@media (max-width:640px) {
    .std-disclaimer {
        padding: 36px 0
    }

    .std-disclaimer-inner {
        padding: 0 24px;
        grid-template-columns: 1fr;
        gap: 14px
    }

    .std-disclaimer-body {
        font-size: 15.5px
    }
}

/* ═══ NAV ═══ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(240,237,232,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule)
}

.nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px
}

.brand-mark {
    width: 36px;
    height: 46px;
    flex-shrink: 0
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.brand-primary {
    font-family: 'Playfair Display',serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--ink)
}

.brand-secondary {
    font-family: 'Playfair Display',serif;
    font-style: italic;
    font-size: 12px;
    color: var(--teal);
    margin: 1px 0
}

.brand-tertiary {
    font-family: 'Playfair Display',serif;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .16em;
    color: var(--ink-soft)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px
}

.nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-mid);
    transition: color .2s
}

    .nav-link:hover, .nav-link.active {
        color: var(--ink)
    }

.nav-cta {
    padding: 9px 20px;
    background: var(--ink);
    color: var(--white);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    transition: all .25s var(--ease-out)
}

    .nav-cta:hover {
        background: var(--teal);
        transform: translateY(-1px)
    }

.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--ink);
    padding: 8px
}

@media (max-width:899px) {
    .nav-links {
        display: none
    }

    .mobile-toggle {
        display: block
    }
}