/* ============================================================
   BLOG ARTICLE — long-form reading layout for blog posts.
   Loaded AFTER blog-theme.css, only on articles that opt in by
   wrapping their content in .article-shell.
   Tokens are inherited from blog-theme.css (--blue/--navy/--font).
   ============================================================ */

:root{
    --art-teal:#2EC4B6;
    --art-blue-dark:#1558B0;
    --art-ink:#16202E;
    --art-body:#3D4B5C;
    --art-muted:#63748A;
    --art-line:#E3EAF2;
    --art-tint:#F4F8FD;
    --art-measure:74ch;
}

/* ── Reading progress ──────────────────────────────────────── */
.reading-progress{
    position:fixed; top:0; left:0; height:3px; width:100%;
    background:transparent; z-index:1001; pointer-events:none;
}
.reading-progress span{
    display:block; height:100%; width:0;
    background:linear-gradient(90deg,var(--blue),var(--art-teal));
    transition:width .1s linear;
}

/* ── Shell / grid ──────────────────────────────────────────── */
.article-shell{ padding-top:2.5rem; padding-bottom:3.5rem; }
@media (min-width:992px){
    .article-shell{ padding-top:3.5rem; padding-bottom:5rem; }
}
.article-main{ min-width:0; }

/* ── Hero ──────────────────────────────────────────────────── */
.art-hero{
    border-radius:16px; overflow:hidden; margin-bottom:1.5rem;
    box-shadow:0 18px 44px -26px rgba(10,22,40,.45);
    background:var(--art-tint);
}
.art-hero img{ display:block; width:100%; height:auto; }

/* ── Byline / meta ─────────────────────────────────────────── */
.art-meta{
    display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1.1rem;
    padding-bottom:1.1rem; margin-bottom:1.6rem;
    border-bottom:1px solid var(--art-line);
}
.art-meta__author{ display:flex; align-items:center; gap:.6rem; }
.art-meta__author img{
    width:46px; height:46px; border-radius:50%; object-fit:cover;
    border:2px solid #fff; box-shadow:0 0 0 2px var(--blue);
}
.art-meta__name{
    font-weight:700; color:var(--art-ink); font-size:.95rem;
    line-height:1.25; text-decoration:none; display:block;
}
a.art-meta__name:hover{ color:var(--blue); }
.art-meta__role{ font-size:.78rem; color:var(--art-muted); line-height:1.3; }
.art-meta__item{
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.82rem; color:var(--art-muted); white-space:nowrap;
}
.art-meta__item svg{ width:15px; height:15px; flex:0 0 auto; stroke:var(--blue); }
.art-meta__sep{ width:1px; height:22px; background:var(--art-line); }

/* ── Body typography ───────────────────────────────────────── */
.article-body{
    color:var(--art-body);
    font-size:1.0625rem;
    line-height:1.75;
    max-width:var(--art-measure);
}
.article-body > p{ margin-bottom:1.15rem; }
.article-body .lede{
    font-size:1.1875rem; line-height:1.65; color:var(--art-ink);
    font-weight:500;
}
.article-body h2{
    font-size:1.75rem; line-height:1.25; color:var(--art-ink);
    font-weight:600; margin:2.75rem 0 .85rem;
    scroll-margin-top:96px; position:relative; padding-top:1.5rem;
}
.article-body h2::before{
    content:""; position:absolute; top:0; left:0;
    width:52px; height:4px; border-radius:4px;
    background:linear-gradient(90deg,var(--blue),var(--art-teal));
}
.article-body h3{
    font-size:1.25rem; line-height:1.35; color:var(--art-ink);
    font-weight:600; margin:2rem 0 .6rem; scroll-margin-top:96px;
}
.article-body h2:first-child{ margin-top:0; }
/* style.css sets a{display:inline-block} globally, which makes punctuation
   after an in-copy link wrap onto its own line. Restore inline flow. */
