/* Manthle content pages (guides, glossary, blog, comparisons, services, solutions, industries and their hubs).
   Built on Ground: biite.css supplies the tokens (navy ink, bone white, raised, signal coral, Oxygen/Switzer/
   Schoolbell) and the components (flow-btn, tekstlink, kop-display, kop-sectie, menu, vraag, voet-reveal);
   ground.css adds Manthle's pieces. Only what the content pages need beyond those is here. */

.c-main{padding-top:5.5rem}
@media (min-width:768px){.c-main{padding-top:7rem}}
.c-wrap{max-width:1600px;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:768px){.c-wrap{padding-inline:2.5rem}}
.c-section{padding-block:4rem}
@media (min-width:768px){.c-section{padding-block:6rem}}
.c-section--tight{padding-block:2rem}
@media (min-width:768px){.c-section--tight{padding-block:3rem}}

/* Breadcrumbs, eyebrow, meta */
.c-crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;list-style:none;margin:0;padding:0;font-size:.875rem;color:var(--ink-78)}
.c-crumbs li+li:before{content:"/";margin-right:.5rem;color:#1017314d}
.c-crumbs a{color:inherit;text-decoration:none;transition:color .3s var(--ease-out)}
.c-crumbs a:hover,.c-crumbs a:focus-visible{color:var(--color-vivid)}
.c-crumbs [aria-current]{color:#1017319e}
.c-eyebrow{margin-top:2.5rem;font-size:.875rem;color:#1017319e}
.c-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin-top:2.5rem;font-size:.875rem;color:#1017319e}
.c-meta span:first-child{color:var(--color-vivid);font-weight:600}
.c-h1{margin-top:.9rem;max-width:22ch;text-wrap:balance}
.c-lead{margin-top:1.75rem;max-width:56ch;font-size:1.125rem;line-height:1.7;color:var(--ink-78)}
@media (min-width:768px){.c-lead{font-size:1.25rem}}
.c-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2.25rem}

/* Article and comparison heroes: copy on the left, a Ground still life on the right (desktop only) */
.c-hero__grid{display:grid;gap:2.5rem}
@media (min-width:1024px){.c-hero__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:4rem;align-items:end}}
.c-hero__figure{display:none;margin:0;border-radius:1.5rem;overflow:hidden;background:var(--color-raised);aspect-ratio:1}
@media (min-width:1024px){.c-hero__figure{display:block}}
.c-hero__figure img{width:100%;height:100%;object-fit:cover;display:block}

/* The answer-first passage, under the H1 */
.c-answer{position:relative;margin-top:2rem;max-width:62rem;border-radius:1.5rem;background:var(--color-raised);padding:2.25rem 1.75rem 1.75rem}
@media (min-width:768px){.c-answer{padding:2.5rem 2.75rem 2.25rem}}
.c-answer p{font-size:1.125rem;line-height:1.7;color:var(--color-deep);max-width:68ch}
@media (min-width:768px){.c-answer p{font-size:1.25rem}}
.c-answer__label{position:absolute;top:-.85rem;left:1.5rem;color:var(--color-vivid);background:var(--color-surface);padding:.1rem .6rem;border-radius:999px}

/* Article body: contents on the left, the reading column on the right */
.c-body{display:grid;gap:2.5rem;padding-top:3.5rem}
@media (min-width:1024px){.c-body{grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:4rem;padding-top:5rem}}
.c-body__aside{display:none}
@media (min-width:1024px){.c-body__aside{display:block;position:sticky;top:6.5rem;align-self:start}}
.c-toc__title{font-size:.875rem;font-weight:700}
.c-toc ol{list-style:none;margin:.9rem 0 0;padding:0;border-left:1.5px solid #10173126}
.c-toc a{display:block;padding:.35rem 0 .35rem 1rem;margin-left:-1.5px;border-left:1.5px solid transparent;font-size:.875rem;line-height:1.4;color:var(--ink-78);text-decoration:none;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.c-toc a:hover,.c-toc a:focus-visible{color:var(--color-vivid);border-left-color:var(--color-vivid)}
.c-aside-cta{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #1017311f;font-size:.875rem;color:#1017319e}
.c-aside-cta .tekstlink{font-size:15px}

/* Prose */
.c-prose{max-width:72ch;font-size:1.0625rem;line-height:1.75;color:var(--ink-78)}
.c-prose>*+*{margin-top:1.25rem}
.c-prose h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:1.12;color:var(--color-deep);font-size:clamp(1.6rem,2.2vw,2.25rem);margin-top:3.5rem;scroll-margin-top:6rem}
.c-prose h2:first-child{margin-top:0}
.c-prose h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--color-deep);font-size:1.25rem;margin-top:2.25rem;scroll-margin-top:6rem}
.c-prose h2+*,.c-prose h3+*{margin-top:.9rem}
.c-prose strong{color:var(--color-deep);font-weight:600}
.c-prose a{color:var(--color-deep);text-decoration:underline;text-decoration-color:var(--color-vivid);text-decoration-thickness:2px;text-underline-offset:4px;transition:color .3s var(--ease-out)}
.c-prose a:hover,.c-prose a:focus-visible{color:var(--color-vivid)}
.c-prose ul,.c-prose ol{padding:0;list-style:none}
.c-prose li{position:relative;padding-left:1.6rem}
.c-prose li+li{margin-top:.6rem}
.c-prose ul>li:before{content:"";position:absolute;left:.35rem;top:.72em;width:.4rem;height:.4rem;border-radius:50%;background:var(--color-vivid)}
.c-prose ol{counter-reset:c-ol}
.c-prose ol>li{counter-increment:c-ol;padding-left:2.4rem}
.c-prose ol>li:before{content:counter(c-ol,decimal-leading-zero);position:absolute;left:0;top:.05em;font-family:var(--font-display);font-weight:700;font-size:.8rem;line-height:1.6rem;width:1.75rem;height:1.75rem;text-align:center;border-radius:999px;background:var(--color-raised);color:var(--color-deep)}
.c-prose--intro{padding-top:3rem;font-size:1.125rem}

/* Tables */
.c-table{max-width:100%;overflow-x:auto;border-radius:1.25rem;border:1px solid #1017311f;-webkit-overflow-scrolling:touch}
.c-prose .c-table{margin-top:1.75rem;margin-bottom:.5rem}
@media (min-width:1024px){.c-prose--compare .c-table{width:min(100%,64rem);max-width:none}}
.c-table:focus-visible{outline:2px solid var(--color-deep);outline-offset:2px}
.c-table table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.55}
.c-table thead th{background:var(--color-deep);color:var(--color-surface);font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;text-align:left;padding:.95rem 1.1rem;white-space:nowrap}
.c-table tbody th,.c-table td{padding:.9rem 1.1rem;text-align:left;vertical-align:top;border-top:1px solid #1017311a;min-width:11rem}
.c-table tbody th{color:var(--color-deep);font-weight:600;background:#f1f0e980}
.c-table tbody tr:hover td,.c-table tbody tr:hover th{background:var(--color-raised)}

/* Landing (services, solutions, industries) */
.c-landing{display:grid;gap:2.5rem;align-items:center}
@media (min-width:1024px){.c-landing{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem}}
.c-landing__figure{position:relative;margin:0;border-radius:1.5rem;overflow:hidden;background:var(--color-raised);aspect-ratio:4/3}
@media (min-width:1024px){.c-landing__figure{aspect-ratio:1;margin-top:1.5rem;max-height:34rem;justify-self:end;width:100%}}
.c-landing__figure img{width:100%;height:100%;object-fit:cover;display:block}
.c-landing__note{position:absolute;left:7%;bottom:7%;color:#fffef7;font-size:1.45rem;text-shadow:0 1px 10px #10173159}
.c-bands{padding-top:3rem}
@media (min-width:768px){.c-bands{padding-top:5rem}}
.c-band{display:grid;gap:1.25rem;padding-block:2.5rem;border-top:2px solid var(--color-deep)}
.c-band+.c-band{border-top:1px solid #10173133}
@media (min-width:1024px){.c-band{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;padding-block:3.5rem}}
.c-band__title{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.6rem,2.3vw,2.4rem);color:var(--color-deep);max-width:18ch;scroll-margin-top:6rem}
@media (min-width:1024px){.c-band__title{position:sticky;top:6.5rem;align-self:start}}

/* Comparisons */
.c-hero--compare .c-h1{max-width:20ch}
.c-vs{display:flex;align-items:stretch;gap:.6rem;margin-top:2rem;max-width:44rem}
.c-vs__side{flex:1;display:flex;align-items:center;min-height:5.5rem;padding:1.1rem 1.4rem;border-radius:1.25rem;background:var(--color-raised);font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:1.15rem;line-height:1.2;color:var(--color-deep)}
.c-vs__side--b{background:var(--color-deep);color:var(--color-surface);justify-content:flex-end;text-align:right}
.c-vs__mid{align-self:center;flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:999px;background:var(--color-vivid);color:var(--color-surface);font-family:Schoolbell,cursive;font-size:1.3rem;margin-inline:-1.4rem;z-index:1;box-shadow:0 0 0 5px var(--color-surface)}
@media (min-width:768px){.c-vs__side{font-size:1.5rem;min-height:7rem;padding:1.4rem 2rem}}
.c-verdict{margin-top:2.5rem!important;padding:1.75rem 1.5rem;border-radius:1.5rem;background:var(--color-raised);border-left:4px solid var(--color-vivid)}
@media (min-width:768px){.c-verdict{padding:2.25rem 2.5rem}}
.c-verdict>*+*{margin-top:1.1rem}
.c-verdict h2{margin-top:0}
.c-verdict+.c-verdict{border-left-color:var(--color-deep)}

/* Cards (related pages, hubs) */
.c-cards{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:640px){.c-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.c-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.c-card{position:relative;display:flex;flex-direction:column;min-height:14rem;padding:1.75rem;padding-top:4.25rem;border-radius:1.5rem;background:var(--color-raised);color:var(--color-deep);text-decoration:none;transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
@media (min-width:768px){.c-card{padding:2.1rem;padding-top:4.75rem}}
.c-card:hover,.c-card:focus-visible{background:var(--color-vivid);color:var(--color-surface)}
.c-card:focus-visible{outline:2px solid var(--color-deep);outline-offset:3px}
.c-card__arrow{position:absolute;right:1.75rem;top:1.75rem;transition:transform .3s var(--ease-out)}
.c-card:hover .c-card__arrow{transform:translate(4px,-4px)}
.c-card__kicker{position:absolute;left:1.75rem;top:1.9rem;font-size:.8125rem;opacity:.7}
@media (min-width:768px){.c-card__kicker{left:2.1rem;top:2.15rem}.c-card__arrow{right:2.1rem;top:2.1rem}}
.c-card__title{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.03em;line-height:1.15}
.c-card__text{margin-top:.9rem;font-size:.9375rem;line-height:1.6;opacity:.82}

/* FAQ and sources */
.c-faq{max-width:864px;margin-inline:auto}
.c-faq .kop-sectie{text-align:center}
.c-sources{max-width:864px;margin-inline:auto;border-top:1px solid #1017311f;padding-top:1.5rem}
.c-sources__title{font-size:1rem;font-weight:700;color:var(--color-deep)}
.c-sources ol{margin-top:.9rem;padding-left:1.25rem;font-size:.9375rem;line-height:1.6;color:var(--ink-78)}
.c-sources li+li{margin-top:.4rem}
.c-sources a{color:inherit;text-decoration:underline;text-decoration-color:#10173166;text-underline-offset:3px;overflow-wrap:anywhere}
.c-sources a:hover{color:var(--color-vivid)}

/* Hubs */
.c-hub{display:grid;gap:2.5rem;align-items:end}
@media (min-width:1024px){.c-hub{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:4rem}}
.c-hub__figure{display:none;margin:0;border-radius:1.5rem;overflow:hidden;aspect-ratio:4/3;background:var(--color-raised)}
@media (min-width:1024px){.c-hub__figure{display:block}}
.c-hub__figure img{width:100%;height:100%;object-fit:cover;display:block}
.c-cards--hub{margin-top:1rem}
.c-az{display:grid;gap:0 4rem;margin-top:1rem}
@media (min-width:1024px){.c-az{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-az__group{display:grid;grid-template-columns:3rem 1fr;border-top:1px solid #10173126;padding-block:1.25rem}
.c-az__letter{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--color-vivid);line-height:1.2}
.c-az ul{list-style:none;margin:0;padding:0}
.c-az li+li{margin-top:1rem}
.c-az a{display:block;text-decoration:none;color:var(--color-deep)}
.c-az__term{display:block;font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-.02em;transition:color .3s var(--ease-out)}
.c-az a:hover .c-az__term,.c-az a:focus-visible .c-az__term{color:var(--color-vivid)}
.c-az__def{display:block;margin-top:.25rem;font-size:.9375rem;line-height:1.55;color:var(--ink-78)}
.c-pills{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0}
.c-pills a{display:inline-flex;padding:.7rem 1.3rem;border-radius:999px;border:1.5px solid #10173133;color:var(--color-deep);text-decoration:none;font-weight:500;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out)}
.c-pills a:hover,.c-pills a:focus-visible{background:var(--color-deep);border-color:var(--color-deep);color:var(--color-surface)}

/* The nav marks the current section */
header nav a[aria-current="page"]{color:var(--color-vivid)}