/* =========================================================
   SIKTLINJE – GLOBAL CSS
========================================================= */

:root {
    --ink: #14140f;
    --white: #ffffff;
    --accent: #ff5a2b;
    --accent-dark: #d94820;
    --muted: #66665f;
    --line: #e7e4dc;
    --soft: #f8f7f3;
    --dark: #171713;
    --container: 1240px;
}


/* =========================================================
   RESET
========================================================= */

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--white);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

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

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(100%, var(--container));
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 46px);
}


/* =========================================================
   GLOBAL TYPOGRAFI
========================================================= */

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    letter-spacing: -0.035em;
}

.eyebrow {
    margin-bottom: 14px;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.accent {
    color: var(--accent);
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 100%;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-header__inner {
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
    gap: 30px;
}


/* =========================================================
   LOGGA
========================================================= */

.site-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

.site-logo__image {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 50px;
    object-fit: contain;
}

.site-logo__text {
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 800;
}


/* =========================================================
   HUVUDMENY
========================================================= */

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.site-nav__list > li > a {
    display: block;
    padding: 10px 0;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 650;
    text-decoration: none;
}

.site-nav__list > li > a:hover,
.site-nav__list > .current-menu-item > a,
.site-nav__list > .current-menu-ancestor > a {
    color: var(--accent-dark);
}


/* =========================================================
   DROPDOWN – TJÄNSTER
========================================================= */

.site-nav__list .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.site-nav__list .menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.site-nav__list .sub-menu {
    position: absolute;
    z-index: 2000;
    top: calc(100% + 8px);
    left: 50%;
    min-width: 230px;
    margin: 0;
    padding: 9px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(20, 20, 15, 0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 7px);

    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s ease;
}

.site-nav__list .menu-item-has-children::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 16px;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.site-nav__list .sub-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list .sub-menu a {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus {
    color: var(--accent-dark);
    background: var(--soft);
}


/* =========================================================
   HEADER CTA
========================================================= */

.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 20px;
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.header-button:hover {
    background: var(--accent-dark);
}


/* =========================================================
   MOBILKNAPP
========================================================= */

.site-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}

.site-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 72px 0 28px;
    color: var(--white);
    background: #10100d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: clamp(36px, 6vw, 80px);
}

.site-footer .site-logo {
    color: var(--white);
}

.site-footer .site-logo__image {
    max-width: 170px;
    max-height: 48px;
}

.site-footer .site-logo__text {
    color: var(--white);
}

.site-footer__brand p {
    max-width: 430px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.56);
    line-height: 1.7;
}

.footer-contact-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
}

.footer-contact-link:hover {
    color: var(--accent);
}

.site-footer h3 {
    margin-bottom: 18px;
    color: var(--white);
    font-size: 0.95rem;
    letter-spacing: 0;
}