.article-body a:not(.btn):not(.cta__btn){
    display:inline;
    color:var(--art-blue-dark); font-weight:600;
    text-decoration:underline; text-underline-offset:3px;
    text-decoration-thickness:1.5px;
    text-decoration-color:rgba(27,111,216,.35);
    transition:color .2s, text-decoration-color .2s;
}
.article-body a:not(.btn):not(.cta__btn):hover{
    color:var(--blue); text-decoration-color:var(--blue);
}
.article-body strong{ color:var(--art-ink); font-weight:600; }
@media (min-width:768px){
    .article-body{ font-size:1.09375rem; }
    .article-body h2{ font-size:2rem; }
    .article-body h3{ font-size:1.375rem; }
}

/* ── Lists ─────────────────────────────────────────────────── */
.art-list{ list-style:none; padding:0; margin:0 0 1.25rem; }
.art-list li{
    position:relative; padding-left:1.65rem; margin-bottom:.55rem;
}
.art-list li::before{
    content:""; position:absolute; left:.3rem; top:.66em;
    width:7px; height:7px; border-radius:50%;
    background:var(--art-teal);
}
.check-list{ list-style:none; padding:0; margin:0 0 1.25rem; }
.check-list li{
    position:relative; padding-left:2rem; margin-bottom:.6rem;
}
.check-list li::before{
    content:""; position:absolute; left:0; top:.42em;
    width:19px; height:19px; border-radius:50%;
    background:rgba(46,196,182,.16);
}
.check-list li::after{
    content:""; position:absolute; left:6px; top:.72em;
    width:6px; height:10px; border:solid var(--blue);
    border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ask-list{ list-style:none; counter-reset:ask; padding:0; margin:0 0 1.25rem; }
.ask-list li{
    counter-increment:ask; position:relative;
    padding:.55rem 0 .55rem 2.6rem;
    border-bottom:1px dashed var(--art-line);
}
.ask-list li:last-child{ border-bottom:0; }
.ask-list li::before{
    content:counter(ask); position:absolute; left:0; top:.5rem;
    width:26px; height:26px; border-radius:8px;
    background:var(--art-tint); color:var(--art-blue-dark);
    font-size:.78rem; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.area-list{ list-style:none; padding:0; margin:0 0 1.25rem;
    display:flex; flex-wrap:wrap; gap:.5rem; }
.area-list li{
    background:var(--art-tint); border:1px solid var(--art-line);
    color:var(--art-ink); font-size:.875rem; font-weight:500;
    padding:.35rem .8rem; border-radius:999px;
}

/* ── Key facts strip ───────────────────────────────────────── */
.keyfacts{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px; background:var(--art-line);
    border:1px solid var(--art-line); border-radius:14px;
    overflow:hidden; margin:0 0 1.75rem;
}
@media (min-width:768px){ .keyfacts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.keyfact{ background:#fff; padding:1rem .9rem; text-align:center; }
.keyfact__num{
    font-family:var(--font-display,serif); font-size:1.2rem; font-weight:600;
    color:var(--art-blue-dark); line-height:1.2; display:block;
}
.keyfact__label{
    font-size:.74rem; color:var(--art-muted); line-height:1.35;
    margin-top:.25rem; display:block;
}

/* ── Quick answer ──────────────────────────────────────────── */
.quick-answer{
    background:linear-gradient(135deg,#F2F8FF,#EFFBF9);
    border:1px solid #D5E7F8; border-radius:16px;
    padding:1.35rem 1.5rem; margin:0 0 1.9rem;
}
.quick-answer__title{
    display:flex; align-items:center; gap:.5rem;
    font-size:.76rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--art-blue-dark);
    margin-bottom:.6rem;
}
.quick-answer__title svg{ width:16px; height:16px; stroke:var(--art-blue-dark); }
.quick-answer p{ margin:0; color:var(--art-ink); font-size:1.03rem; line-height:1.65; }
.quick-answer p + p{ margin-top:.6rem; }

/* ── Table of contents ─────────────────────────────────────── */
.toc{
    border:1px solid var(--art-line); border-radius:14px;
    background:#fff; padding:1.1rem 1.25rem; margin:0 0 2.25rem;
}
.toc__title{
    font-size:.76rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--art-muted); margin-bottom:.65rem;
}
.toc ol{ list-style:none; counter-reset:toc; padding:0; margin:0;
    columns:1; }
@media (min-width:576px){ .toc ol{ columns:2; column-gap:1.75rem; } }
.toc li{ counter-increment:toc; margin-bottom:.4rem; break-inside:avoid; }
.toc a{
    color:var(--art-body); text-decoration:none; font-size:.9rem;
    font-weight:500; display:inline-block; line-height:1.4;
}
.toc a::before{
    content:counter(toc) ". "; color:var(--blue); font-weight:700;
}
.toc a:hover{ color:var(--blue); text-decoration:underline; }

/* ── Factor cards ──────────────────────────────────────────── */
.factor-grid{
    display:grid; grid-template-columns:1fr; gap:1rem; margin:1.25rem 0 1.75rem;
}
@media (min-width:768px){ .factor-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.factor-card{
    border:1px solid var(--art-line); border-radius:14px;
    padding:1.25rem 1.3rem; background:#fff;
    transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.factor-card:hover{
    box-shadow:0 14px 34px -22px rgba(10,22,40,.4);
    border-color:#C9DDF3; transform:translateY(-2px);
}
.factor-card__n{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:10px; margin-bottom:.7rem;
    background:linear-gradient(135deg,var(--blue),var(--art-teal));
    color:#fff; font-weight:700; font-size:.95rem;
}
.factor-card h3{ margin:0 0 .45rem !important; font-size:1.1rem !important; }
.factor-card p{ margin:0 0 .6rem; font-size:.94rem; line-height:1.65; }
.factor-card p:last-child, .factor-card ul:last-child{ margin-bottom:0; }
.factor-card .art-list li{ font-size:.9rem; margin-bottom:.35rem; }

/* ── Callouts ──────────────────────────────────────────────── */
.callout{
    border-radius:14px; padding:1.1rem 1.3rem; margin:1.5rem 0;
    border:1px solid var(--art-line); background:var(--art-tint);
    border-left:4px solid var(--blue);
}
.callout p{ margin:0; font-size:1rem; line-height:1.68; color:var(--art-ink); }
.callout p + p{ margin-top:.55rem; }
.callout__label{
    display:block; font-size:.72rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--art-blue-dark); margin-bottom:.4rem;
}
.callout--tip{ border-left-color:var(--art-teal); background:#F1FBF9; }
.callout--tip .callout__label{ color:#0F7D73; }

/* ── Tables ────────────────────────────────────────────────── */
.art-table-wrap{
    margin:1.35rem 0 .6rem; border:1px solid var(--art-line);
    border-radius:14px; overflow:hidden;
}
.art-table{ width:100%; margin:0; border-collapse:collapse; font-size:.95rem; }
.art-table thead th{
    background:linear-gradient(135deg,var(--blue),var(--art-blue-dark));
    color:#fff; font-family:var(--font,sans-serif); font-weight:600;
    font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
    padding:.85rem 1rem; text-align:left; border:0;
}
.art-table tbody th, .art-table tbody td{
    padding:.85rem 1rem; border-top:1px solid var(--art-line);
    vertical-align:middle; color:var(--art-body);
}
.art-table tbody th{ font-weight:600; color:var(--art-ink); text-align:left; }
.art-table tbody tr:nth-child(even){ background:#FAFCFE; }
.art-table tbody tr:hover{ background:var(--art-tint); }
.art-table .price{ font-weight:700; color:var(--art-blue-dark); white-space:nowrap; }
.art-table caption{
    caption-side:bottom; padding:.7rem 1rem; font-size:.8rem;
    color:var(--art-muted); text-align:left; background:#FAFCFE;
    border-top:1px solid var(--art-line);
}
@media (max-width:575.98px){
    /* Stack rows into cards; caption is forced last via flex order. */
    .art-table{ display:flex; flex-direction:column; width:100%; }
    .art-table tbody, .art-table tr, .art-table td, .art-table th,
    .art-table caption{ display:block; width:100%; }
    .art-table caption{ order:99; }
    .art-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    .art-table tbody tr{ border-top:1px solid var(--art-line); padding:.35rem 0; }
    .art-table tbody tr:first-child{ border-top:0; }
    .art-table tbody th{ border-top:0; padding-bottom:.25rem; font-size:1rem; }
    .art-table tbody td{ border-top:0; padding-top:.2rem; padding-bottom:.2rem; }
    .art-table tbody td::before{
        content:attr(data-label) " · "; font-weight:600; color:var(--art-muted); font-size:.82rem;
    }
    .art-table tbody td:last-child{ padding-bottom:.7rem; }
}

/* ── Figures ───────────────────────────────────────────────── */
.art-figure{ margin:1.9rem 0; }
.art-figure img{
    width:100%; height:auto; border-radius:14px; display:block;
    box-shadow:0 16px 40px -28px rgba(10,22,40,.55);
}
.art-figure figcaption{
    font-size:.86rem; line-height:1.6; color:var(--art-muted);
    margin-top:.7rem; padding-left:.85rem; border-left:3px solid var(--art-line);
}
.art-figure--split{
    display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:center;
}
@media (min-width:768px){
    .art-figure--split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
}
.art-figure--narrow img{ max-width:420px; margin-inline:auto; }

/* ── Inline CTA ────────────────────────────────────────────── */
.inline-cta{
    background:linear-gradient(135deg,#0F3B73,#1B6FD8 60%,#2EC4B6);
    border-radius:18px; padding:1.6rem 1.7rem; margin:2.25rem 0;
    color:#fff; box-shadow:0 20px 44px -28px rgba(27,111,216,.9);
}
.inline-cta h3{ color:#fff !important; margin:0 0 .45rem !important; font-size:1.25rem !important; }
.inline-cta p{ margin:0 0 1rem; color:rgba(255,255,255,.9); font-size:.97rem; line-height:1.6; }
.inline-cta .cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

.cta__btn{
    display:inline-flex; align-items:center; gap:.5rem;
    background:linear-gradient(135deg,var(--blue),var(--art-teal));
    color:#fff !important; font-weight:700; font-size:.94rem;
    padding:.75rem 1.4rem; border-radius:10px; border:none;
    text-decoration:none !important;
    box-shadow:0 6px 18px -6px rgba(27,111,216,.6);
    transition:transform .2s, box-shadow .2s, background .2s;
}
.cta__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(27,111,216,.7); color:#fff !important; }
.cta__btn svg{ width:17px; height:17px; }
.cta__btn--wa{ background:#075E54; box-shadow:0 6px 18px -6px rgba(7,94,84,.6); }
.cta__btn--wa:hover{ box-shadow:0 10px 24px -8px rgba(7,94,84,.7); }
.cta__btn--light{ background:#fff; color:var(--art-blue-dark) !important; box-shadow:0 6px 18px -8px rgba(0,0,0,.45); }
.cta__btn--light:hover{ color:var(--art-blue-dark) !important; }
.cta__btn--ghost{ background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.5); box-shadow:none; }
.cta__btn--ghost:hover{ background:rgba(255,255,255,.2); box-shadow:none; }
.cta__btn--outline{
    background:#fff; color:var(--art-blue-dark) !important;
    border:1.5px solid #BFD9F4; box-shadow:none;
}
.cta__btn--outline:hover{
    background:var(--art-tint); border-color:var(--blue);
    color:var(--art-blue-dark) !important; box-shadow:none;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.art-side{ position:sticky; top:92px; }
.side-card{
    border:1px solid var(--art-line); border-radius:16px;
    background:#fff; padding:1.2rem 1.3rem; margin-bottom:1.1rem;
    box-shadow:0 10px 30px -26px rgba(10,22,40,.5);
}
.side-card__title{
    font-size:.74rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--art-muted); margin-bottom:.8rem;
}
.side-price{ list-style:none; padding:0; margin:0; }
.side-price li{
    display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
    padding:.5rem 0; border-bottom:1px dashed var(--art-line);
    font-size:.88rem; color:var(--art-body);
}
.side-price li:last-child{ border-bottom:0; }
.side-price b{ color:var(--art-blue-dark); white-space:nowrap; font-size:.9rem; }
.side-card--cta{
    background:linear-gradient(150deg,#0F3B73,#1B6FD8);
    border-color:transparent; color:#fff;
}
.side-card--cta .side-card__title{ color:rgba(255,255,255,.75); }
.side-card--cta p{ font-size:.88rem; color:rgba(255,255,255,.88); line-height:1.6; margin-bottom:.9rem; }
.side-card--cta .cta__btn{ width:100%; justify-content:center; margin-bottom:.5rem; }
.side-card--cta .cta__btn:last-child{ margin-bottom:0; }
.side-links{ list-style:none; padding:0; margin:0; }
.side-links li{ border-bottom:1px solid var(--art-line); }
.side-links li:last-child{ border-bottom:0; }
.side-links a{
    display:block; padding:.6rem 0; font-size:.88rem; font-weight:500;
    color:var(--art-body); text-decoration:none; line-height:1.45;
    transition:color .2s, padding-left .2s;
}
.side-links a:hover{ color:var(--blue); padding-left:.3rem; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-list .accordion-item{
    border:1px solid var(--art-line); border-radius:12px !important;
    margin-bottom:.7rem; overflow:hidden; background:#fff;
}
.faq-list .accordion-item .accordion-button{
    font-family:var(--font,sans-serif); font-weight:600; font-size:1.02rem;
    color:var(--art-ink) !important; background-color:#fff; padding:1rem 1.15rem;
    box-shadow:none !important;
}
.faq-list .accordion-item .accordion-button:not(.collapsed){
    background-color:var(--art-tint); color:var(--art-blue-dark) !important;
}
.faq-list .accordion-button:focus-visible{ outline:3px solid rgba(27,111,216,.4); outline-offset:-3px; }
.faq-list .accordion-body{
    padding:0 1.15rem 1.1rem; color:var(--art-body);
    font-size:1rem; line-height:1.7;
}

/* ── Author box ────────────────────────────────────────────── */
.author-box{
    display:flex; flex-wrap:wrap; gap:1.1rem; align-items:flex-start;
    border:1px solid var(--art-line); border-radius:16px;
    background:var(--art-tint); padding:1.4rem 1.5rem; margin-top:2.5rem;
}
.author-box img{
    width:78px; height:78px; border-radius:50%; object-fit:cover; flex:0 0 auto;
    border:3px solid #fff; box-shadow:0 6px 18px -8px rgba(10,22,40,.5);
}
.author-box__body{ flex:1 1 260px; }
.author-box__eyebrow{
    font-size:.7rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--art-muted); margin-bottom:.2rem;
}
.author-box h3{ margin:0 0 .15rem !important; font-size:1.15rem !important; color:var(--art-ink) !important; }
.author-box__role{ font-size:.84rem; color:var(--art-blue-dark); font-weight:600; margin-bottom:.5rem; }
.author-box p{ font-size:.92rem; line-height:1.65; color:var(--art-body); margin:0 0 .6rem; }
.author-box .cred{ display:flex; flex-wrap:wrap; gap:.4rem; }
.author-box .cred span{
    background:#fff; border:1px solid var(--art-line); border-radius:999px;
    padding:.25rem .7rem; font-size:.76rem; color:var(--art-body); font-weight:500;
}

/* ── Related posts ─────────────────────────────────────────── */
.related-wrap{ background:#F6F9FC; padding:3.25rem 0; }
.related-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media (min-width:576px){ .related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:992px){ .related-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.related-card{
    background:#fff; border:1px solid var(--art-line); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column; height:100%;
    transition:transform .25s, box-shadow .25s;
}
.related-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -26px rgba(10,22,40,.55); }
.related-card img{ width:100%; height:150px; object-fit:cover; display:block; }
.related-card__body{ padding:.95rem 1.05rem 1.1rem; }
.related-card__tag{
    font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--art-muted); display:block; margin-bottom:.3rem;
}
.related-card h3{
    font-size:1rem !important; line-height:1.4; margin:0 !important;
}
.related-card h3 a{
    color:var(--art-ink); text-decoration:none; font-weight:600;
}
.related-card h3 a:hover{ color:var(--blue); }

/* ── Misc ──────────────────────────────────────────────────── */
.art-divider{ height:1px; background:var(--art-line); border:0; margin:2.5rem 0 0; }
@media (prefers-reduced-motion:reduce){
    .factor-card, .related-card, .cta__btn, .reading-progress span{ transition:none !important; }
    .factor-card:hover, .related-card:hover, .cta__btn:hover{ transform:none !important; }
}