.site-footer__menu {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__menu a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.site-footer__menu a:hover {
    color: var(--white);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82rem;
}

.back-to-top {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.82rem;
    text-decoration: none;
}

.back-to-top:hover {
    color: var(--white);
}


/* =========================================================
   RESPONSIV HEADER
========================================================= */

@media (max-width: 1050px) {

    .site-menu-toggle {
        display: block;
    }

    .header-button {
        display: none;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        margin: 0;
        padding: 12px clamp(20px, 4vw, 46px) 22px;
        border-bottom: 1px solid var(--line);
        background: var(--white);
        box-shadow: 0 18px 38px rgba(20, 20, 15, 0.08);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav__list {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .site-nav__list > li {
        width: 100%;
    }

    .site-nav__list > li > a {
        display: flex;
        width: 100%;
        padding: 13px 10px;
        border-radius: 9px;
    }

    .site-nav__list > li > a:hover {
        background: var(--soft);
    }

    .site-nav__list .menu-item-has-children > a {
        justify-content: space-between;
    }

    .site-nav__list .sub-menu {
        position: static;
        min-width: 0;
        margin: 0;
        padding: 3px 0 7px 18px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .site-nav__list .menu-item-has-children::before {
        display: none;
    }

    .site-nav__list .sub-menu a {
        padding: 10px 12px;
        color: var(--muted);
        font-size: 0.88rem;
        font-weight: 600;
        white-space: normal;
    }

    .site-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .site-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .site-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}


/* =========================================================
   RESPONSIV FOOTER
========================================================= */

@media (max-width: 760px) {

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}


@media (max-width: 580px) {

    .container {
        padding-inline: 18px;
    }

    .site-header__inner {
        min-height: 68px;
    }

    .site-logo__image {
        max-width: 145px;
        max-height: 40px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__brand {
        grid-column: auto;
    }

    .site-footer__bottom {
        flex-direction: column;
    }
}
/* =========================================================
   TILLGÄNGLIGHET – FÄRGKONTRAST
   ========================================================= */

/*
 * Siktlinjes vanliga accentfärg kan fortsätta användas
 * för större grafiska ytor/dekorationer.
 *
 * För mindre text och länkar använder vi en mörkare
 * orange för tillräcklig kontrast mot ljus bakgrund.
 */

:root {
    --color-orange-text: #b83212;
    --color-orange-hover: #8f260e;
    --color-dark-text: #171713;
    --color-muted-text: #5f5f58;
}


/* Eyebrows / små versala rubriker
   ----------------------------------------- */

.section--white .eyebrow,
.section--soft .eyebrow,
.analysis-page .eyebrow {
    color: var(--color-orange-text);
}


/* Textlänkar på ljus bakgrund
   ----------------------------------------- */

.section--white .text-link,
.section--soft .text-link,
.service-card .text-link,
.knowledge-card .text-link {
    color: var(--color-orange-text);
}

.section--white .text-link:hover,
.section--soft .text-link:hover,
.service-card .text-link:hover,
.knowledge-card .text-link:hover {
    color: var(--color-orange-hover);
}


/* Tags i tjänstekorten
   ----------------------------------------- */

.service-card__tag {
    color: var(--color-orange-text);
}


/* Processnummer 01–06
   ----------------------------------------- */

.process-grid .process-item > span,
.process-card > span,
.process-step > span {
    color: var(--color-orange-text);
}


/* Kunskapsbankens kategorier
   ----------------------------------------- */

.knowledge-card span,
.article-card span {
    color: var(--color-orange-text);
}


/* Orange knappar
   Vit text på den nuvarande ljusa orange färgen
   ger för låg kontrast.

   Därför används mörk text på orange knapp.
   ----------------------------------------- */

.btn--orange,
a.btn--orange,
button.btn--orange {
    color: #171713;
    font-weight: 700;
}

.btn--orange:hover,
a.btn--orange:hover,
button.btn--orange:hover {
    color: #171713;
}


/* Mörka sektioner
   ----------------------------------------- */

.section--dark {
    color: #ffffff;
}

.section--dark p,
.section--dark li {
    color: #e8e8e3;
}

.section--dark .text-link,
.section--dark .text-link--light {
    color: #ffffff;
}

.section--dark .text-link:hover,
.section--dark .text-link--light:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* Footer
   ----------------------------------------- */

.site-footer,
.site-footer p {
    color: #e8e8e3;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ===== Kontrast enligt WCAG AA (PageSpeed: tillgänglighet) =====
   Orange #d94820 ger 3.86-4.29 mot ljus bakgrund, gränsen är 4.5.
   Mörkare variant används där färgen bär text. */
:root{--accent-ink:#b53a18}

.eyebrow,
.service-card__tag,
.article-card > span,
.process-step > span,
.site-nav__list a,
.text-link{color:var(--accent-ink)}

.btn--orange{background:#c13e1b;color:#fff}
.btn--orange:hover,
.btn--orange:focus{background:#a83513;color:#fff}

.site-footer__bottom p{color:rgba(255,255,255,.72)}

/* ===== Branschsidor ===== */
.bransch-hero{padding:72px 0 48px;background:var(--soft,#f8f7f3);border-bottom:1px solid var(--line,#e6e4dc)}
.bransch-hero h1{margin:8px 0 16px;font-size:clamp(2rem,5vw,3.2rem);line-height:1.08}
.bransch-hero__lead{max-width:60ch;font-size:1.08rem;color:#4a4a44}
.bransch-hero__knappar{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bransch-sektion{padding:56px 0}
.bransch-sektion--soft{background:var(--soft,#f8f7f3)}
.bransch-sektion h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;margin:8px 0 14px}
.bransch-sektion p{max-width:68ch}
.bransch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:26px}
.bransch-kort{background:#fff;border:1px solid var(--line,#e6e4dc);border-radius:16px;padding:22px}
.bransch-kort h3{margin:0 0 8px;font-size:1.05rem}
.bransch-kort p{margin:0;color:#4a4a44;font-size:.96rem}
.bransch-lista{margin:18px 0 0;padding-left:20px;max-width:68ch}
.bransch-lista li{margin-bottom:8px}
.bransch-faq details{border-top:1px solid var(--line,#e6e4dc);padding:16px 0}
.bransch-faq summary{cursor:pointer;font-weight:700}
.bransch-faq p{margin:10px 0 0;color:#4a4a44}
.bransch-cta{background:#171713;color:#fff;padding:56px 0}
.bransch-cta h2{color:#fff;margin-top:0}
.bransch-cta p{color:rgba(255,255,255,.78);max-width:60ch}
.bransch-cta .eyebrow{color:#ef6a3d}
.bransch-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.bransch-index a{display:block;background:#fff;border:1px solid var(--line,#e6e4dc);border-radius:16px;padding:20px;text-decoration:none;color:inherit}
.bransch-index a:hover{border-color:#b53a18}
.bransch-index strong{display:block;margin-bottom:6px;font-size:1.02rem}
.bransch-index span{color:#4a4a44;font-size:.93rem}
.bransch-relaterat{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

/* ===== Prissida ===== */
.pris-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px;align-items:stretch}
.pris-kort{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column}
.pris-kort--vald{border-color:#b53a18;box-shadow:0 10px 32px rgba(19,35,38,.08)}
.pris-kort__markering{display:inline-block;align-self:flex-start;margin-bottom:10px;padding:4px 10px;border-radius:999px;background:#fff0ea;color:#b53a18;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pris-kort h3{margin:0 0 4px;font-size:1.15rem}
.pris-kort__pris{font-size:1.9rem;font-weight:800;line-height:1.1;margin:8px 0 2px}
.pris-kort__enhet{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.pris-kort ul{margin:0 0 20px;padding-left:18px;color:#4a4a44}
.pris-kort li{margin-bottom:7px;font-size:.95rem}
.pris-kort .btn{margin-top:auto}
.pris-rad{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:18px 0;border-block-end:1px solid var(--line)}
.pris-rad__text{max-width:60ch}
.pris-rad__text strong{display:block;margin-bottom:4px}
.pris-rad__text span{color:var(--muted);font-size:.95rem}
.pris-rad__belopp{font-weight:800;white-space:nowrap}
.pris-not{margin-top:22px;color:var(--muted);font-size:.93rem;max-width:70ch}

/* ===== Knappar (gäller alla sidor, inte bara startsidan) ===== */
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:13px 23px;border:2px solid transparent;border-radius:999px;font-weight:750;text-decoration:none;cursor:pointer;transition:.18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--dark{color:#fff;background:var(--ink)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{border-color:#b53a18;color:#b53a18}
.btn--orange,a.btn--orange,button.btn--orange{background:#c13e1b;color:#fff}
.btn--orange:hover,.btn--orange:focus{background:#a83513;color:#fff}
.btn--full{width:100%;border:0}
.btn--light-outline{color:#fff;border-color:rgba(255,255,255,.6)}
.bransch-cta .btn--orange{margin-top:6px}
.bransch-hero__buttons .btn{flex:0 0 auto}
@media(max-width:520px){.bransch-hero__buttons .btn,.pris-kort .btn{width:100%}}

/* Hero på bransch- och prissidor: luft mellan text och knappar */
.bransch-hero__lead{max-width:62ch;margin:0 0 8px;font-size:1.06rem;line-height:1.65;color:#4a4a44}
.bransch-hero__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.bransch-hero h1{margin:8px 0 18px}
.bransch-sektion > .container > .eyebrow{margin-bottom:8px}
.bransch-sektion h2{margin:0 0 14px}
.bransch-sektion > .container > p{margin:0 0 6px;line-height:1.65}
.bransch-lista{margin-top:26px}
.bransch-grid{margin-top:30px}
.bransch-relaterat{margin-top:26px}
.pris-rad{align-items:baseline}
.pris-rad:first-of-type{margin-top:26px;border-block-start:1px solid var(--line)}
.bransch-cta .btn{margin-top:10px}
.btn--white{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--white:hover,.btn--white:focus{background:#fff;color:#b53a18;border-color:#b53a18}

/* ===== Artikelmall (gemensam för nya guider) ===== */
/* =========================================================
   SIKTLINJE – ARTIKELMALL / KUNSKAPSBANK
========================================================= */

.article-page {
    overflow: hidden;
}

.article-page a {
    color: inherit;
}


/* =========================================================
   HERO
========================================================= */

.article-hero {
    padding: clamp(70px, 8vw, 110px) 0 clamp(55px, 7vw, 90px);
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 90, 43, 0.10), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    border-bottom: 1px solid var(--line);
}

.article-hero__inner {
    max-width: 980px;
}

.article-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 0.8rem;
}

.article-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.article-breadcrumbs a:hover {
    color: var(--accent-dark);
}

.article-hero h1 {
    max-width: 920px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3.2rem, 6.4vw, 6.2rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.article-hero h1 .accent {
    color: var(--accent);
}

.article-hero__lead {
    max-width: 760px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.5vw, 1.25rem);
    line-height: 1.75;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 26px;
    color: #77766f;
    font-size: 0.82rem;
    font-weight: 650;
}


/* =========================================================
   LAYOUT
========================================================= */

.article-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 760px);
    gap: clamp(50px, 8vw, 100px);
    align-items: start;
    padding-top: clamp(65px, 8vw, 100px);
    padding-bottom: clamp(85px, 10vw, 130px);
}


/* =========================================================
   TOC
========================================================= */

.article-toc {
    position: sticky;
    top: 120px;
    padding-top: 4px;
}

.article-toc > span {
    display: block;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.article-toc nav {
    display: grid;
    border-left: 1px solid var(--line);
}

.article-toc a {
    padding: 8px 0 8px 16px;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
    text-decoration: none;
    transition:
        color 0.18s ease,
        border-color 0.18s ease;
}

.article-toc a:hover {
    color: var(--accent-dark);
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.article-content {
    min-width: 0;
}

.article-content section {
    scroll-margin-top: 110px;
}

.article-content section + section {
    margin-top: clamp(50px, 7vw, 80px);
}

.article-content h2 {
    max-width: 760px;
    margin: 0 0 20px;
    color: var(--ink);
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.article-content h3 {
    margin: 34px 0 12px;
    color: var(--ink);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.article-content p {
    margin: 0 0 20px;
    color: #4f4f49;
    font-size: 1.04rem;
    line-height: 1.82;
}

.article-content strong {
    color: var(--ink);
}

.article-content em {
    color: #3f3f3a;
}

.article-content section a {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-content section a:hover {
    color: var(--accent);
}


/* =========================================================
   LISTS
========================================================= */

.article-content ul,
.article-content ol {
    margin: 22px 0 28px;
    padding-left: 22px;
}

.article-content li {
    margin-bottom: 10px;
    color: #4f4f49;
    line-height: 1.7;
}


/* =========================================================
   QUOTE / INFO BOXES
========================================================= */

.article-note,
.article-tip {
    margin: 32px 0;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--soft);
}

.article-note strong,
.article-tip strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
}

.article-note p,
.article-tip p {
    margin: 0;
}


/* =========================================================
   CTA
========================================================= */

.article-cta {
    margin-top: clamp(70px, 9vw, 110px);
    padding: clamp(32px, 5vw, 48px);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 0%, rgba(255,90,43,.16), transparent 35%),
        var(--dark);
}

.article-cta .eyebrow {
    color: var(--accent);
}

.article-cta h2 {
    max-width: 650px;
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.article-cta p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.62);
    line-height: 1.75;
}

.article-btn {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 13px 22px;
    border-radius: 999px;
    color: #fff !important;
    background: var(--accent);
    font-weight: 800;
    text-decoration: none !important;
    transition:
        transform .18s ease,
        background .18s ease;
}

.article-btn:hover {
    transform: translateY(-2px);
    background: var(--accent-dark);
}


/* =========================================================
   RELATED ARTICLES
========================================================= */

.article-related {
    margin-top: clamp(70px, 9vw, 110px);
    padding-top: 45px;
    border-top: 1px solid var(--line);
}

.article-related h2 {
    margin-bottom: 28px;
}

.article-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.article-related__grid a {
    display: flex;
    min-height: 170px;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink) !important;
    background: #fff;
    text-decoration: none !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.article-related__grid a:hover {
    transform: translateY(-3px);
    border-color: rgba(255,90,43,.35);
    box-shadow: 0 16px 35px rgba(20,20,15,.06);
}

.article-related__grid span {
    color: var(--accent-dark);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.article-related__grid strong {
    margin-top: 12px;
    font-size: 1.08rem;
    line-height: 1.3;
}

.article-related__grid small {
    margin-top: auto;
    padding-top: 22px;
    color: var(--muted);
    font-weight: 700;
}


/* =========================================================
   IMAGE SUPPORT
========================================================= */

.article-content figure {
    margin: 36px 0;
}

.article-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

.article-content figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
}


/* =========================================================
   TABLES
========================================================= */

.article-content table {
    width: 100%;
    margin: 30px 0;
    border-collapse: collapse;
    border: 1px solid var(--line);
    background: #fff;
}

.article-content th,
.article-content td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.article-content th {
    color: var(--ink);
    background: var(--soft);
    font-size: .85rem;
}

.article-content td {
    color: var(--muted);
    font-size: .9rem;
}


/* =========================================================
   FOCUS
========================================================= */

.article-page a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .article-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .article-toc {
        position: static;
        padding: 18px 0 22px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .article-toc nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
        border-left: 0;
    }

    .article-toc a {
        padding: 6px 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .article-related__grid {
        grid-template-columns: 1fr;
    }

    .article-related__grid a {
        min-height: 140px;
    }

}

@media (max-width: 580px) {

    .article-hero {
        padding-top: 55px;
    }

    .article-hero h1 {
        font-size: clamp(2.8rem, 13vw, 4.3rem);
    }

    .article-meta {
        display: grid;
        gap: 6px;
    }

    .article-toc nav {
        grid-template-columns: 1fr;
    }

    .article-content p {
        font-size: 1rem;
        line-height: 1.78;
    }

    .article-cta {
        padding: 26px 22px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .article-btn,
    .article-related__grid a,
    .article-toc a {
        transition: none;
    }

}