:root{

--ink: #0E1420; 
--ink-soft: #29313D;
--paper: #F3F5F7; 
--surface: #FFFFFF;
--surface-2: #F7F9FB;
--surface-translucent: rgba(255, 255, 255, .88); 
--line: #E3E7EC;
--line-strong: #CDD4DC;
--control-border: #858E9B; 
--muted: #5B6675;

--accent: #E8590C;
--accent-strong: #C74A08; 
--accent-weak: #FBEFE7;
--accent-ink: #B8420A; 
--on-accent: #FFFFFF; 

--ok: #0E7C57;
--ok-weak: #E7F4EF; 
--ok-ink: #0A6044; 
--warn: #B5820A; 
--warn-weak: #FAF2DC;
--warn-ink: #8A6308; 
--danger: #C0392B;
--danger-weak: #FBECEA;
--danger-ink: #A32A1E; 

--focus: 0 0 0 3px rgba(232, 89, 12, .32); 

--font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
--font-head: "Archivo", "Segoe UI", system-ui, sans-serif;
--font-display: var(--font-head);
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

--text-12: 12px; 
--text-13: 13px;
--text-14: 14px;
--text-16: 16px;
--text-18: 18px;
--text-20: 20px;
--text-24: 24px;
--text-30: 30px;
--text-38: 38px;
--text-48: 48px;
--leading-tight: 1.1; 
--leading-snug: 1.3; 
--leading-normal: 1.6; 

--space-2: 2px;
--space-4: 4px; 
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-72: 72px; 

--radius-sm: 5px;
--radius: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 14px; 
--radius-pill: 999px; 

--shadow-sm: 0 1px 2px rgba(14, 20, 32, .06);
--shadow: 0 2px 8px rgba(14, 20, 32, .08);
--shadow-lg: 0 6px 20px rgba(14, 20, 32, .10); 

--ease: cubic-bezier(.2, .7, .3, 1);
--dur: 160ms;

--bg: var(--paper);
--bg-soft: var(--surface-2);
--text: var(--ink);
--card: var(--surface);
--border: var(--line);
--accent2: var(--accent-strong); 
}


:root{
--bs-primary: #E8590C;
--bs-primary-rgb: 232, 89, 12;
--bs-primary-text-emphasis: #7A2E06;
--bs-primary-bg-subtle: #FBEFE7;
--bs-primary-border-subtle: #F4C9AE;
--bs-link-color: #B8420A;
--bs-link-color-rgb: 184, 66, 10;
--bs-link-hover-color: #9B3A06;
--bs-link-hover-color-rgb: 155, 58, 6;

--bs-warning: #B5820A;
--bs-warning-rgb: 181, 130, 10;
--bs-warning-text-emphasis: #8A6308;
--bs-warning-bg-subtle: #FAF2DC;
--bs-warning-border-subtle: #E4CE8A;
--bs-success: #0E7C57;
--bs-success-rgb: 14, 124, 87;
--bs-success-text-emphasis: #0A6044;
--bs-success-bg-subtle: #E7F4EF;
--bs-success-border-subtle: #9DD3BF;
--bs-danger: #C0392B;
--bs-danger-rgb: 192, 57, 43;
--bs-danger-text-emphasis: #A32A1E;
--bs-danger-bg-subtle: #FBECEA;
--bs-danger-border-subtle: #EBB2AB;

--bs-info: #3B6E7A;
--bs-info-rgb: 59, 110, 122;
--bs-info-text-emphasis: #234249;
--bs-info-bg-subtle: #E9F1F3;
--bs-info-border-subtle: #BFD6DB;
}

.btn-primary{
--bs-btn-bg: #C74A08;
--bs-btn-border-color: #C74A08;
--bs-btn-hover-bg: #A83C07;
--bs-btn-hover-border-color: #A83C07;
--bs-btn-active-bg: #A83C07;
--bs-btn-active-border-color: #A83C07;
--bs-btn-disabled-bg: #C74A08;
--bs-btn-disabled-border-color: #C74A08;
--bs-btn-focus-shadow-rgb: 232, 89, 12;
}

.text-bg-info,
.text-bg-success,
.text-bg-danger,
.text-bg-primary{
color: var(--on-accent) !important;
}
.text-bg-warning{
color: var(--ink) !important;
}



.nav-tabs{
--bs-nav-tabs-border-color: var(--control-border);
--bs-nav-tabs-link-active-border-color: var(--control-border) var(--control-border) var(--surface);
--bs-nav-tabs-link-hover-border-color: var(--control-border);
}
.bg-primary{ background-color: var(--accent-strong) !important; }
.text-primary{ color: var(--accent-ink) !important; }
.text-warning{ color: var(--warn-ink) !important; }
.text-success{ color: var(--ok-ink) !important; }
.text-danger{ color: var(--danger-ink) !important; }
.text-info{ color: #2C5560 !important; }

.btn-warning{
--bs-btn-bg: var(--warn); --bs-btn-border-color: var(--warn); --bs-btn-color: var(--ink);
--bs-btn-hover-bg: #9A6F09; --bs-btn-hover-border-color: #9A6F09; --bs-btn-hover-color: var(--ink);
--bs-btn-active-bg: #9A6F09; --bs-btn-active-border-color: #9A6F09;
}
.btn-outline-warning{
--bs-btn-color: var(--warn-ink); --bs-btn-border-color: var(--warn);
--bs-btn-hover-bg: var(--warn); --bs-btn-hover-border-color: var(--warn); --bs-btn-hover-color: var(--ink);
--bs-btn-active-bg: var(--warn); --bs-btn-active-border-color: var(--warn); --bs-btn-active-color: var(--ink);
}
.btn-success{
--bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-color: var(--on-accent);
--bs-btn-hover-bg: var(--ok-ink); --bs-btn-hover-border-color: var(--ok-ink);
--bs-btn-active-bg: var(--ok-ink); --bs-btn-active-border-color: var(--ok-ink);
}
.btn-outline-success{
--bs-btn-color: var(--ok-ink); --bs-btn-border-color: var(--ok);
--bs-btn-hover-bg: var(--ok); --bs-btn-hover-border-color: var(--ok); --bs-btn-hover-color: var(--on-accent);
--bs-btn-active-bg: var(--ok); --bs-btn-active-border-color: var(--ok);
}
.btn-outline-info{
--bs-btn-color: #2C5560; --bs-btn-border-color: var(--bs-info);
--bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-hover-color: var(--on-accent);
--bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info);
}
.btn-secondary{
--bs-btn-bg: var(--ink-soft); --bs-btn-border-color: var(--ink-soft); --bs-btn-color: var(--on-accent);
--bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
--bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink);
}
.btn-outline-light{
--bs-btn-color: var(--ink); --bs-btn-border-color: var(--control-border);
--bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--ink-soft); --bs-btn-hover-color: var(--ink);
}
.btn-outline-primary{
--bs-btn-color: #C74A08;
--bs-btn-border-color: #E8590C;

--bs-btn-hover-bg: #C74A08;
--bs-btn-hover-border-color: #C74A08;
--bs-btn-active-bg: #C74A08;
--bs-btn-active-border-color: #C74A08;
--bs-btn-focus-shadow-rgb: 232, 89, 12;
}

:root{
--bs-border-radius: var(--radius);
--bs-border-radius-sm: var(--radius-sm);
--bs-border-radius-lg: var(--radius-lg);
--bs-border-radius-xl: var(--radius-xl);
--bs-border-radius-pill: var(--radius-pill);
--bs-form-invalid-color: var(--danger-ink);
--bs-form-invalid-border-color: var(--danger);
--bs-form-valid-color: var(--ok-ink);
--bs-form-valid-border-color: var(--ok);
}

.form-control,
.form-select{
border-radius: var(--radius-sm);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text{
border-color: var(--control-border);
}
html, body{ height: 100%; }
body, body.app-body{
font-family: var(--font-body);
color: var(--text);
background: var(--paper);
}
body.article-page{
background: var(--surface);
}
a{ text-decoration: none; }

p a:not(.btn):not([class*="btn-"]):not(.link-muted),
li a:not(.btn):not([class*="btn-"]):not(.link-muted):not(.nav-link):not(.footer-link):not(.inbox-link):not(.inbox-tag){
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.text-muted{ color: var(--muted) !important; }
.link-muted{ color: var(--muted); }
.link-muted:hover{ color: var(--text); }
.container{ max-width: 1120px; }

h1, h2, h3{
letter-spacing: -.035em;
font-family: var(--font-head);
}
.display-5,
.display-6,
.hero-title{
letter-spacing: -.045em;
}
p{ margin-bottom: .9rem; }

.app-header{
position: sticky;
top: 0;
z-index: 1030;
backdrop-filter: blur(10px);
}

.app-nav{
background: var(--surface-translucent);
border-bottom: 1px solid var(--line);
}
.navbar-toggler{
border: 1px solid var(--control-border);
border-radius: var(--radius-xl);
padding: 9px 10px;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.navbar-toggler:hover{
background: var(--surface-2);
border-color: var(--ink-soft);
}
.navbar-toggler:focus{
box-shadow: var(--focus);
}
.navbar .nav-link{
color: var(--muted);
font-weight: 600;
border-radius: var(--radius-md);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navbar .nav-link:hover{
color: var(--ink);
background: var(--surface-2);
}
.navbar .nav-link:focus-visible{
outline: none;
box-shadow: var(--focus);
}
.primary-nav .nav-item.dropdown .dropdown-toggle::after{
margin-left: .35rem;
}

.docs-menu{
--bs-dropdown-min-width: 17rem;
padding: 6px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.docs-menu .dropdown-item{
display: block;
padding: 9px 12px;
border-radius: var(--radius-sm);
white-space: normal;
}
.docs-menu .dropdown-item:hover,
.docs-menu .dropdown-item:focus-visible{
background: var(--accent-weak);
}
.docs-menu-title{
display: block;
font-weight: 700;
color: var(--ink);
font-size: var(--text-16);
}
.docs-menu-note{
display: block;
margin-top: 1px;
font-size: var(--text-13);
line-height: 1.35;
color: var(--muted);
}
.nav-user *{ font-size: var(--text-16); }
.nav-auth-actions{
display: inline-flex;
align-items: center;
gap: var(--space-12);
}
.nav-login-link{
color: var(--muted);
font-weight: 700;
}
.nav-login-link:hover{
color: var(--ink);
}
.nav-login-link:focus-visible{
outline: none;
border-radius: var(--radius-sm);
box-shadow: var(--focus);
}
.nav-start-btn{
min-height: 40px;
padding-inline: 14px;
}

@media (max-width: 991.98px){
.navbar-collapse{
padding-top: var(--space-12);
padding-bottom: var(--space-12);
gap: 10px;
}
.primary-nav,
.mobile-account-menu{
width: 100%;
margin-bottom: 0 !important;
}
.primary-nav .nav-item + .nav-item,
.mobile-account-menu .nav-item + .nav-item{ margin-top: var(--space-4); }
.primary-nav .nav-link,
.mobile-account-menu .nav-link{
padding: 10px 12px;
border-radius: 10px;
font-weight: 700;
color: var(--ink-soft);
text-align: left;
}
.primary-nav .nav-link:hover,
.mobile-account-menu .nav-link:hover{
background: rgba(14, 20, 32,.05);
color: var(--ink);
}
.primary-nav .nav-link.disabled,
.mobile-account-menu .nav-link.disabled{
opacity: 1;
cursor: default;
color: var(--muted);
font-weight: 600;
background: transparent;
}
.primary-nav .dropdown-menu{
position: static !important;
transform: none !important;
margin: var(--space-4) 0 0;
padding: 6px 0 0 14px;
border: 0;
background: transparent;
box-shadow: none;
}
.primary-nav .dropdown-menu:not(.show){
display: none;
}
.primary-nav .dropdown-item{
padding: var(--space-8) var(--space-12);
border-radius: 10px;
font-weight: 600;
color: var(--ink-soft);
}
.primary-nav .dropdown-item:hover{
background: rgba(14, 20, 32,.05);
color: var(--ink);
}
.nav-user{
width: 100%;
margin-left: 0 !important;
display: block !important;
}
.mobile-nav-section{
font-family: var(--font-mono);
padding-top: var(--space-4);
padding-bottom: var(--space-4);
font-size: var(--text-12);
}
.mobile-account-section{
font-family: var(--font-mono);
padding-top: 14px;
padding-bottom: var(--space-4);
font-size: var(--text-12);
}
.mobile-account-summary{
display: grid;
gap: var(--space-2);
text-align: left;
padding: var(--space-12) var(--space-16) !important;
background: var(--surface-2);

border: 1px solid var(--control-border);
}
.mobile-account-summary-label{
font-weight: 800;
color: var(--ink);
}
.mobile-account-summary-meta{
font-size: var(--text-13);
color: var(--muted);
font-weight: 600;
}
}


.account-btn{
min-height: 42px;
padding: var(--space-8) var(--space-12);
border: 1px solid var(--control-border);
border-radius: var(--radius);
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
line-height: 1.1;
transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.account-btn:hover{
background: var(--surface-2);
border-color: var(--muted);
}
.account-btn:focus{
outline: none;
box-shadow: var(--focus);
border-color: var(--accent);
}

.account-avatar{
width: 20px;
height: 20px;
display: block;
flex: 0 0 auto;
color: var(--ink-soft);
}
.account-btn-copy{
display: grid;
gap: var(--space-2);
text-align: left;
}
.account-btn-label{
font-size: var(--text-13);
font-weight: 800;
color: var(--ink);
}
.account-btn-meta{
font-size: var(--text-12);
font-weight: 700;
color: var(--muted);
}
@media (max-width: 991.98px){
.account-avatar{ font-size: var(--text-16); }
}
.account-menu{
--bs-dropdown-min-width: 16rem;
padding-top: .5rem;
padding-bottom: .5rem;
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
border-radius: 10px;
}

@media (max-width: 575.98px){
.account-dropdown .dropdown-menu{
inset: auto 8px auto 8px !important; 
transform: none !important;
max-width: calc(100vw - 16px);
width: auto;
}
}
.account-menu-head{
display: grid;
gap: var(--space-4);
}
.account-menu-title{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
}
.account-menu-subtitle{
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-menu-stat{
margin-top: var(--space-12);
display: inline-flex;
align-items: baseline;
gap: var(--space-8);
padding: 7px 10px;
border-radius: 999px;
background: rgba(248,250,252,.9);
border: 1px solid var(--line);
}
.account-menu-stat-label{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 700;
}
.account-menu-stat-value{
font-size: var(--text-14);
font-weight: 800;
color: var(--ink);
}
.account-menu .dropdown-header{
font-family: var(--font-mono);
padding: .1rem 1rem .35rem;
font-size: var(--text-12);
font-weight: 800;
color: var(--muted);
}

.brand-lockup{
display: inline-flex;
align-items: center;
gap: .5em;
color: var(--ink);
text-decoration: none;
font-size: var(--text-20);
line-height: 1;
}
.brand-lockup:hover,
.brand-lockup:focus-visible{ color: var(--ink); }
.brand-glyph{
width: 1.5em;
height: 1.5em;
flex: 0 0 auto;
display: block;

transform: translateY(.03em);
}
.brand-text{
font-family: var(--font-head);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1;
}
.brand-badge{
background: rgba(14, 20, 32,.06);
color: var(--ink-soft);
border: 1px solid var(--line);
}

.app-main{ min-height: calc(100vh - 140px); }
.app-footer{
border-top: 1px solid var(--line);
background: rgba(255,255,255,.75);
}
.app-footer-minimal{
background: transparent;
border-top-color: transparent;
}
.footer-grid{
display: grid;
gap: var(--space-20);
}
@media (min-width: 768px){
.footer-grid{ grid-template-columns: 2fr 1.5fr 1fr; }
}

.footer-brand,
.footer-links,
.footer-meta{
padding: var(--space-20) 0 0;
border-top: 1px solid var(--line);
}
.footer-brand .small{
max-width: 40ch;
}
.footer-logo{
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: var(--space-8);
}
.footer-title{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 400;
letter-spacing: 0;
color: var(--muted);
margin-bottom: 10px;
}
.footer-nav{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-16);
}
@media (max-width: 575.98px){
.footer-nav{ grid-template-columns: 1fr; }
}
.footer-link{
color: var(--ink-soft);
font-weight: 600;
display: inline-flex;
align-items: center;
min-height: 44px;
border-radius: var(--radius-sm);
}
.footer-link:hover{
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-link:focus-visible{
outline: none;
box-shadow: var(--focus);
}
.footer-status{
display: inline-flex;
align-items: center;
gap: var(--space-8);
margin-bottom: 6px;
}
.footer-legal{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: var(--space-8) var(--space-12);
}
.footer-legal .footer-link{
padding-inline: 0;
min-height: auto;
}
.footer-bottom{
border-top: 1px solid var(--line);
margin-top: 18px;
padding-top: var(--space-12);
display: flex;
justify-content: center;
gap: var(--space-12);
align-items: center;
}
.status-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--ok);
}

.section{
scroll-margin-top: 90px;
position: relative;

background: #fff;
}
.section-soft{
background: var(--bg-soft);
}

.hero{
position: relative;
padding-top: 28px;
padding-bottom: var(--space-40);
overflow: clip;
}

.hero{
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.hero > .container{ position: relative; z-index: 1; }
@media (min-width: 992px){
.hero{
padding-top: var(--space-20);
padding-bottom: var(--space-40);
}
.hero > .container{
min-height: calc(100vh - 164px);
display: flex;
align-items: flex-start;
}
.hero > .container > .row{
width: 100%;
padding-top: clamp(78px, 12vh, 120px);
}
}
.hero-title{
letter-spacing: -0.9px;
line-height: 1.05;
max-width: 16ch;
}
@media (min-width: 992px){
.hero-title{ font-size: var(--text-48); }
}
.lead{
max-width: 34rem;
line-height: 1.6;
}

.hero-badges{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.badge-soft{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.70);
color: var(--ink-soft);
font-weight: 700;
font-size: var(--text-14);
}
.badge-soft-muted{
background: rgba(14, 20, 32,.03);
color: var(--ink-soft);
}

.eyebrow{
display: inline-flex;
align-items: center;
gap: var(--space-8);
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 400;
letter-spacing: 0;
color: var(--muted);
margin-bottom: 10px;
}
.section-head{
max-width: 70ch;
}
.section-head-centered{
margin-inline: auto;
text-align: center;
}
#credits .section-head{
max-width: 42rem;
}
#credits .section-head p{
max-width: 38rem;
}
#credits .section-head + .small{
margin-top: .35rem !important;
color: var(--ink-soft) !important;
line-height: 1.4;
}
.hero-card{
border-radius: var(--radius-xl);
padding: var(--space-20);
background: var(--surface);
}
.hero-code-label{
font-family: var(--font-mono);
margin-top: 14px;
margin-bottom: 6px;
font-weight: 800;
font-size: var(--text-14);
color: var(--ink-soft);
}
.hero-demo{
display: flex;
flex-direction: column;
gap: 14px;
}
.hero-quick-facts{
max-width: 34rem;
}
.hero-secondary-links{
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
}
.hero-secondary-links a{
min-height: 24px;
}
.hero-ctas{
display: grid !important;
grid-template-columns: 1fr;
gap: var(--space-12);
width: 100%;
align-items: stretch;
}
.hero-ctas > *{
width: 100%;
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-ctas .btn-premium-link{
border-radius: var(--radius-md);
border: 1px solid var(--control-border);
background: var(--surface);
color: var(--ink);
font-weight: 800;
}
.hero-ctas .btn-premium-link:hover{
background: var(--surface-2);
border-color: var(--ink-soft);
}
.hero-ctas .btn-premium-link:focus-visible{
box-shadow: var(--focus);
}
@media (min-width: 576px){
.hero-ctas{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.card-saas{
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow-sm);
}
.card-saas-head{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
padding: 6px 6px 10px 6px;
}
.pill{
display:inline-flex;
align-items:center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(14, 20, 32,.04);
color: var(--ink-soft);
font-weight: 700;
font-size: var(--text-13);
}
.pill-ghost{
background: rgba(255,255,255,.70);
border-color: var(--muted);
}

.codebox{
position: relative;
border: 1px solid var(--line);
background: rgba(14, 20, 32,.03);
border-radius: var(--radius-md);
overflow: hidden;
max-width: 100%;
}
.codebox:focus,
.codebox:focus-within{
outline: 2px solid rgba(232,89,12,.35);
outline-offset: 2px;
}
pre, code{
font-family: var(--font-mono);
font-size: var(--text-14);
}

:not(pre) > code{
color: var(--ink);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 1px var(--space-4);
}
pre{
padding: var(--space-12);
margin: 0;
white-space: pre;
word-break: normal;
overflow-wrap: normal;
color: var(--ink);
}
pre code{
display: block;
white-space: inherit;
word-break: normal;
overflow-wrap: normal;
}
.codebox pre{
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px){
pre, code{ font-size: var(--text-13); }
}
.codebox-response pre{
height: 240px;
max-height: 240px;
overflow-y: auto;
}
.request-inline{
display: flex;
align-items: flex-start;
width: 100%;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--line);
background: var(--surface-2);
border-radius: 14px;
overflow: hidden;
}
.request-inline:focus,
.request-inline:focus-within{
outline: 2px solid rgba(232,89,12,.28);
outline-offset: 2px;
}
.request-inline .request-code-line{
display: block;
min-width: 0;
width: 100%;
margin: 0;
color: var(--ink);
font-size: var(--text-13);
line-height: 1.45;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
@media (max-width: 575.98px){
.request-inline{
padding: 9px 10px;
border-radius: 12px;
}
.request-inline .request-code-line{
font-size: var(--text-12);
line-height: 1.4;
}
}
.hero-response-box{
overflow-x: hidden;
transition: none !important;
box-shadow: none !important;
}
.hero-response-box:hover,
.hero-response-box:focus,
.hero-response-box:focus-within{
outline: none !important;
box-shadow: none !important;
border-color: var(--muted) !important;
background: rgba(14, 20, 32,.03) !important;
}
.hero-response-box pre,
.hero-response-box pre code,
.hero-response-code{
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
.hero-response-box pre{
display: block;
min-width: 0;
}
.hero-response-panel{
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-10px);
pointer-events: none;
transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.hero-response-panel.is-visible{
max-height: 460px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (min-width: 992px){
.codebox-response{
height: 280px;
max-height: 280px;
}
.hero-response-panel.is-visible{
max-height: 520px;
}
}

.try-row{
display:flex;
gap: 10px;
align-items:center;
}
.try-input{
flex: 1 1 auto;
border: 1px solid var(--control-border);
background: rgba(255,255,255,.92);
border-radius: 12px;
padding: 10px 12px;
font-weight: 600;
color: var(--ink);
outline: none;
}
.try-input:focus{
border-color: rgba(232,89,12,.35);
box-shadow: var(--focus);
}
.btn-copy, .btn-clear{
border: 1px solid var(--control-border);
background: rgba(255,255,255,.90);
border-radius: 12px;
padding: 10px 12px;
font-weight: 800;
color: var(--ink-soft);
}
.btn-copy:hover, .btn-clear:hover{
background: rgba(14, 20, 32,.03);
color: var(--ink);
}

.trust{
display:grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 576px){
.trust{ grid-template-columns: repeat(3, 1fr); }
}
.trust-item{
border: 1px solid var(--line);
background: rgba(255,255,255,.78);
border-radius: var(--radius-md);
padding: var(--space-12);
box-shadow: none;
}
.trust-kpi{ font-weight: 800; margin-bottom: var(--space-2); }
.trust-item-compact{
padding: 10px;
}
.trust-item-compact .trust-kpi{
font-size: var(--text-14);
}
.feature{
background: rgba(255,255,255,.80);
border: 1px solid var(--line);
border-radius: 16px;
padding: var(--space-16);
box-shadow: none;
height: 100%;
}
.feature-title{ font-weight: 800; margin-bottom: 6px; }
.steps{
list-style:none;
padding: 0;
margin: 0;
display:flex;
flex-direction:column;
gap: 10px;
}
.steps li{
display:flex;
gap: 10px;
padding: var(--space-12);
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: rgba(255,255,255,.78);
}
.step-nr{
width: 28px;
height: 28px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(232,89,12,.10);
border: 1px solid rgba(232,89,12,.20);
font-weight: 800;
color: rgba(232,89,12,.95);
}

.copy-btn{
min-height: 44px;
display: inline-flex;
align-items: center;
gap: var(--space-8);
padding: 0 var(--space-16);
border: 1px solid var(--muted);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 500;
cursor: pointer;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.copy-btn:hover{
border-color: var(--ink-soft);
color: var(--ink);
}
.copy-btn:focus-visible{
outline: none;
box-shadow: var(--focus);
}
.copy-btn:active{
background: var(--surface-2);
}
.copy-btn.is-copied{
border-color: var(--ok);
color: var(--ok);
}
.integration-head{
max-width: 48rem;
}
.section-head-centered.integration-head{
margin-inline: auto;
}
.steps-flow{
gap: 18px;
position: relative;
margin-top: 1.75rem !important;
}
.steps-flow .step-connector{
display: none;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
align-items: center;
justify-content: center;
}
.steps-flow .step-connector span{
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(232,89,12,.16);
color: rgba(232,89,12,.88);
box-shadow: var(--shadow-sm);
font-size: var(--text-24);
font-weight: 800;
line-height: 1;
}
.steps-flow li:not(.step-connector){
align-items: flex-start;
gap: 18px;
padding: 22px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-sm);
}

.steps-flow .step-copy{
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.steps-flow .step-kicker{
display: inline-flex;
align-items: center;
width: fit-content;
color: var(--muted);
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 400;
letter-spacing: 0;
}
.steps-flow .step-copy strong{
font-size: var(--text-20);
line-height: 1.08;
color: var(--ink);
letter-spacing: -.02em;
}
.steps-flow .step-copy span:last-child{
color: var(--ink-soft);
line-height: 1.5;
font-size: var(--text-16);
max-width: 26ch;
}
.steps-flow .step-nr{
width: 48px;
height: 48px;
flex: 0 0 48px;
background: rgba(232,89,12,.10);
border-color: rgba(232,89,12,.14);
color: #E8590C;
box-shadow: none;
font-size: var(--text-18);
}
@media (min-width: 992px){
.steps-flow{
display: grid;
grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: 0;
align-items: stretch;
}
.steps-flow li{
min-height: 196px;
}
.steps-flow li:not(.step-connector){
min-height: 196px;
}
.steps-flow .step-connector{
display: flex;
min-height: 196px;
}
.steps-flow .step-connector span{
margin-top: 29px;
}
.steps-flow::before{
display: none;
}
}
@media (max-width: 991.98px){
.steps-flow .step-connector{
display: none !important;
}
.steps-flow li:not(.step-connector){
padding: 24px 22px 22px;
}
.steps-flow li:not(.step-connector)::before{
top: 24px;
bottom: 22px;
}
.steps-flow .step-copy strong{
font-size: var(--text-18);
}
.steps-flow .step-copy span:last-child{
font-size: var(--text-16);
}
}

.btn{

border-radius: var(--radius);
min-height: 46px;
padding: var(--space-12) var(--space-16);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
text-align: center;
font-weight: 800;
white-space: normal;
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.btn:focus-visible{
box-shadow: var(--focus);
}
.btn-lg{
min-height: 52px;
padding: 13px 18px;
}
.btn-premium,
.btn-premium-link,
.nav-start-btn{
border-radius: 14px !important;
}
.btn-primary{

background: var(--accent-strong);
border: none;
font-weight: 800;

transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary:hover{

filter: brightness(.94);
}
.btn-primary:active,
.btn-outline-secondary:active,
.btn-outline-primary:active,
.btn-outline-danger:active{
transform: translateY(1px);
}

.btn-outline-primary{
border-color: var(--accent);
color: var(--accent-ink);
background: var(--surface);
}
.btn-outline-primary:hover{
background: var(--accent-weak);
border-color: var(--accent);
color: var(--accent-ink);
}
.btn-outline-secondary{
border-color: var(--muted);
color: var(--ink-soft);
background: rgba(255,255,255,.94);
}
.btn-outline-danger{
border-color: var(--danger);
color: var(--danger-ink);
background: rgba(255,255,255,.94);
}
.btn-outline-danger:hover{
background: var(--danger-weak);
border-color: var(--danger-ink);
color: var(--danger-ink);
}
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger{
box-shadow: inset 0 0 0 1px transparent;
}

.link-muted.fw-semibold{ display:inline-flex; align-items:center; gap: 6px; }
.link-muted.fw-semibold:hover{ text-decoration: underline; text-underline-offset: 3px; }
.btn-outline-secondary:hover{
background: rgba(14, 20, 32,.04);
border-color: var(--muted);
color: var(--ink);
}
.btn-link-muted{
border: none;
background: transparent;
color: var(--muted);
font-weight: 700;
padding: 0;
}
.btn-sm{
min-height: 40px;
padding: 9px 13px;
}
.w-100.btn{
display: inline-flex;
width: 100%;
}
.btn-link-muted:hover{
color: var(--text);
text-decoration: underline;
text-underline-offset: 3px;
}

.pricing-grid{
display:grid;
grid-template-columns: 1fr;
gap: var(--space-16);
}
@media (min-width: 992px){
.pricing-grid{ grid-template-columns: repeat(2, 1fr); }
.pricing-kicker{ text-align: right; }
}
.pricing-grid-3{
grid-template-columns: 1fr;
}
@media (min-width: 768px){
.pricing-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
.pricing-grid-3{ grid-template-columns: repeat(3, 1fr); }
}
.pricing-kicker{ max-width: 28ch; }
.plan-tag{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
font-weight: 800;
font-size: var(--text-12);
border: 1px solid var(--line);
background: rgba(14, 20, 32,.03);
color: var(--ink-soft);
white-space: nowrap;
}
.plan-tag-free{
border-color: rgba(34,197,94,.22);
background: rgba(34,197,94,.08);
}
.plan-tag-payg{
border-color: rgba(245,158,11,.28);
background: rgba(245,158,11,.10);
}
.plan-tag-pack{
border-color: rgba(232,89,12,.22);
background: rgba(232,89,12,.08);
}
.plan-tag-featured{

background: var(--accent-weak);
border-color: var(--accent);
}
.price{
background: rgba(255,255,255,.93);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 19px;
box-shadow: var(--shadow-sm);
height: 100%;
}
.price-featured{
border-radius: var(--radius-xl);
border-color: rgba(232,89,12,.22);
background: var(--accent-weak);
box-shadow: var(--shadow);
}
.price .btn[disabled]{
opacity: .6;
cursor: not-allowed;
}
.price-simple{
background: rgba(255,255,255,.95);
}
.price-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 10px;
}
.price-name{
font-weight: 800;
font-size: var(--text-16);
line-height: 1.25;
}
.price-value{
font-weight: 800;
font-size: var(--text-30);
letter-spacing: -0.4px;
margin-top: var(--space-8);
}
.price-value-sm{
font-size: var(--text-20);
font-weight: 800;
margin-top: var(--space-8);
}
.price-sub{
font-size: var(--text-16);
font-weight: 600;
color: var(--ink-soft);
margin-top: var(--space-4);
margin-left: 0;
}
.price-per-credit{
margin-top: 6px;
font-size: var(--text-16);
font-weight: 600;
color: var(--ink-soft);
}
.price-per-credit strong{
color: var(--text);
font-weight: 800;
}
.price-meta{
margin: 14px 0 16px 0;
padding-top: 13px;
border-top: 1px solid var(--line);
display:flex;
flex-direction: column;
gap: 9px;
}
.price-meta-row{
display:flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-12);
}
.price-meta-row .k{
color: var(--ink-soft);
font-weight: 700;
font-size: var(--text-14);
}
.price-meta-row .v{ font-weight: 800; }
.pricing-note{ max-width: 80ch; }
.credit-slider-shell{
position: relative;
padding: 0;
}
.credit-slider-copy{
display: flex;
flex-direction: column;
gap: 6px;
}
.credit-slider-copy p{
max-width: 35rem;
font-size: var(--text-16);
line-height: 1.45;
color: var(--ink-soft) !important;
}
.credit-logic-list{
display: grid;
gap: 7px;
font-size: var(--text-14);
line-height: 1.3;
color: var(--ink-soft);
}
.credit-logic-list div{
display: inline-flex;
align-items: center;
gap: var(--space-8);
font-weight: 700;
}

.credit-logic-list div::before{
content: "✓";
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--accent-weak);
color: var(--accent-ink);
font-size: var(--text-12);
font-weight: 800;
flex: 0 0 auto;
}
.credit-control-head{
display: grid;
gap: var(--space-8);
margin-top: 0;
}
@media (min-width: 768px){
.credit-control-head{
grid-template-columns: minmax(0, 1fr) 164px;
align-items: end;
}
}
.credit-slider-grid{
display: grid;
gap: 14px;
align-items: stretch;
}
@media (min-width: 992px){
.credit-slider-grid{
grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}
}
.credit-volume-panel{
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: clamp(1rem, 1.6vw, 1.3rem);
border: 1px solid var(--line);
border-radius: calc(var(--radius-xl) - 6px);
background: var(--surface);
}
.credit-slider-controls{
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--space-8);
height: 100%;
}
.credit-control-inputs{
display: grid;
gap: var(--space-8);
}
@media (min-width: 768px){
.credit-control-inputs{
grid-template-columns: minmax(0, 1fr) 164px;
align-items: start;
}
}
.credit-slider-wrap{
--slider-thumb-size: 30px;
display: flex;
flex-direction: column;
gap: 5px;
padding-top: var(--space-2);
}
.credit-control-head .small{
font-size: var(--text-13);
font-weight: 700;
color: var(--ink-soft) !important;
line-height: 1.25;
}
.credit-slider-input{
--slider-progress: 0%;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 18px;
border-radius: var(--radius-pill);
border: 1px solid var(--control-border);
background:
linear-gradient(90deg, #C74A08 0%, #E8590C var(--slider-progress), var(--line-strong) var(--slider-progress), var(--line-strong) 100%);
outline: none;
}
.credit-slider-input::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid #fff;
background: #C74A08;
box-shadow: var(--shadow);
cursor: pointer;
}
.credit-slider-input::-moz-range-thumb{
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid #fff;
background: #C74A08;
box-shadow: var(--shadow);
cursor: pointer;
}
.credit-slider-input::-moz-range-track{
height: 18px;
border-radius: 999px;
background: transparent;
}
.credit-slider-input:focus-visible{
box-shadow: var(--focus);
}
.credit-slider-ticks{
position: relative;
height: 24px;
}
.credit-slider-ticks span{
position: absolute;
top: 0;
left: var(--tick-position);
transform: translateX(-50%);
font-size: var(--text-13);
line-height: 1.1;
font-weight: 800;
color: var(--ink-soft);
white-space: nowrap;
}
.credit-slider-ticks .tick-label-start{
left: calc((100% - var(--slider-thumb-size)) * var(--tick-ratio) + (var(--slider-thumb-size) / 2));
}
.credit-slider-ticks .tick-label-mid{
left: calc((100% - var(--slider-thumb-size)) * var(--tick-ratio) + (var(--slider-thumb-size) / 2));
}
.credit-slider-ticks .tick-label-end{
left: calc((100% - var(--slider-thumb-size)) * var(--tick-ratio) + (var(--slider-thumb-size) / 2));
}
.credit-slider-ticks span::before{
content: "";
display: block;
width: 2px;
height: 8px;
margin: 0 auto 5px;
border-radius: 999px;
background: rgba(232,89,12,.32);
}
.credit-input-wrap{
position: relative;
padding-top: var(--space-2);
}
.credit-number-input{
width: 100%;
min-height: 46px;
border: 1px solid var(--control-border);
background: rgba(255,255,255,.96);
border-radius: 14px;
padding: 10px 64px 10px 14px;
font-weight: 800;
color: var(--ink);
text-align: right;
}
.credit-number-input:focus{
outline: none;
border-color: rgba(232,89,12,.35);
box-shadow: var(--focus);
}
.credit-number-input.is-invalid{
border-color: rgba(185,28,28,.72);
box-shadow: var(--focus);
}
.credit-input-unit{
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: var(--text-13);
font-weight: 700;

color: var(--muted);
pointer-events: none;
}
.credit-presets-head{
font-size: var(--text-13);
font-weight: 700;
color: var(--ink-soft);
margin-top: var(--space-4);
}
.credit-presets{
display: grid;
gap: 9px;
margin-top: 0;
}
.credit-preset{
width: 100%;
min-height: 58px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--control-border);
background: rgba(248,250,252,.98);
color: var(--ink-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
text-align: left;
font-size: var(--text-14);
font-weight: 800;
transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.credit-preset:focus-visible{
border-color: var(--accent);
background: rgba(232,89,12,.10);
color: var(--ink);
outline: 0;
}
.credit-preset.is-active{
border-color: var(--accent);
background: var(--accent-weak);
color: var(--ink);
}
.credit-preset-copy{
display: grid;
gap: var(--space-2);
}
.credit-preset-value{
font-size: var(--text-16);
font-weight: 800;
line-height: 1.15;
}
.credit-preset-meta{
font-size: var(--text-13);
line-height: 1.2;
color: var(--muted);
}
.credit-preset-badge{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;

background: var(--accent-weak);
color: var(--accent-ink);
font-size: var(--text-12);
font-weight: 700;
white-space: nowrap;
}
.credit-input-help{
font-size: var(--text-14);
color: var(--ink-soft);
line-height: 1.35;
}
.credit-input-error{
min-height: 1rem;
font-size: var(--text-14);
color: var(--danger-ink);
font-weight: 700;
}
.pricing-mobile-live-summary{
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(248,250,252,.9);
}
.pricing-mobile-live-head{
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: var(--space-12);
}
.pricing-mobile-live-label{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
}
.pricing-mobile-live-value{
font-size: var(--text-24);
line-height: 1;
color: var(--ink);
}
.pricing-mobile-live-meta{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: var(--space-12);
}
.pricing-mobile-live-meta div{
display: grid;
gap: var(--space-2);
}
.pricing-mobile-live-meta span{
font-size: var(--text-12);

color: var(--muted);
}
.pricing-mobile-live-meta strong{
color: var(--ink);
}
.price-slider-card{
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 14px;
min-width: 0;
height: 100%;
padding: clamp(1rem, 1.8vw, 1.35rem);
}
.pricing-card-static,
.pricing-card-static:hover,
.pricing-card-static:focus-visible{
transform: none;
box-shadow: var(--shadow-sm);
border-color: var(--muted);
}
.pricing-card-static:focus-visible{
outline: 0;
}
.price-list{
list-style: none;
padding: 0;
margin: var(--space-12) 0 var(--space-16) 0;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.price-list li{
display: flex;
gap: var(--space-8);
align-items: flex-start;
color: var(--ink-soft);
font-weight: 600;
}
.price-list li::before{
content: "✓";
color: rgba(232,89,12,.95);
font-weight: 800;
}
.price-list-functional{
margin-top: var(--space-12);
}
.price-list-functional li{
font-weight: 700;
}
.pricing-support-card{
max-width: none;
width: 100%;
background: rgba(248,250,252,.88);
border-style: dashed;
border-color: var(--muted);
box-shadow: none;
}
.price-list-secondary{
margin-bottom: 0;
}
.price-top{
margin-bottom: 6px;
}
.price-slider-card .price-value{
margin-top: 0;
font-size: clamp(var(--text-30), 3vw, var(--text-38));
line-height: 1;
}
.price-vat-tooltip{
position: relative;
display: inline-flex;
width: max-content;
max-width: 100%;
border-bottom: 2px dotted rgba(232,89,12,.42);
cursor: help;
outline: 0;
}
.price-vat-tooltip:focus-visible{
border-bottom-color: rgba(232,89,12,.9);
box-shadow: var(--focus);
}
.price-vat-tooltip::after{
content: attr(data-tooltip);
position: absolute;
z-index: 20;
right: 0;
bottom: calc(100% + 10px);
min-width: max-content;
max-width: min(260px, 80vw);
padding: 8px 10px;
border-radius: 10px;
background: var(--ink);
color: var(--on-accent);
font-size: var(--text-12);
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity .16s ease, transform .16s ease;
}
.price-vat-tooltip:hover::after,
.price-vat-tooltip:focus::after{
opacity: 1;
transform: translateY(0);
}
.price-vat-tooltip-inline{
justify-self: end;
}
.price-slider-card .price-sub{
margin-top: var(--space-4);
font-size: var(--text-16);
color: var(--ink-soft);
}
.price-slider-card .price-per-credit{
margin-top: var(--space-4);
font-size: var(--text-16);
display: inline-flex;
align-items: baseline;
gap: var(--space-4);
color: var(--ink-soft);
}
.price-slider-card .price-per-credit strong{
display: inline;
min-width: 0;
}
.price-slider-card .price-meta{
margin-top: 0;
padding-top: 10px;
gap: 7px;
}
.price-slider-card .price-meta-row{
align-items: center;
}
.price-slider-card .price-meta-row .v{
text-align: right;
white-space: nowrap;
}
.pricing-secondary{
display: grid;
gap: 10px;
}
.pricing-support-card .price-sub{
margin-top: 5px;
color: var(--ink-soft);
}
.pricing-support-card .price-list{
margin: 10px 0 12px 0;
gap: 5px;
}
.pricing-support-card .btn{
margin-top: var(--space-2);
}
.pricing-page .reveal{
opacity: 1;
filter: none;
transform: none;
}
.pricing-mini-proof{
display: grid;
gap: .15rem;
min-width: 220px;
padding: 1rem 1.1rem;
border-radius: 1rem;
background: var(--surface-2);
}
.pricing-mini-proof strong{
font-size: var(--text-30);
line-height: 1;
color: #0E1420;
}
.pricing-inline-facts{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .75rem;
margin-top: 1rem;
}
.pricing-inline-facts div{
display: grid;
gap: .15rem;
padding: .85rem 1rem;
border-radius: 1rem;
background: #fff;
border: 1px solid rgba(14,20,32, .08);
}
.pricing-inline-facts strong{
color: #0E1420;
}
.price-per-address{
margin-top: .35rem;
font-size: var(--text-16);
}
.price-per-credit{
margin-top: .35rem;
font-size: var(--text-16);
}
.pricing-staffel-shell{
overflow: auto;
border-radius: 1.25rem;
background: #fff;
border: 1px solid rgba(14,20,32, .08);
box-shadow: var(--shadow-sm);
}
.pricing-staffel-table{
margin-bottom: 0;
}
.pricing-staffel-table th{
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.pricing-staffel-table td{
white-space: nowrap;
vertical-align: middle;
}
.pricing-example-total{
font-size: var(--text-30);
font-weight: 800;
letter-spacing: -.04em;
color: #0E1420;
}
.pricing-intro-copy{
max-width: 44rem;
}
.pricing-summary-card{
padding: clamp(1.25rem, 2vw, 1.6rem);
}
.pricing-summary-value{
font-size: clamp(var(--text-38), 4vw, var(--text-48));
line-height: 1;
font-weight: 800;
letter-spacing: -.04em;
margin: .35rem 0 .55rem;
}
.pricing-info-card{
padding: clamp(1.15rem, 1.8vw, 1.35rem);
}
.pricing-list-panel{
padding: clamp(1.15rem, 1.8vw, 1.35rem);
}
.pricing-example-card{
padding: clamp(1.15rem, 1.8vw, 1.35rem);
}
.pricing-cta-panel{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: clamp(1.2rem, 2vw, 1.5rem);
}
.pricing-cta-panel .btn{
flex: 0 0 auto;
min-width: 168px;
}
.pricing-staffel-cards{
display: grid;
gap: var(--space-12);
}
.pricing-staffel-more{
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(255,255,255,.96);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
}
.pricing-staffel-more summary{
list-style: none;
cursor: pointer;
font-weight: 800;
color: var(--ink);
}
.pricing-staffel-more summary::-webkit-details-marker{
display: none;
}
.pricing-staffel-more-grid{
display: grid;
gap: var(--space-12);
margin-top: 14px;
}
.pricing-staffel-card-compact{
box-shadow: none;
background: rgba(248,250,252,.72);
}
.pricing-staffel-card{
border: 1px solid rgba(14,20,32, .10);
border-radius: 10px;
background: rgba(255,255,255,.95);
box-shadow: var(--shadow-sm);
padding: var(--space-16);
}
.pricing-staffel-card-head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-12);
margin-bottom: 10px;
}
.pricing-staffel-card-head strong{
font-size: var(--text-16);
color: #0E1420;
}
.pricing-staffel-card-head span{
color: var(--ink-soft);
font-size: var(--text-14);
text-align: right;
}
.pricing-staffel-card-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pricing-staffel-card-grid div{
display: grid;
gap: var(--space-4);
padding: 10px 12px;
border-radius: 14px;
background: rgba(248,250,252,.92);
border: 1px solid var(--line);
}
.pricing-staffel-card-grid span{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
}
.pricing-staffel-card-grid strong{
color: var(--ink);
}
.comparison-table-shell{
overflow: auto;
border-radius: 1.25rem;
background: #fff;
border: 1px solid rgba(14,20,32, .08);
box-shadow: var(--shadow-sm);
}
.comparison-mobile-cards{
display: grid;
gap: var(--space-12);
}
.comparison-mobile-card{
border: 1px solid rgba(14,20,32, .10);
border-radius: 10px;
background: rgba(255,255,255,.95);
box-shadow: var(--shadow-sm);
padding: var(--space-16);
}
.comparison-mobile-card-featured{
border-color: rgba(232,89,12,.24);
background: var(--accent-weak);
}
.comparison-mobile-card h3{
font-size: var(--text-16);
margin-bottom: var(--space-12);
}
.comparison-mobile-card dl{
margin: 0;
display: grid;
gap: 10px;
}
.comparison-mobile-card dl div{
display: grid;
gap: 3px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.comparison-mobile-card dl div:first-child{
padding-top: 0;
border-top: 0;
}
.comparison-mobile-card dt{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
}
.comparison-mobile-card dd{
margin: 0;
color: var(--ink);
}
.comparison-table{
margin-bottom: 0;
}
.comparison-table th,
.comparison-table td{
min-width: 180px;
vertical-align: top;
white-space: normal;
}
.comparison-table thead th{
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.comparison-table tbody th{
min-width: 140px;
color: var(--text);
}
.comparison-table-strong th,
.comparison-table-strong td{
padding-top: 18px;
padding-bottom: 18px;
}
.comparison-table-strong tbody tr.is-featured{
background: var(--accent-weak);
}
.comparison-table-strong tbody tr.is-featured th,
.comparison-table-strong tbody tr.is-featured td{
font-weight: 700;
}
.comparison-proof-card{
background: var(--accent-weak);
border-color: rgba(232,89,12,.2);
position: sticky;
top: 96px;
}
.comparison-proof-kicker{
font-family: var(--font-mono);
font-size: var(--text-12);
color: rgba(232,89,12,.74);
font-weight: 800;
}
.comparison-proof-price{
margin-top: 10px;
font-size: clamp(var(--text-38), 4vw, var(--text-48));
line-height: 1;
font-weight: 800;
color: var(--ink);
}
.comparison-quick-grid{
display: grid;
gap: 14px;
}
@media (min-width: 992px){
.comparison-quick-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.comparison-quick-card{
height: 100%;
}
.comparison-quick-label{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
}
.comparison-quick-card h3{
margin-top: 10px;
margin-bottom: 10px;
font-size: var(--text-20);
line-height: 1.15;
}
.comparison-page .section .py-5,
.comparison-page .section-soft .py-5{
padding-top: 2.75rem !important;
padding-bottom: 2.75rem !important;
}
.pricing-note-card{
padding: 1rem 1.15rem;
}
@media (max-width: 991.98px){
.pricing-hero-section .py-5{
padding-top: 2rem !important;
padding-bottom: 1.5rem !important;
}
.pricing-info-card{
padding: 1rem;
}
.pricing-info-card h3{
margin-bottom: .4rem !important;
font-size: var(--text-16);
}
.pricing-info-card p{
margin-bottom: 0;
font-size: var(--text-14);
line-height: 1.45;
}
.price-slider-card{
display: none;
}
.pricing-inline-facts{
grid-template-columns: 1fr;
}
.pricing-cta-panel{
align-items: flex-start;
flex-direction: column;
}
.pricing-staffel-shell,
.comparison-table-shell{
overflow: visible;
}
}

.contact-card{
box-shadow: var(--shadow-sm);
}
.hp-field{
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-form .form-control{
border: 1px solid var(--control-border);
background: rgba(255,255,255,.92);
border-radius: 12px;
padding: 10px 12px;
font-weight: 600;
color: var(--ink);
}
.contact-form .form-control:focus{
border-color: rgba(232,89,12,.35);
box-shadow: var(--focus);
}
.contact-form textarea.form-control{
min-height: 110px;
}

.accordion-item{
border: 1px solid var(--line);
border-radius: var(--radius-md) !important;
overflow: hidden;
margin-bottom: 10px;
}
.accordion-button{ font-weight: 800; }
.accordion-button:not(.collapsed){
background: rgba(232,89,12,.08);
color: var(--ink);
}

.cta{
display:flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.88);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow-sm);
}
@media (min-width: 768px){
.cta{ flex-direction: row; align-items:center; justify-content:space-between; }
}
.cta-title{
font-weight: 800;
font-size: var(--text-18);
}

.articles-hero{
position: relative;
}
.articles-hero-grid{
display: grid;
gap: var(--space-24);
align-items: start;
}
@media (min-width: 992px){
.articles-hero-grid{
grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}
}
.articles-hero-card{
border-radius: var(--radius-xl);
border: 1px solid var(--line);
background: var(--surface);
padding: 18px;
box-shadow: var(--shadow-sm);
}
.articles-kpis{
display: grid;
gap: var(--space-12);
}
@media (min-width: 576px){
.articles-kpis{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.articles-kpi{
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(14, 20, 32, .03);
padding: var(--space-12);
}
.kpi-label{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 700;
}
.kpi-value{
font-weight: 800;
margin-top: var(--space-4);
}
.articles-hero-note{
margin-top: var(--space-12);
}
.articles-empty{
border-radius: var(--radius-lg);
border: 1px dashed var(--line-strong);
padding: var(--space-20);
background: rgba(255,255,255,.92);
}
.articles-spotlight{
border-radius: var(--radius-xl);
border: 1px solid var(--line);
background: #fff;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.article-spotlight-link{
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
color: inherit;
text-decoration: none;
}
@media (max-width: 991px){
.article-spotlight-link{
grid-template-columns: 1fr;
}
}
.article-spotlight-media{
position: relative;
min-height: 240px;
background: #fff;
border-right: 1px solid var(--line);
}
@media (max-width: 991px){
.article-spotlight-media{
border-right: none;
border-bottom: 1px solid var(--line);
}
}
.article-spotlight-media img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.article-spotlight-body{
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.article-spotlight-meta{
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: 0;
color: var(--muted);
font-weight: 400;
}
.article-spotlight-title{
font-weight: 800;
font-size: var(--text-24);
line-height: 1.2;
}
.article-spotlight-excerpt{
color: var(--muted);
font-size: var(--text-16);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-spotlight-cta{
margin-top: auto;
font-weight: 800;

color: var(--accent-ink);
}
.article-spotlight-admin{
border-top: 1px solid var(--line);
padding: var(--space-12) var(--space-16);
}
.articles-grid.articles-grid-wide{
grid-template-columns: 1fr;
}
@media (min-width: 768px){
.articles-grid.articles-grid-wide{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px){
.articles-grid.articles-grid-wide{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.articles-grid{
display: grid;
grid-template-columns: 1fr;
gap: var(--space-16);
}
@media (min-width: 768px){
.articles-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.articles-grid.articles-grid-home{
grid-template-columns: 1fr;
}
@media (min-width: 768px){
.articles-grid.articles-grid-home{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.article-card{
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
height: 100%;
}
.article-card-link{
display: flex;
flex-direction: column;
gap: 10px;
padding: var(--space-16);
color: inherit;
text-decoration: none;
height: 100%;
}
.article-card-link:hover{
color: inherit;
}
.article-card-media{
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
}
.article-card-media img{
display: block;
width: 100%;
height: 160px;
object-fit: cover;
}
.article-card-meta{
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: 0;
color: var(--muted);
font-weight: 400;
}
.article-card-title{
font-weight: 800;
font-size: var(--text-18);
line-height: 1.25;
}
.article-card-excerpt{
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card-cta{
margin-top: auto;
font-weight: 800;

color: var(--accent-ink);
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-card-admin{
border-top: 1px solid var(--line);
padding: 10px 16px 12px;
}
.article-edit-link{
font-size: var(--text-14);
font-weight: 700;
color: var(--ink-soft);
text-decoration: none;
}
.article-edit-link:hover{
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-card:hover{
box-shadow: var(--shadow);
border-color: var(--muted);
}
@media (prefers-reduced-motion: reduce){
*{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

.hero .container{ max-width: 1200px; }
.hero-punct{ margin-left: 0; margin-right: .35rem; }
.faq-steps{ margin: 0; padding-left: 1.25rem; }
.faq-steps li{ margin: .35rem 0; }

.article-post{
padding: 2.5rem 0 3.5rem;
}
.article-hero{
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 2.25rem;
padding: 2.4rem;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--surface-2);
}
.article-eyebrow{
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: 0;
color: var(--muted);
font-weight: 400;
margin-bottom: .6rem;
}
.article-title{
font-family: var(--font-head);
font-size: clamp(var(--text-30), 3.2vw, var(--text-48));
line-height: 1.1;
margin-bottom: .8rem;
}
.article-meta{
font-family: var(--font-mono);
font-size: var(--text-13);
color: var(--muted);
margin-bottom: 1.25rem;
}
.article-lead{
font-size: var(--text-18);
line-height: 1.7;
color: var(--ink-soft);
margin: 0;
}
.article-hero-visual{
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
}
.article-hero-visual img{
width: 100%;
height: 100%;
object-fit: cover;
}
.article-content{
max-width: 820px;
margin: 2.8rem auto 0;
line-height: 1.85;
font-size: var(--text-16);
color: var(--ink);
}

.article-content h2{
font-family: var(--font-head);
margin-top: 2.8rem;
margin-bottom: .9rem;
padding-top: 1.4rem;
border-top: 1px solid var(--line);
font-size: clamp(var(--text-24), 2.1vw, var(--text-30));
}
.article-content h3{
font-family: var(--font-head);
margin-top: 2rem;
margin-bottom: .6rem;
font-size: var(--text-18);
}
.article-content p{
margin-bottom: 1.05rem;
}
.article-content ul,
.article-content ol{
margin: .5rem 0 1.4rem 1.2rem;
padding: 0;
}
.article-content li{
margin-bottom: .5rem;
}
.article-content a{
color: var(--accent-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-content blockquote{
border-left: 3px solid var(--line-strong);
background: var(--surface-2);
padding: 1rem 1.2rem;
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--ink-soft);
margin: 1.6rem 0;
}
.article-tldr{
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
background: var(--accent-weak);
border-radius: var(--radius);
padding: 1.2rem 1.4rem;
margin: 1.6rem 0 2rem;
}
.article-tldr strong{
display: block;
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 500;
letter-spacing: 0;
margin-bottom: .6rem;

color: var(--accent-ink);
}
.article-figure{
margin: 2rem 0;
padding: .75rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--line);
}
.article-figure img{
width: 100%;

height: auto;
border-radius: var(--radius-sm);
}
.article-figure figcaption{
font-family: var(--font-mono);
font-size: var(--text-13);
color: var(--muted);
margin-top: .6rem;
}
.article-callout{
border-radius: var(--radius);
padding: 1.1rem 1.3rem;
background: var(--surface-2);
border: 1px solid var(--line);
margin: 1.6rem 0;
}
.article-sources{
list-style: none;
padding: 0;
margin: 1.2rem 0;
}
.article-sources li{
padding: .5rem .75rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
border: 1px solid var(--line);
margin-bottom: .6rem;
}
@media (max-width: 991px){
.article-hero{
grid-template-columns: 1fr;
}
.article-hero-visual{
min-height: 220px;
}
.article-content{
margin-top: 2.2rem;
}
}
@media (max-width: 767px){
.hero{
padding-top: var(--space-8);
padding-bottom: 22px;
}
.hero > .container.py-5,
.section .container.py-5,
.articles-hero .container.py-5{
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.hero-ctas > *{
min-height: 52px;
}
.copy-btn,
.link-muted,
.footer-link{
min-height: 44px;
}
body.article-page{
background: #ffffff;
}
.article-post{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.article-hero{
padding: 1.6rem;
gap: 1.5rem;
background: var(--surface-2);
}
}

.auth-section{
min-height: calc(100vh - 220px);
display: flex;
align-items: center;
}
.auth-page .app-header{
background: transparent;
box-shadow: none;
}
.auth-page .app-nav{
background: rgba(255,255,255,.78);
border: 1px solid var(--line);
margin: 14px auto 0;
max-width: calc(100% - 24px);
border-radius: 20px;
}
.auth-page .primary-nav{
display: none;
}
.auth-page .app-main{
min-height: auto;
}
.auth-page .footer-bottom{
margin-top: 0;
padding-top: var(--space-8);
border-top: 0;
}
.auth-grid{
display: grid;
gap: var(--space-16);
grid-template-columns: 1fr;
}
@media (min-width: 992px){
.auth-grid{
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: var(--space-24);
}
}
.auth-card{
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.94);
box-shadow: var(--shadow-sm);
padding: var(--space-24);
}
.auth-form .form-control{
border: 1px solid var(--control-border);
background: rgba(255,255,255,.92);
border-radius: 12px;
padding: 10px 12px;
font-weight: 600;
color: var(--ink);
}
.auth-form .form-control:focus{
border-color: rgba(232,89,12,.35);
box-shadow: var(--focus);
}
.auth-footer{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}

.auth-side{
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-24);
background: var(--accent-weak);
}
.auth-side-kicker{
font-weight: 800;
color: var(--ink-soft);
margin-bottom: var(--space-12);
}
.auth-points{
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: var(--space-8);
color: var(--ink-soft);
}
@media (max-width: 991.98px){
.comparison-proof-card{
position: static;
}
.auth-page .nav-user{
width: 100%;
justify-content: flex-end;
}
}

.admin-shell-head p{
max-width: 780px;
}
.admin-shell-grid{
display: grid;
gap: var(--space-16);
grid-template-columns: minmax(0, 1fr);
}

.admin-shell-content{
min-width: 0;
}
.admin-shell-nav{
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.95);
box-shadow: var(--shadow-sm);
padding: 14px;
}
.admin-shell-content{
min-width: 0;
}
.admin-nav{
display: grid;
gap: var(--space-12);
}
.admin-nav-group{
display: grid;
gap: 6px;
}
.admin-nav-group-title{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
padding: var(--space-4) var(--space-8);
}
.admin-nav-link{
display: block;
border: 1px solid var(--line);
border-radius: 12px;
text-decoration: none;
padding: 10px 12px;
color: var(--ink);
background: #fff;
transition: border-color .16s ease, background-color .16s ease;
}
.admin-nav-link:hover{
border-color: rgba(232,89,12,.28);
background: rgba(232,89,12,.05);
}
.admin-nav-link.active{
border-color: rgba(232,89,12,.35);
background: rgba(232,89,12,.11);
}
.admin-nav-link-title{
display: block;
font-weight: 700;
line-height: 1.15;
}
.admin-nav-link-meta{
display: block;
margin-top: 3px;
font-size: var(--text-12);
color: var(--muted);
}

body.admin-body{ background: var(--paper); }
body.admin-body .primary-nav{ display: none; }
body.admin-body .app-footer{ display: none; }
body.admin-body .app-nav{ background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.admin-shell{ max-width: 1440px; margin-inline: auto; }
.admin-table-wrap{
width: 100%;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.admin-table{
width: 100%;
border-collapse: collapse;
font-size: var(--text-14);
}
.admin-table thead th{
position: sticky;
top: 0;
z-index: 1;
text-align: left;
white-space: nowrap;
padding: 9px 12px;
background: var(--surface-2);
border-bottom: 1px solid var(--line-strong);

font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.admin-table tbody td{
padding: 9px 12px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.admin-table tbody tr:last-child td{ border-bottom: 0; }
.admin-table tbody tr:hover{ background: var(--surface-2); }
.admin-table .num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table .cell-sub{ display: block; color: var(--muted); font-size: var(--text-12); margin-top: 1px; }
.admin-table .cell-actions{ white-space: nowrap; width: 1%; }
.admin-users-table .admin-outreach-name{ font-size: var(--text-16); }
.admin-users-table .admin-outreach-email{ font-size: var(--text-13); margin-top: 1px; }
.admin-row-badges{ display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: 5px; }
.admin-row-actions{ display: flex; flex-wrap: wrap; gap: 6px; }
.admin-row-more{ margin-top: var(--space-8); }
.admin-row-more > summary{ cursor: pointer; color: var(--muted); font-size: var(--text-13); }
.admin-row-more-panel{ display: grid; gap: var(--space-8); margin-top: var(--space-8); max-width: 320px; }
.admin-outreach-page{
display: grid;
gap: 18px;
}
.admin-outreach-hero{
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-16);
}
.admin-outreach-hero-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.admin-outreach-toolbar{
display: grid;
gap: var(--space-16);
grid-template-columns: 1.6fr minmax(280px, .9fr);
}
.admin-outreach-metrics{
display: grid;
gap: var(--space-12);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-outreach-metric,
.admin-outreach-cleanup{
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.admin-outreach-metric{
padding: 16px 18px;
display: grid;
gap: var(--space-4);
}
.admin-outreach-metric .k,
.admin-outreach-stat .k{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 700;
}
.admin-outreach-metric .v,
.admin-outreach-stat .v{
font-size: var(--text-30);
line-height: 1;
color: var(--ink);
}
.admin-outreach-metric .m,
.admin-outreach-stat .m{
font-size: var(--text-14);
color: var(--muted);
}
.admin-outreach-cleanup{
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
}
.admin-outreach-filters .card-body{
padding: 18px;
}
.admin-outreach-filter-row{
display: grid;
gap: 18px;
grid-template-columns: 1.3fr minmax(280px, .9fr);
}
.admin-outreach-segments{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.admin-outreach-segment{
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-soft);
text-decoration: none;
font-weight: 600;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.admin-outreach-segment strong{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
min-height: 1.75rem;
padding: 0 .45rem;
border-radius: 999px;
background: rgba(14, 20, 32,.06);
color: var(--ink-soft);
font-size: var(--text-12);
}
.admin-outreach-segment:hover,
.admin-outreach-segment:focus-visible{
border-color: var(--accent);
background: var(--accent-weak);
color: var(--ink);
}

.admin-outreach-segment.is-active{
background: var(--accent-weak);
border-color: var(--accent);
color: var(--accent-ink);
font-weight: 700;
}
.admin-outreach-segment.is-active strong{
background: var(--accent-weak);
color: var(--accent-ink);
}
.admin-outreach-search{
display: grid;
align-content: start;
}
.admin-outreach-search-fields{
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1fr) auto auto;
}
.admin-outreach-list{
display: grid;
gap: var(--space-16);
}
.admin-outreach-name{
display: inline-block;
color: var(--ink);
font-size: var(--text-18);
font-weight: 700;
text-decoration: none;
}
.admin-outreach-name:hover,
.admin-outreach-name:focus-visible{
color: #C74A08;
}
.admin-outreach-email{
margin-top: 3px;
color: var(--muted);
word-break: break-word;
}
.admin-outreach-badges{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.admin-outreach-stats{
display: grid;
gap: var(--space-12);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-outreach-stat{
display: grid;
gap: var(--space-4);
padding: 14px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255,255,255,.9);
}
.admin-outreach-stat .v{
font-size: var(--text-18);
}
.admin-outreach-meta{
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 14px;
color: var(--muted);
font-size: var(--text-14);
}
.admin-outreach-context{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.admin-outreach-context > summary{
cursor: pointer;
font-weight: 600;
color: var(--ink-soft);
}
.admin-outreach-context-grid{
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: var(--space-12);
}

.admin-credit-btn{
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--space-4) var(--space-8);
margin: -4px -8px 0 0;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.admin-credit-btn:hover,
.admin-credit-btn:focus-visible{
border-color: var(--control-border);
background: var(--surface);
}
.admin-credit-btn .pencil{ opacity: .35; flex: none; }
.admin-credit-btn:hover .pencil,
.admin-credit-btn:focus-visible .pencil{ opacity: 1; }
.admin-credit-btn.credit-zero strong{ color: var(--muted); font-weight: 600; }
.admin-credit-btn.credit-high strong{ color: var(--warn-ink); }
.credit-high-note{ color: var(--warn-ink) !important; }
.credit-chips{ display: flex; flex-wrap: wrap; gap: 6px; }

#creditModal .btn-check:checked + .btn{
border-color: var(--accent);
background: rgba(232,89,12,.10);
color: #C74A08;
font-weight: 700;
}
#creditModal .btn-check:focus-visible + .btn{
box-shadow: var(--focus);
}
.credit-preview{
display: flex;
align-items: baseline;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface-2);
font-variant-numeric: tabular-nums;
}
.credit-preview .credit-arrow{ color: var(--muted); }
.credit-preview .credit-new{ font-size: var(--text-18); }
.credit-last{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
margin-bottom: 14px;
padding: 10px 12px;

border: 1px solid var(--warn);
border-radius: var(--radius);
background: var(--warn-weak);
color: var(--warn-ink);
font-size: var(--text-14);
}
.admin-row-danger{
border-top: 1px dashed var(--line-strong);
padding-top: 10px;
}
@media (min-width: 992px){
.admin-shell-grid{
grid-template-columns: 310px minmax(0, 1fr);
gap: var(--space-20);
}
.admin-shell-nav{
position: sticky;
top: 86px;
align-self: start;
max-height: calc(100vh - 110px);
overflow: auto;
}
}
@media (max-width: 991px){
.admin-shell-nav{
padding: 10px;
}
.admin-nav{
gap: var(--space-8);
}
.admin-outreach-toolbar,
.admin-outreach-filter-row{
grid-template-columns: 1fr;
}
.admin-outreach-metrics,
.admin-outreach-stats,
.admin-outreach-context-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px){
.admin-outreach-metrics,
.admin-outreach-stats,
.admin-outreach-context-grid,
.admin-outreach-search-fields{
grid-template-columns: 1fr;
}
.admin-outreach-segment{
width: 100%;
justify-content: space-between;
}
}
.manage-shell{
align-items: flex-start;
}
.manage-grid{
display: grid;
gap: var(--space-16);
grid-template-columns: 1fr;
}
.manage-nav-card,
.manage-content-card{
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.94);
box-shadow: var(--shadow-sm);
padding: var(--space-20);
}
.manage-nav-list{
display: grid;
gap: var(--space-8);
}
.manage-nav-link{
display: block;
border: 1px solid var(--line);
border-radius: 12px;
padding: .58rem .72rem;
color: var(--ink);
text-decoration: none;
font-weight: 600;
transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.manage-nav-link:hover{
border-color: var(--accent);
background: var(--accent-weak);
color: var(--ink);
}

.manage-nav-link.active{
border-color: var(--accent);
background: var(--accent-weak);
color: var(--accent-ink);
}
.manage-content-card .form-control{
border-radius: 12px;
}
.manage-content-card .btn{
border-radius: 12px;
}
@media (min-width: 992px){
.manage-grid{
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--space-24);
}
}
.billing-balance-card{
border: 1px solid var(--line);
}
.billing-auth-actions{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.billing-summary-layout{
display: grid;
gap: var(--space-16);
grid-template-columns: minmax(0, 1fr);
}
.billing-summary-card{
border: 1px solid var(--line);
}
.billing-summary-card form{
margin: 0;
}
.billing-summary-kicker{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 700;
margin-bottom: 10px;
}
.billing-summary-list{
display: grid;
gap: 10px;
margin: 0 0 var(--space-20);
}
.billing-summary-list-meta{
margin-bottom: 18px;
}
.billing-summary-totals{
padding: 16px 18px 10px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(248,250,252,.72);
margin-bottom: 18px;
}
.billing-summary-totals-label{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
font-weight: 800;
margin-bottom: 10px;
}
.billing-summary-list-totals{
margin-bottom: 0;
}
.billing-summary-row{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-12);
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.billing-summary-row span{
color: var(--ink-soft);
}
.billing-summary-row strong{
text-align: right;
color: var(--ink);
}
.billing-summary-row-total{
font-size: var(--text-16);
border-bottom: 0;
padding-bottom: 0;
}
.billing-summary-row-total span,
.billing-summary-row-total strong{
color: var(--ink);
}
.billing-summary-notes{
margin: 0;
padding-left: 18px;
color: var(--ink-soft);
}
.billing-summary-notes li + li{
margin-top: var(--space-8);
}
.billing-status-pill{
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: .38rem .8rem;
font-weight: 700;
text-transform: capitalize;
background: rgba(14, 20, 32,.08);
color: var(--ink-soft);
}
.billing-status-paid{
background: var(--ok-weak);
color: var(--ok-ink);
}
.billing-status-pending{
background: var(--warn-weak);
color: var(--warn-ink);
}
.billing-status-failed,
.billing-status-canceled,
.billing-status-expired{
background: var(--danger-weak);
color: var(--danger-ink);
}
.billing-success-banner{
max-width: 760px;
margin-inline: auto;
border: 1px solid var(--ok);
background: var(--ok-weak);
border-radius: var(--radius);
padding: var(--space-20);
box-shadow: var(--shadow-sm);
}
.billing-success-kicker{
font-family: var(--font-mono);
font-size: var(--text-13);
color: var(--ok-ink);
font-weight: 500;
margin-bottom: var(--space-8);
}
.billing-success-title{
font-family: var(--font-head);
font-size: clamp(var(--text-24), 2vw, var(--text-30));
font-weight: 800;
color: var(--ok-ink);
margin-bottom: 6px;
}
.billing-success-copy{
color: var(--ok-ink);
}
.account-overview-grid{
display: grid;
gap: var(--space-16);
grid-template-columns: 1fr;
}
.account-shell-head{
display: grid;

grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
}
.account-section-nav{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.account-section-link{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--space-16);
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,.78);
color: var(--ink-soft);
font-weight: 700;
}
.account-section-link:hover{
color: var(--ink);
border-color: var(--muted);
background: rgba(248,250,252,.96);
}
.account-section-link.is-active{
background: var(--accent-weak);
border-color: var(--accent);
color: var(--accent-ink);
}

.meekijk-balk{
background: var(--warn-weak);
border-bottom: 1px solid var(--warn);
color: var(--warn-ink);
padding: var(--space-8) 0;
font-size: var(--text-14);
}
.meekijk-balk strong{ color: var(--ink); }
.account-page-shell{
display: grid;
gap: 18px;
}
.account-panel-card{
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
box-shadow: var(--shadow-sm);
padding: 22px;
}
.account-panel-card .form-control{
border: 1px solid var(--control-border);
border-radius: 12px;
min-height: 48px;
padding: 12px 14px;
font-weight: 600;
background: rgba(255,255,255,.95);
}
.account-panel-card .form-control:focus{
border-color: rgba(232,89,12,.35);
box-shadow: var(--focus);
}
.account-panel-card .form-text{
color: var(--muted);
}
.account-panel-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.account-panel-actions .btn{
min-width: 172px;
}
.apikey-header{
display: grid;
gap: 14px;
}
.apikey-title-row{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 14px;
}
.apikey-title-row p{
max-width: 44rem;
}
.apikey-table-wrap{
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,.96);
}
.apikey-table-wrap table{
margin-bottom: 0;
}
.apikey-table-wrap thead th{
font-size: var(--text-13);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
background: rgba(248,250,252,.96);
}
.apikey-table-wrap tbody td{
vertical-align: middle;
}
.apikey-table-wrap .badge{
border-radius: 999px;
font-weight: 800;
padding: .5rem .7rem;
}
.apikey-hint{
border-radius: 16px;
border: 1px solid rgba(232,89,12,.16);
background: rgba(251,239,231,.82);
color: var(--ink-soft);
}
.apikey-empty-state{
display: grid;
gap: var(--space-16);
align-items: center;
}
.apikey-key-box{
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(248,250,252,.9);
padding: 14px;
}
.apikey-key-box code,
.apikey-key-box pre{
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
}
.account-overview-hero{
display: grid;
gap: 18px;
align-items: center;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
padding: 22px;
box-shadow: var(--shadow-sm);
}
.account-hero-value{
font-family: var(--font-head);
font-size: clamp(var(--text-30), 4vw, var(--text-48));
font-weight: 800;
line-height: 1;
margin-bottom: 10px;
}
.account-hero-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.account-hero-note{
flex-basis: 100%;
margin: 0;
font-size: var(--text-13);
color: var(--muted);
}
.account-metrics-grid{
grid-template-columns: 1fr;
}
.account-stat-card{
border: 1px solid var(--line);
}
.account-stat-value{
font-family: var(--font-head);
font-size: clamp(var(--text-30), 3vw, var(--text-38));
font-weight: 800;
line-height: 1;
margin-bottom: var(--space-8);
}
.account-usage-grid{
margin-top: var(--space-4);
}
.account-usage-card{
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(248,250,252,.82);
padding: 18px;
}
.account-usage-value{
font-family: var(--font-head);
font-size: clamp(var(--text-24), 2.8vw, var(--text-30));
font-weight: 800;
line-height: 1;
margin-bottom: var(--space-8);
}
.account-usage-note{
border-left: 4px solid rgba(232,89,12,.28);
padding: 10px 14px;
background: rgba(251,239,231,.7);
color: rgba(30,41,59,.86);
border-radius: 12px;
}
@media (max-width: 767.98px){
.account-panel-card{
padding: 18px;
border-radius: 10px;
}
.account-panel-actions,
.billing-auth-actions{
flex-direction: column;
}
.account-panel-actions .btn,
.billing-auth-actions .btn,
.pricing-cta-panel .btn{
width: 100%;
min-width: 0;
}
.apikey-title-row{
align-items: stretch;
}
.apikey-title-row .account-panel-actions{
width: 100%;
}
.apikey-table-wrap{
overflow: visible;
border: 0;
background: transparent;
}
.apikey-table-wrap table,
.apikey-table-wrap tbody,
.apikey-table-wrap tr,
.apikey-table-wrap td{
display: block;
width: 100%;
}
.apikey-table-wrap thead{
display: none;
}
.apikey-table-wrap tbody{
display: grid;
gap: var(--space-12);
}
.apikey-table-wrap tr{
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(255,255,255,.96);
padding: 14px;
box-shadow: var(--shadow-sm);
}
.apikey-table-wrap td{
padding: 0;
border: 0;
text-align: left !important;
}
.apikey-table-wrap td + td{
margin-top: 10px;
}
.apikey-table-wrap td::before{
content: attr(data-label);
display: block;
margin-bottom: var(--space-4);
font-size: var(--text-12);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 800;
}
.apikey-table-wrap td[data-label="Actie"]{
margin-top: 14px;
}
.apikey-table-wrap td[data-label="Actie"]::before{
display: none;
}
.apikey-table-wrap td[data-label="Actie"] .btn{
width: 100%;
}
.footer-grid{
gap: 14px;
}
.footer-brand,
.footer-links,
.footer-meta{
padding: var(--space-16);
border-radius: 16px;
}
.footer-link{
padding-inline: 10px;
}
.footer-legal{
display: grid;
gap: 6px;
}
.footer-bottom{
flex-direction: column;
align-items: flex-start;
}
.account-hero-actions{
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.account-hero-actions .btn{
width: 100%;
}

.account-section-nav{
position: relative;
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
padding-bottom: var(--space-4);
}
.account-section-link{
flex: 0 0 auto;
white-space: nowrap;
}
}
@media (min-width: 768px){
.apikey-empty-state{
grid-template-columns: minmax(0, 1fr) auto;
}
.account-overview-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-overview-hero{
grid-template-columns: minmax(0, 1fr) auto;
}
.account-metrics-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1200px){
.account-overview-grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.account-metrics-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 992px){
.billing-summary-layout{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}


.section-pad{
padding-top: var(--space-56);
padding-bottom: var(--space-56);
}
.page-hero{
border-bottom: 1px solid var(--line);
}


.kicker{
display: inline-flex;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-12);
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 500;
color: var(--muted);
}
.kicker::before{
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent);
flex-shrink: 0;
}
.page-hero > .container{
padding-top: var(--space-48);
padding-bottom: var(--space-48);
}

.page-hero-body > .lead{
max-width: 54ch;
}
.page-hero-note{
max-width: 62ch;
font-size: var(--text-16);
line-height: 1.6;
margin-bottom: 0;
}
.page-hero-body > .hero-ctas{
max-width: 520px;
}

.prose-narrow{
max-width: 68ch;
}

.docs-hero-grid{
display: grid;
gap: var(--space-32);
align-items: start;
}

.docs-hero-tester .card-saas{
padding: var(--space-20);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: none;
}
.docs-hero-tester-head{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 12px;
margin-bottom: var(--space-12);
}
.docs-hero-tester-free{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 500;
color: var(--ok);
white-space: nowrap;
}

.docs-hero-tester .api-tester-head > .form-label{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.docs-hero-tester .api-tester-row .try-input{
flex: 1 1 11rem;
}
@media (min-width: 992px){
.docs-hero-grid{
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
gap: var(--space-48);
}
}

.docs-layout{
display: grid;
gap: var(--space-32);
align-items: start;
}
.docs-rail{
display: none;
flex-direction: column;
gap: var(--space-24);
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
overflow-y: auto;
}
.docs-rail-label{
display: block;
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 500;
color: var(--muted);
margin-bottom: 10px;
}
.docs-toc{
list-style: none;
margin: 0;
padding: 0;
}
.docs-toc a{
display: block;
padding: 7px 0 7px 13px;
border-left: 2px solid var(--line);
font-size: var(--text-14);
line-height: 1.4;
color: var(--muted);
text-decoration: none;
}
.docs-toc a:hover{
color: var(--ink);
border-left-color: var(--line-strong);
}
.docs-toc a.is-current{

color: var(--accent-ink);
font-weight: 700;
border-left-color: var(--accent);
}
.docs-rail-links{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: 22px;
border-top: 1px solid var(--line);
}
.docs-rail-links a{
display: flex;
align-items: center;
gap: var(--space-8);
padding: 7px 0;
font-size: var(--text-14);
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
}
.docs-rail-links a:hover{
color: var(--accent-ink);
}
.docs-rail-links svg{
flex-shrink: 0;
color: var(--muted);
}
@media (min-width: 992px){
.docs-layout{
grid-template-columns: 224px minmax(0, 1fr);
gap: var(--space-56);
}
.docs-rail{
display: flex;
}
}

.request-response-grid{
display: grid;
gap: var(--space-16);
}
.request-response-col{
display: flex;
flex-direction: column;
min-width: 0;
}
.request-response-col-label{
display: block;
margin-bottom: var(--space-8);
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 600;
color: var(--muted);
}
.request-response-toolbar .is-status{
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 500;
color: var(--ok);
}

.request-response-toolbar{
display: flex;
align-items: center;
min-height: 52px;
margin-bottom: var(--space-12);
}

.response-codebox pre{
padding-right: 6.5rem;
}
.response-codebox .copy-btn{
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
@media (min-width: 992px){
.request-response-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
}
@media (min-width: 992px){
.section-pad{
padding-top: var(--space-72);
padding-bottom: var(--space-72);
}
.page-hero > .container{
padding-top: var(--space-72);
padding-bottom: 64px;
}
}


.meta-strip{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin: var(--space-32) 0 0;
max-width: 880px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}

.note-strip{
margin: var(--space-24) 0 0;
max-width: 880px;
padding: var(--space-12) var(--space-16);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--ink-soft);
font-size: var(--text-14);
line-height: 1.6;
}
.note-strip code{
font-family: var(--font-mono);
font-size: .88em;
color: var(--accent-ink);
}
.meta-strip > div{
background: var(--surface);
padding: 14px 16px;
}
.meta-strip dt{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 400;
color: var(--muted);
margin-bottom: var(--space-4);
}
.meta-strip dd{
margin: 0;
font-weight: 700;
color: var(--ink);
font-size: var(--text-16);
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.meta-strip dd.meta-strip-lead{
font-size: var(--text-24);
line-height: 1.1;
letter-spacing: -.03em;
color: var(--accent-ink);
}

.meta-strip dd.meta-strip-note{
margin-top: .15rem;
font-size: var(--text-13);
font-weight: 500;
color: var(--muted);
}
@media (min-width: 768px){
.meta-strip{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.meta-strip-narrow{
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 440px;
}
}

.cmp-matrix-shell{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow-x: auto;
}
.cmp-matrix{
width: 100%;
border-collapse: collapse;
font-size: var(--text-14);
}
.cmp-matrix th,
.cmp-matrix td{
padding: 16px 18px;
vertical-align: top;
text-align: left;
border-bottom: 1px solid var(--line);
}
.cmp-matrix tbody tr:last-child th,
.cmp-matrix tbody tr:last-child td{
border-bottom: 0;
}
.cmp-matrix thead th{
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 500;
color: var(--muted);
background: var(--surface-2);
border-bottom: 1px solid var(--line-strong);
white-space: nowrap;
}
.cmp-matrix thead th.is-own{
color: var(--ink);
font-weight: 600;
}
.cmp-matrix tbody th{
width: 190px;
min-width: 170px;
font-weight: 700;
color: var(--ink);
line-height: 1.35;
background: var(--surface-2);
border-right: 1px solid var(--line);
}
.cmp-matrix tbody td{
min-width: 210px;
color: var(--ink-soft);
line-height: 1.55;
}

.cmp-matrix .is-own{
background: var(--accent-weak);
}
.cmp-matrix tbody td.is-own{
color: var(--ink);
font-weight: 600;
}
.cmp-matrix thead th.is-own{
box-shadow: inset 0 -3px 0 var(--accent);
}

.cmp-stack{
display: grid;
gap: var(--space-16);
}
.cmp-stack-group{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.cmp-stack-criterion{
margin: 0;
padding: var(--space-12) var(--space-16);
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 500;
color: var(--muted);
background: var(--surface-2);
border-bottom: 1px solid var(--line-strong);
letter-spacing: 0;
}
.cmp-stack-group dl{
margin: 0;
}
.cmp-stack-group dl > div{
padding: var(--space-12) var(--space-16);
border-bottom: 1px solid var(--line);
}
.cmp-stack-group dl > div:last-child{
border-bottom: 0;
}
.cmp-stack-group dl > div.is-own{
background: var(--accent-weak);
}
.cmp-stack-group dt{
font-size: var(--text-13);
font-weight: 700;
color: var(--muted);
margin-bottom: 3px;
}
.cmp-stack-group dl > div.is-own dt{

color: var(--accent-ink);
}
.cmp-stack-group dd{
margin: 0;
color: var(--ink-soft);
font-size: var(--text-14);
line-height: 1.5;
}
.cmp-stack-group dl > div.is-own dd{
color: var(--ink);
font-weight: 600;
}
.cmp-source-note{
max-width: 70ch;
font-size: var(--text-14);
line-height: 1.55;
color: var(--muted);
margin-bottom: 0;
}

.note-list{
list-style: none;
counter-reset: note;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-4);
}
.note-list li{
counter-increment: note;
position: relative;
padding: 18px 0 18px 48px;
border-top: 1px solid var(--line);
color: var(--ink-soft);
line-height: 1.6;
}
.note-list li:last-child{
border-bottom: 1px solid var(--line);
}
.note-list li::before{
content: counter(note, decimal-leading-zero);
position: absolute;
left: 0;
top: 20px;
font-family: var(--font-mono);
font-size: var(--text-14);
color: var(--accent-ink);
}
@media (min-width: 992px){
.note-list-wide li{
max-width: 92ch;
}
}

.cta-panel{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-20) var(--space-32);
padding: 28px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
}
.cta-panel > div:first-child{
max-width: 56ch;
}
.cta-panel-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cta-panel-actions .btn{
min-width: 150px;
}
@media (max-width: 575.98px){
.cta-panel{
padding: var(--space-20);
}
.cta-panel-actions,
.cta-panel-actions .btn{
width: 100%;
}
}

.docs-clients-callout{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-16) var(--space-24);
padding: 18px 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.docs-clients-callout-text{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.docs-clients-callout-title{
font-weight: 700;
color: var(--ink);
}
.docs-clients-callout-note{
font-size: var(--text-14);
color: var(--muted);
}

.staffel-shell{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow-x: auto;
}
.staffel-table{
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.staffel-table th,
.staffel-table td{
padding: 11px 18px;
border-bottom: 1px solid var(--line);
font-size: var(--text-14);
white-space: nowrap;
}
.staffel-table .num{
text-align: right;
}
.staffel-table thead th{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 500;
color: var(--muted);
background: var(--surface-2);
border-bottom: 1px solid var(--line-strong);
padding-top: 13px;
padding-bottom: 13px;
}
.staffel-table tbody th{
font-weight: 700;
color: var(--ink);
}
.staffel-table tbody td{
color: var(--ink-soft);
}
.staffel-table tbody tr:nth-child(even){
background: var(--surface-2);
}
.staffel-table tbody tr:last-child th,
.staffel-table tbody tr:last-child td{
border-bottom: 0;
}
.staffel-table tbody tr.is-best,
.staffel-table tbody tr.is-best:nth-child(even){
background: var(--accent-weak);
}
.staffel-table tbody tr.is-best th,
.staffel-table tbody tr.is-best td{
color: var(--ink);
font-weight: 700;
}

.staffel-cards{
display: grid;
gap: 10px;
}
.staffel-card{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: 14px 16px;
}
.staffel-card.is-compact{
background: var(--surface-2);
}
.staffel-card-head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-12);
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.staffel-card-head strong{
font-size: var(--text-16);
color: var(--ink);
}
.staffel-card-head span{
font-family: var(--font-mono);
font-size: var(--text-13);
color: var(--accent-ink);
text-align: right;
font-variant-numeric: tabular-nums;
}
.staffel-card-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-12);
margin: 0;
}
.staffel-card-grid dt{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 400;
color: var(--muted);
margin-bottom: var(--space-2);
}
.staffel-card-grid dd{
margin: 0;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.staffel-more{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: var(--space-12) var(--space-16);
}
.staffel-more summary{
list-style: none;
cursor: pointer;
font-weight: 700;
color: var(--ink);
}
.staffel-more summary::-webkit-details-marker{
display: none;
}
.staffel-more summary:focus-visible{
outline: none;
box-shadow: var(--focus);
border-radius: var(--radius-sm);
}
.staffel-more-grid{
display: grid;
gap: 10px;
margin-top: var(--space-12);
}

.check-list,
.fact-list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
}

.check-list li,
.fact-list li{
position: relative;
padding: 12px 0 12px 30px;
border-bottom: 1px solid var(--line);
color: var(--ink-soft);
line-height: 1.55;
}
.check-list li:first-child,
.fact-list li:first-child{
border-top: 1px solid var(--line);
}
.check-list li::before{
content: "";
position: absolute;
left: 2px;
top: 18px;
width: 14px;
height: 8px;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
.fact-list li::before{
content: "";
position: absolute;
left: 0;
top: 23px;
width: 14px;
height: 2px;
background: var(--line-strong);
}
.fact-list-note{
margin: var(--space-16) 0 0;
font-size: var(--text-14);
color: var(--muted);
}


.hero-anim {
animation: hero-rise 480ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes hero-rise {
from { transform: translate3d(0, 16px, 0); }
to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-anim {
animation: none;
transform: none;
}
}

.reveal {
opacity: 0;
transform: translate3d(0, 16px, 0);
transition:
opacity 420ms cubic-bezier(0.2, 0.7, 0.3, 1),
transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
transition-delay: var(--reveal-delay, 0ms);
}

.reveal .key-reveal,
.key-reveal.reveal{
opacity: 1 !important;
transform: none !important;
}
.reveal.section-head,
.reveal.cta,
.reveal.contact-card,
.reveal.price-slider-card,
.reveal.credit-logic-list {
transform: translate3d(0, 28px, 0) scale(0.99);
}
.steps-flow .step-connector.reveal {
opacity: 0;
filter: none;
transform: translate3d(0, 16px, 0) scale(0.92);
}
.steps-flow .step-connector.reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.hero-bg {
position: relative;
overflow: clip;
}
.hero-bg::before,
.hero-bg::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}

.hero-bg::before,
.hero-bg::after {
display: none;
}
.hero-bg > .container {
position: relative;
z-index: 1;
}
.btn-premium {
position: relative;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-premium::before,
.btn-premium::after {
content: none;
}

.btn-premium:hover {
background: #A83C07;
border-color: #A83C07;
}
.btn-premium:focus-visible {
outline: 0;
box-shadow: var(--focus);
}
.btn-premium-link {
display: inline-flex;
padding: 0.4rem 0;
}

.lux-tilt {
position: relative;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.feature.lux-tilt:hover,
.feature.lux-tilt:focus-within,
.article-card.lux-tilt:hover,
.article-card.lux-tilt:focus-within,
.hero-demo .card-saas.lux-tilt:hover,
.hero-demo .card-saas.lux-tilt:focus-within {
border-color: var(--line-strong);
}
.copy-btn.is-copied {
animation: copy-pop 260ms ease;
}
@keyframes copy-pop {
0% { transform: scale(1); }
45% { transform: scale(1.11); }
100% { transform: scale(1); }
}
.copy-toast {
opacity: 0;
transform: translate3d(0, 6px, 0);
transition: opacity 220ms ease, transform 220ms ease;
font-size: var(--text-13);
font-weight: 700;
color: var(--muted);
margin-top: var(--space-8);
pointer-events: none;
}
.copy-toast.is-on {
opacity: 1;
transform: translate3d(0, 0, 0);
}

.pricing-card {
transition: border-color var(--dur) var(--ease);
}
.pricing-card:hover,
.pricing-card:focus-visible {
border-color: var(--accent);
}
.pricing-card:focus-visible {
outline: 0;
box-shadow: var(--focus);
}
.pricing-card.pricing-card-static,
.pricing-card.pricing-card-static:hover,
.pricing-card.pricing-card-static:focus-visible {
box-shadow: var(--shadow-sm);
border-color: var(--line);
}

.skeleton {
min-height: 214px;
border-radius: var(--radius-lg);
background: linear-gradient(108deg, var(--surface-2) 18%, var(--line) 35%, var(--surface-2) 54%);
background-size: 240% 100%;
animation: skeleton-shimmer 1.1s linear infinite;
margin: var(--space-12);
}
@media (min-width: 992px) {
.skeleton {
min-height: 252px;
}
}
@keyframes skeleton-shimmer {
from { background-position: 100% 0; }
to { background-position: -120% 0; }
}
.code-block {
transition: transform 220ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.code-block:hover,
.code-block:focus-within {
border-color: var(--line-strong);
}
.code-block:focus-within {
outline: 0;
box-shadow: var(--focus);
}
.faq-panel {
max-height: 0;
opacity: 0;
transform: translate3d(0, -4px, 0);
overflow: hidden;
transition: max-height 320ms ease, opacity 260ms ease, transform 280ms ease;
}
.faq-item.is-open .faq-panel {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.faq-item .faq-trigger {
transition: background-color 220ms ease, color 220ms ease;
}
.faq-item .faq-trigger:focus-visible {
z-index: 1;
box-shadow: inset 0 0 0 2px var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal.is-visible,
.btn-premium,
.pricing-card,
.code-block,
.faq-panel,
.copy-toast,
.copy-btn,
.hero-bg::before,
.hero-bg::after,
.skeleton,
.lux-tilt {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
}
.reveal {
opacity: 1;
}
.lux-tilt::before {
display: none;
}
}

.regio-chart-shell{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-20);
max-width: 900px;
}
.regio-chart{
display: block;
width: 100%;

height: auto;
}

.regio-table-scroll{
max-height: 30rem;
overflow-y: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.regio-table-scroll .staffel-table thead th{
position: sticky;
top: 0;
background: var(--surface-2);
z-index: 1;
}
@media (max-width: 575.98px){
.regio-chart-shell{ padding: var(--space-12); }
.regio-table-scroll{ max-height: 24rem; }
}


.demo-notice{
border: 1px solid var(--line);
background: var(--accent-weak);
border-radius: var(--radius);
padding: var(--space-12) var(--space-16);
font-size: var(--text-14);
color: var(--ink-soft);
}
.demo-app{
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.demo-app-topbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
flex-wrap: wrap;
background: var(--ink);
color: var(--paper);
padding: var(--space-12) var(--space-16);
}
.demo-app-brand{
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-16);
letter-spacing: .2px;
}
.demo-app-badge{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--paper);
border: 1px solid rgba(243,245,247,.35);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-8);
opacity: .85;
}
.demo-app-status{
display: flex;
align-items: center;
gap: var(--space-8);
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: var(--text-13);
}
.demo-app-body{ padding: var(--space-16); }
.demo-woz-cell{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-woz-leeg{ color: var(--muted); font-size: var(--text-14); }
.demo-peildatum{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}
@media (max-width: 575.98px){
.demo-app-body{ padding: 10px; }
}

.doc-code{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-16);
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--text-13);
line-height: 1.55;
color: var(--ink-soft);
}
.doc-code code{ white-space: pre; }

.diagram-scroll{ overflow-x: auto; }
.diagram-scroll svg{ min-width: 680px; }


.demo-regie{
background: var(--accent-weak);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.demo-regie-top{
display: flex;
align-items: center;
gap: var(--space-12);
flex-wrap: wrap;
justify-content: space-between;
}
.demo-chip{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 600;
color: var(--accent-ink);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-8);
white-space: nowrap;
}
.demo-persona{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--ink-soft);
white-space: nowrap;
}
.demo-stations{
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin: 0;
padding: 0;
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}
.demo-stations li{
display: flex;
align-items: center;
gap: 6px;
}
.demo-stations li::before{
content: "";
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
border: 1px solid var(--line-strong);
background: var(--surface);
}
.demo-stations li.is-af{ color: var(--ink-soft); }
.demo-stations li.is-af::before{ background: var(--ink-soft); border-color: var(--ink-soft); }
.demo-stations li.is-actief{ color: var(--ink); font-weight: 600; }
.demo-stations li.is-actief::before{ background: var(--accent); border-color: var(--accent); }
.demo-regie-verhaal{
margin: 0;
color: var(--ink-soft);
font-size: var(--text-16);
max-width: 60rem;
}
.demo-browser{
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
background: var(--paper);
box-shadow: var(--shadow-sm);
}
.demo-browser-bar{
display: flex;
align-items: center;
gap: var(--space-12);
background: var(--surface-2);
border-bottom: 1px solid var(--line);
padding: var(--space-8) var(--space-12);
}
.demo-browser-dots{
display: flex;
gap: 5px;
flex: 0 0 auto;
}
.demo-browser-dots span{
width: 9px;
height: 9px;
border-radius: var(--radius-pill);
background: var(--line-strong);
}
.demo-url{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 4px 10px;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.demo-url .demo-url-host{ color: var(--ink); font-weight: 600; }
.demo-url.is-wozapi .demo-url-host{ color: var(--accent-ink); }
.demo-scherm{ background: var(--paper); }

.demo-wozapi-kop{
display: flex;
align-items: center;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--line);
color: var(--ink);
}
.demo-wozapi-kop .brand-lockup{ font-size: var(--text-16); }
.demo-kaart-vlak{
padding: var(--space-24) var(--space-16) var(--space-32);
display: flex;
justify-content: center;
}
.demo-kaart{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-24);
width: 100%;
max-width: 30rem;
}

.demo-browser .demo-app{
border: 0;
border-radius: 0;
}
@media (max-width: 575.98px){
.demo-regie{ padding: var(--space-12); }
.demo-kaart-vlak{ padding: var(--space-16) var(--space-8) var(--space-24); }
.demo-kaart{ padding: var(--space-16); }
}

.demo-app-topbar .btn-outline-light{
color: var(--paper);
border-color: rgba(243,245,247,.55);
}
.demo-app-topbar .btn-outline-light:hover,
.demo-app-topbar .btn-outline-light:focus-visible{
color: var(--ink);
background: var(--paper);
border-color: var(--paper);
}

.demo-app-status span + span::before{
content: "\00B7\00A0";
color: var(--paper);
opacity: .5;
}

.key-reveal{
border: 1px solid var(--accent);
border-radius: var(--radius);
background: var(--accent-weak);
padding: 18px;
}
.key-reveal-note{
color: var(--ink-soft);
font-size: var(--text-14);
max-width: 62ch;
}
.key-reveal-value{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-12);
margin-top: 14px;
}
.key-reveal-value code{
flex: 1 1 22rem;
font-family: var(--font-mono);
font-size: var(--text-16);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 12px 14px;
overflow-wrap: anywhere;
word-break: break-all;
user-select: all;
}
.key-panel{
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
align-items: center;
justify-content: space-between;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: 16px 18px;
}
.key-panel-value{
font-family: var(--font-mono);
font-size: var(--text-16);
margin: 4px 0 6px;
}
.key-panel-mask{
color: var(--muted);
letter-spacing: .1em;
}
.key-panel-note{
color: var(--muted);
font-size: var(--text-14);
}
.key-panel-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.quickstart{
list-style: none;
counter-reset: quickstart;
display: grid;
gap: 10px;
padding: 0;
margin: 0;
}
.quickstart li{
counter-increment: quickstart;
position: relative;
padding-left: 38px;
}
.quickstart li::before{
content: counter(quickstart);
position: absolute;
left: 0;
top: 0;
width: 26px;
height: 26px;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--text-13);
font-weight: 600;
color: var(--accent-ink);
background: var(--accent-weak);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
}
.quickstart-title{
display: block;
font-weight: 700;
}
.quickstart-note{
display: block;
color: var(--muted);
font-size: var(--text-14);
}

.api-tester-row{
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.api-tester-row .try-input{
flex: 1 1 20rem;
min-width: 0;
}
.api-tester-hint{
font-size: var(--text-14);
margin: var(--space-8) 0 0;
}
.api-tester-result{
margin-top: 18px;
}
.api-tester-status{
display: grid;
gap: var(--space-4);
border: 1px solid var(--line);
border-left-width: 1px;
border-radius: var(--radius-sm);
background: var(--surface-2);
padding: 12px 14px;
}
.api-tester-status strong{
font-weight: 700;
}
.api-tester-status span{
color: var(--muted);
font-size: var(--text-14);
}
.api-tester-status .btn{
justify-self: start;
margin-top: 6px;
}
.api-tester-status.is-ok{
border-color: var(--ok);
}
.api-tester-status.is-warn{
border-color: var(--warn);
}
.api-tester-status.is-fout{
border-color: var(--danger);
}
.api-tester-credits{
font-family: var(--font-mono);
font-size: var(--text-14);
color: var(--ink-soft);
}
.api-tester-toggle{
display: inline-flex;
gap: var(--space-4);
margin: var(--space-16) 0 var(--space-12);
padding: 3px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface-2);
}
.api-tester-toggle-btn,
.code-samples-tab{
border: 0;
background: transparent;
color: var(--muted);
font-family: var(--font-mono);
font-size: var(--text-13);
padding: 6px 14px;
border-radius: var(--radius-pill);
cursor: pointer;

min-height: 44px;
}
.api-tester-toggle-btn.is-active,
.code-samples-tab.is-active{
background: var(--ink);
color: var(--surface);
}
.api-tester-toggle-btn:focus-visible,
.code-samples-tab:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.api-tester-panel{
display: none;
}
.api-tester-panel.is-active{
display: block;
}
.explain-list{
display: grid;
gap: 0;
margin: 0;
}
.explain-list dt{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
padding-top: var(--space-12);
}
.explain-list dd{
margin: var(--space-2) 0 0;
padding-bottom: var(--space-12);
border-bottom: 1px solid var(--line);
}
.explain-list dd:last-child{
border-bottom: 0;
}
.explain-value{
display: block;
font-weight: 600;
overflow-wrap: anywhere;
}
.explain-note{
display: block;
color: var(--muted);
font-size: var(--text-14);
margin-top: var(--space-2);
}
.woz-reeks{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-4);
}
.woz-reeks li{
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.woz-jaar{
display: inline-block;
min-width: 3.4em;
color: var(--muted);
}

.code-samples-tabs{
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-12);
padding: 3px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface-2);
width: fit-content;
max-width: 100%;
}
.code-samples-panel{
display: none;
}
.code-samples-panel.is-active{
display: block;
}
.code-samples .codebox{
position: relative;
}
.code-samples .codebox pre{
margin: 0;
overflow-x: auto;

padding-right: 6.5rem;
}
.code-samples-copy{
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}

@media (max-width: 767.98px){
.table-stack table,
.table-stack tbody,
.table-stack tr,
.table-stack td{
display: block;
width: 100%;
}
.table-stack thead{
display: none;
}
.table-stack tbody{
display: grid;
gap: var(--space-12);
}
.table-stack tr{
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
padding: 14px;
}
.table-stack td{
padding: 0;
border: 0;
text-align: left !important;
}
.table-stack td + td{
margin-top: 10px;
}
.table-stack td::before{
content: attr(data-label);
display: block;
margin-bottom: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted);
}
.table-stack td[data-label="Acties"]::before{
display: none;
}
.table-stack td[data-label="Acties"] .d-inline-flex{
display: flex !important;
width: 100%;
}
.table-stack td[data-label="Acties"] .btn{
flex: 1 1 auto;
}
.key-reveal-value .btn{
width: 100%;
}
.api-tester-row .btn{
width: 100%;
}
}

.bi{
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -.125em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.bi-info-circle{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8%2015A7%207%200%201%201%208%201a7%207%200%200%201%200%2014m0%201A8%208%200%201%200%208%200a8%208%200%200%200%200%2016%22%2F%3E%20%3Cpath%20d%3D%22m8.93%206.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738%203.468c-.194.897.105%201.319.808%201.319.545%200%201.178-.252%201.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275%200-.375-.193-.304-.533zM9%204.5a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8%2015A7%207%200%201%201%208%201a7%207%200%200%201%200%2014m0%201A8%208%200%201%200%208%200a8%208%200%200%200%200%2016%22%2F%3E%20%3Cpath%20d%3D%22m8.93%206.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738%203.468c-.194.897.105%201.319.808%201.319.545%200%201.178-.252%201.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275%200-.375-.193-.304-.533zM9%204.5a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22%2F%3E%3C%2Fsvg%3E");
}
.bi-exclamation-triangle-fill{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8.982%201.566a1.13%201.13%200%200%200-1.96%200L.165%2013.233c-.457.778.091%201.767.98%201.767h13.713c.889%200%201.438-.99.98-1.767zM8%205c.535%200%20.954.462.9.995l-.35%203.507a.552.552%200%200%201-1.1%200L7.1%205.995A.905.905%200%200%201%208%205m.002%206a1%201%200%201%201%200%202%201%201%200%200%201%200-2%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8.982%201.566a1.13%201.13%200%200%200-1.96%200L.165%2013.233c-.457.778.091%201.767.98%201.767h13.713c.889%200%201.438-.99.98-1.767zM8%205c.535%200%20.954.462.9.995l-.35%203.507a.552.552%200%200%201-1.1%200L7.1%205.995A.905.905%200%200%201%208%205m.002%206a1%201%200%201%201%200%202%201%201%200%200%201%200-2%22%2F%3E%3C%2Fsvg%3E");
}
.bi-check-circle-fill{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200m-3.97-3.03a.75.75%200%200%200-1.08.022L7.477%209.417%205.384%207.323a.75.75%200%200%200-1.06%201.06L6.97%2011.03a.75.75%200%200%200%201.079-.02l3.992-4.99a.75.75%200%200%200-.01-1.05z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200m-3.97-3.03a.75.75%200%200%200-1.08.022L7.477%209.417%205.384%207.323a.75.75%200%200%200-1.06%201.06L6.97%2011.03a.75.75%200%200%200%201.079-.02l3.992-4.99a.75.75%200%200%200-.01-1.05z%22%2F%3E%3C%2Fsvg%3E");
}
.bi-play-fill{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22m11.596%208.697-6.363%203.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01%201.233-.696l6.363%203.692a.802.802%200%200%201%200%201.393%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22m11.596%208.697-6.363%203.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01%201.233-.696l6.363%203.692a.802.802%200%200%201%200%201.393%22%2F%3E%3C%2Fsvg%3E");
}
.bi-arrow-clockwise{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8%203a5%205%200%201%200%204.546%202.914.5.5%200%200%201%20.908-.417A6%206%200%201%201%208%202z%22%2F%3E%20%3Cpath%20d%3D%22M8%204.466V.534a.25.25%200%200%201%20.41-.192l2.36%201.966c.12.1.12.284%200%20.384L8.41%204.658A.25.25%200%200%201%208%204.466%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8%203a5%205%200%201%200%204.546%202.914.5.5%200%200%201%20.908-.417A6%206%200%201%201%208%202z%22%2F%3E%20%3Cpath%20d%3D%22M8%204.466V.534a.25.25%200%200%201%20.41-.192l2.36%201.966c.12.1.12.284%200%20.384L8.41%204.658A.25.25%200%200%201%208%204.466%22%2F%3E%3C%2Fsvg%3E");
}
.bi-x-circle-fill{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200M5.354%204.646a.5.5%200%201%200-.708.708L7.293%208l-2.647%202.646a.5.5%200%200%200%20.708.708L8%208.707l2.646%202.647a.5.5%200%200%200%20.708-.708L8.707%208l2.647-2.646a.5.5%200%200%200-.708-.708L8%207.293z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200M5.354%204.646a.5.5%200%201%200-.708.708L7.293%208l-2.647%202.646a.5.5%200%200%200%20.708.708L8%208.707l2.646%202.647a.5.5%200%200%200%20.708-.708L8.707%208l2.647-2.646a.5.5%200%200%200-.708-.708L8%207.293z%22%2F%3E%3C%2Fsvg%3E");
}
.bi-stars{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M7.657%206.247c.11-.33.576-.33.686%200l.645%201.937a2.89%202.89%200%200%200%201.829%201.828l1.936.645c.33.11.33.576%200%20.686l-1.937.645a2.89%202.89%200%200%200-1.828%201.829l-.645%201.936a.361.361%200%200%201-.686%200l-.645-1.937a2.89%202.89%200%200%200-1.828-1.828l-1.937-.645a.361.361%200%200%201%200-.686l1.937-.645a2.89%202.89%200%200%200%201.828-1.828zM3.794%201.148a.217.217%200%200%201%20.412%200l.387%201.162c.173.518.579.924%201.097%201.097l1.162.387a.217.217%200%200%201%200%20.412l-1.162.387A1.73%201.73%200%200%200%204.593%205.69l-.387%201.162a.217.217%200%200%201-.412%200L3.407%205.69A1.73%201.73%200%200%200%202.31%204.593l-1.162-.387a.217.217%200%200%201%200-.412l1.162-.387A1.73%201.73%200%200%200%203.407%202.31zM10.863.099a.145.145%200%200%201%20.274%200l.258.774c.115.346.386.617.732.732l.774.258a.145.145%200%200%201%200%20.274l-.774.258a1.16%201.16%200%200%200-.732.732l-.258.774a.145.145%200%200%201-.274%200l-.258-.774a1.16%201.16%200%200%200-.732-.732L9.1%202.137a.145.145%200%200%201%200-.274l.774-.258c.346-.115.617-.386.732-.732z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M7.657%206.247c.11-.33.576-.33.686%200l.645%201.937a2.89%202.89%200%200%200%201.829%201.828l1.936.645c.33.11.33.576%200%20.686l-1.937.645a2.89%202.89%200%200%200-1.828%201.829l-.645%201.936a.361.361%200%200%201-.686%200l-.645-1.937a2.89%202.89%200%200%200-1.828-1.828l-1.937-.645a.361.361%200%200%201%200-.686l1.937-.645a2.89%202.89%200%200%200%201.828-1.828zM3.794%201.148a.217.217%200%200%201%20.412%200l.387%201.162c.173.518.579.924%201.097%201.097l1.162.387a.217.217%200%200%201%200%20.412l-1.162.387A1.73%201.73%200%200%200%204.593%205.69l-.387%201.162a.217.217%200%200%201-.412%200L3.407%205.69A1.73%201.73%200%200%200%202.31%204.593l-1.162-.387a.217.217%200%200%201%200-.412l1.162-.387A1.73%201.73%200%200%200%203.407%202.31zM10.863.099a.145.145%200%200%201%20.274%200l.258.774c.115.346.386.617.732.732l.774.258a.145.145%200%200%201%200%20.274l-.774.258a1.16%201.16%200%200%200-.732.732l-.258.774a.145.145%200%200%201-.274%200l-.258-.774a1.16%201.16%200%200%200-.732-.732L9.1%202.137a.145.145%200%200%201%200-.274l.774-.258c.346-.115.617-.386.732-.732z%22%2F%3E%3C%2Fsvg%3E");
}
.bi-shield-check{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M5.338%201.59a61%2061%200%200%200-2.837.856.48.48%200%200%200-.328.39c-.554%204.157.726%207.19%202.253%209.188a10.7%2010.7%200%200%200%202.287%202.233c.346.244.652.42.893.533q.18.085.293.118a1%201%200%200%200%20.101.025%201%201%200%200%200%20.1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7%2010.7%200%200%200%202.287-2.233c1.527-1.997%202.807-5.031%202.253-9.188a.48.48%200%200%200-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552%201.29%208.531%201.067%208%201.067c-.53%200-1.552.223-2.662.524zM5.072.56C6.157.265%207.31%200%208%200s1.843.265%202.928.56c1.11.3%202.229.655%202.887.87a1.54%201.54%200%200%201%201.044%201.262c.596%204.477-.787%207.795-2.465%209.99a11.8%2011.8%200%200%201-2.517%202.453%207%207%200%200%201-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7%207%200%200%201-1.048-.625%2011.8%2011.8%200%200%201-2.517-2.453C1.928%2010.487.545%207.169%201.141%202.692A1.54%201.54%200%200%201%202.185%201.43%2063%2063%200%200%201%205.072.56%22%2F%3E%20%3Cpath%20d%3D%22M10.854%205.146a.5.5%200%200%201%200%20.708l-3%203a.5.5%200%200%201-.708%200l-1.5-1.5a.5.5%200%201%201%20.708-.708L7.5%207.793l2.646-2.647a.5.5%200%200%201%20.708%200%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M5.338%201.59a61%2061%200%200%200-2.837.856.48.48%200%200%200-.328.39c-.554%204.157.726%207.19%202.253%209.188a10.7%2010.7%200%200%200%202.287%202.233c.346.244.652.42.893.533q.18.085.293.118a1%201%200%200%200%20.101.025%201%201%200%200%200%20.1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7%2010.7%200%200%200%202.287-2.233c1.527-1.997%202.807-5.031%202.253-9.188a.48.48%200%200%200-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552%201.29%208.531%201.067%208%201.067c-.53%200-1.552.223-2.662.524zM5.072.56C6.157.265%207.31%200%208%200s1.843.265%202.928.56c1.11.3%202.229.655%202.887.87a1.54%201.54%200%200%201%201.044%201.262c.596%204.477-.787%207.795-2.465%209.99a11.8%2011.8%200%200%201-2.517%202.453%207%207%200%200%201-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7%207%200%200%201-1.048-.625%2011.8%2011.8%200%200%201-2.517-2.453C1.928%2010.487.545%207.169%201.141%202.692A1.54%201.54%200%200%201%202.185%201.43%2063%2063%200%200%201%205.072.56%22%2F%3E%20%3Cpath%20d%3D%22M10.854%205.146a.5.5%200%200%201%200%20.708l-3%203a.5.5%200%200%201-.708%200l-1.5-1.5a.5.5%200%201%201%20.708-.708L7.5%207.793l2.646-2.647a.5.5%200%200%201%20.708%200%22%2F%3E%3C%2Fsvg%3E");
}
.bi-robot{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M6%2012.5a.5.5%200%200%201%20.5-.5h3a.5.5%200%200%201%200%201h-3a.5.5%200%200%201-.5-.5M3%208.062C3%206.76%204.235%205.765%205.53%205.886a26.6%2026.6%200%200%200%204.94%200C11.765%205.765%2013%206.76%2013%208.062v1.157a.93.93%200%200%201-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93%200%200%201%203%209.219zm4.542-.827a.25.25%200%200%200-.217.068l-.92.9a25%2025%200%200%201-1.871-.183.25.25%200%200%200-.068.495c.55.076%201.232.149%202.02.193a.25.25%200%200%200%20.189-.071l.754-.736.847%201.71a.25.25%200%200%200%20.404.062l.932-.97a25%2025%200%200%200%201.922-.188.25.25%200%200%200-.068-.495c-.538.074-1.207.145-1.98.189a.25.25%200%200%200-.166.076l-.754.785-.842-1.7a.25.25%200%200%200-.182-.135%22%2F%3E%20%3Cpath%20d%3D%22M8.5%201.866a1%201%200%201%200-1%200V3h-2A4.5%204.5%200%200%200%201%207.5V8a1%201%200%200%200-1%201v2a1%201%200%200%200%201%201v1a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-1a1%201%200%200%200%201-1V9a1%201%200%200%200-1-1v-.5A4.5%204.5%200%200%200%2010.5%203h-2zM14%207.5V13a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V7.5A3.5%203.5%200%200%201%205.5%204h5A3.5%203.5%200%200%201%2014%207.5%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M6%2012.5a.5.5%200%200%201%20.5-.5h3a.5.5%200%200%201%200%201h-3a.5.5%200%200%201-.5-.5M3%208.062C3%206.76%204.235%205.765%205.53%205.886a26.6%2026.6%200%200%200%204.94%200C11.765%205.765%2013%206.76%2013%208.062v1.157a.93.93%200%200%201-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93%200%200%201%203%209.219zm4.542-.827a.25.25%200%200%200-.217.068l-.92.9a25%2025%200%200%201-1.871-.183.25.25%200%200%200-.068.495c.55.076%201.232.149%202.02.193a.25.25%200%200%200%20.189-.071l.754-.736.847%201.71a.25.25%200%200%200%20.404.062l.932-.97a25%2025%200%200%200%201.922-.188.25.25%200%200%200-.068-.495c-.538.074-1.207.145-1.98.189a.25.25%200%200%200-.166.076l-.754.785-.842-1.7a.25.25%200%200%200-.182-.135%22%2F%3E%20%3Cpath%20d%3D%22M8.5%201.866a1%201%200%201%200-1%200V3h-2A4.5%204.5%200%200%200%201%207.5V8a1%201%200%200%200-1%201v2a1%201%200%200%200%201%201v1a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-1a1%201%200%200%200%201-1V9a1%201%200%200%200-1-1v-.5A4.5%204.5%200%200%200%2010.5%203h-2zM14%207.5V13a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V7.5A3.5%203.5%200%200%201%205.5%204h5A3.5%203.5%200%200%201%2014%207.5%22%2F%3E%3C%2Fsvg%3E");
}
.bi-lightbulb{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M2%206a6%206%200%201%201%2010.174%204.31c-.203.196-.359.4-.453.619l-.762%201.769A.5.5%200%200%201%2010.5%2013a.5.5%200%200%201%200%201%20.5.5%200%200%201%200%201l-.224.447a1%201%200%200%201-.894.553H6.618a1%201%200%200%201-.894-.553L5.5%2015a.5.5%200%200%201%200-1%20.5.5%200%200%201%200-1%20.5.5%200%200%201-.46-.302l-.761-1.77a2%202%200%200%200-.453-.618A5.98%205.98%200%200%201%202%206m6-5a5%205%200%200%200-3.479%208.592c.263.254.514.564.676.941L5.83%2012h4.342l.632-1.467c.162-.377.413-.687.676-.941A5%205%200%200%200%208%201%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M2%206a6%206%200%201%201%2010.174%204.31c-.203.196-.359.4-.453.619l-.762%201.769A.5.5%200%200%201%2010.5%2013a.5.5%200%200%201%200%201%20.5.5%200%200%201%200%201l-.224.447a1%201%200%200%201-.894.553H6.618a1%201%200%200%201-.894-.553L5.5%2015a.5.5%200%200%201%200-1%20.5.5%200%200%201%200-1%20.5.5%200%200%201-.46-.302l-.761-1.77a2%202%200%200%200-.453-.618A5.98%205.98%200%200%201%202%206m6-5a5%205%200%200%200-3.479%208.592c.263.254.514.564.676.941L5.83%2012h4.342l.632-1.467c.162-.377.413-.687.676-.941A5%205%200%200%200%208%201%22%2F%3E%3C%2Fsvg%3E");
}
.bi-info-circle-fill{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8%2016A8%208%200%201%200%208%200a8%208%200%200%200%200%2016m.93-9.412-1%204.705c-.07.34.029.533.304.533.194%200%20.487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703%200-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381%202.29-.287zM8%205.5a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8%2016A8%208%200%201%200%208%200a8%208%200%200%200%200%2016m.93-9.412-1%204.705c-.07.34.029.533.304.533.194%200%20.487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703%200-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381%202.29-.287zM8%205.5a1%201%200%201%201%200-2%201%201%200%200%201%200%202%22%2F%3E%3C%2Fsvg%3E");
}
.bi-envelope-exclamation{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M2%202a2%202%200%200%200-2%202v8.01A2%202%200%200%200%202%2014h5.5a.5.5%200%200%200%200-1H2a1%201%200%200%201-.966-.741l5.64-3.471L8%209.583l7-4.2V8.5a.5.5%200%200%200%201%200V4a2%202%200%200%200-2-2zm3.708%206.208L1%2011.105V5.383zM1%204.217V4a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v.217l-7%204.2z%22%2F%3E%20%3Cpath%20d%3D%22M12.5%2016a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207m.5-5v1.5a.5.5%200%200%201-1%200V11a.5.5%200%200%201%201%200m0%203a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M2%202a2%202%200%200%200-2%202v8.01A2%202%200%200%200%202%2014h5.5a.5.5%200%200%200%200-1H2a1%201%200%200%201-.966-.741l5.64-3.471L8%209.583l7-4.2V8.5a.5.5%200%200%200%201%200V4a2%202%200%200%200-2-2zm3.708%206.208L1%2011.105V5.383zM1%204.217V4a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v.217l-7%204.2z%22%2F%3E%20%3Cpath%20d%3D%22M12.5%2016a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207m.5-5v1.5a.5.5%200%200%201-1%200V11a.5.5%200%200%201%201%200m0%203a.5.5%200%201%201-1%200%20.5.5%200%200%201%201%200%22%2F%3E%3C%2Fsvg%3E");
}
.bi-envelope-check{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M2%202a2%202%200%200%200-2%202v8.01A2%202%200%200%200%202%2014h5.5a.5.5%200%200%200%200-1H2a1%201%200%200%201-.966-.741l5.64-3.471L8%209.583l7-4.2V8.5a.5.5%200%200%200%201%200V4a2%202%200%200%200-2-2zm3.708%206.208L1%2011.105V5.383zM1%204.217V4a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v.217l-7%204.2z%22%2F%3E%20%3Cpath%20d%3D%22M16%2012.5a3.5%203.5%200%201%201-7%200%203.5%203.5%200%200%201%207%200m-1.993-1.679a.5.5%200%200%200-.686.172l-1.17%201.95-.547-.547a.5.5%200%200%200-.708.708l.774.773a.75.75%200%200%200%201.174-.144l1.335-2.226a.5.5%200%200%200-.172-.686%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M2%202a2%202%200%200%200-2%202v8.01A2%202%200%200%200%202%2014h5.5a.5.5%200%200%200%200-1H2a1%201%200%200%201-.966-.741l5.64-3.471L8%209.583l7-4.2V8.5a.5.5%200%200%200%201%200V4a2%202%200%200%200-2-2zm3.708%206.208L1%2011.105V5.383zM1%204.217V4a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v.217l-7%204.2z%22%2F%3E%20%3Cpath%20d%3D%22M16%2012.5a3.5%203.5%200%201%201-7%200%203.5%203.5%200%200%201%207%200m-1.993-1.679a.5.5%200%200%200-.686.172l-1.17%201.95-.547-.547a.5.5%200%200%200-.708.708l.774.773a.75.75%200%200%200%201.174-.144l1.335-2.226a.5.5%200%200%200-.172-.686%22%2F%3E%3C%2Fsvg%3E");
}
.bi-envelope{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M0%204a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm2-1a1%201%200%200%200-1%201v.217l7%204.2%207-4.2V4a1%201%200%200%200-1-1zm13%202.383-4.708%202.825L15%2011.105zm-.034%206.876-5.64-3.471L8%209.583l-1.326-.795-5.64%203.47A1%201%200%200%200%202%2013h12a1%201%200%200%200%20.966-.741M1%2011.105l4.708-2.897L1%205.383z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M0%204a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm2-1a1%201%200%200%200-1%201v.217l7%204.2%207-4.2V4a1%201%200%200%200-1-1zm13%202.383-4.708%202.825L15%2011.105zm-.034%206.876-5.64-3.471L8%209.583l-1.326-.795-5.64%203.47A1%201%200%200%200%202%2013h12a1%201%200%200%200%20.966-.741M1%2011.105l4.708-2.897L1%205.383z%22%2F%3E%3C%2Fsvg%3E");
}
.bi-clock-history{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8.515%201.019A7%207%200%200%200%208%201V0a8%208%200%200%201%20.589.022zm2.004.45a7%207%200%200%200-.985-.299l.219-.976q.576.129%201.126.342zm1.37.71a7%207%200%200%200-.439-.27l.493-.87a8%208%200%200%201%20.979.654l-.615.789a7%207%200%200%200-.418-.302zm1.834%201.79a7%207%200%200%200-.653-.796l.724-.69q.406.429.747.91zm.744%201.352a7%207%200%200%200-.214-.468l.893-.45a8%208%200%200%201%20.45%201.088l-.95.313a7%207%200%200%200-.179-.483m.53%202.507a7%207%200%200%200-.1-1.025l.985-.17q.1.58.116%201.17zm-.131%201.538q.05-.254.081-.51l.993.123a8%208%200%200%201-.23%201.155l-.964-.267q.069-.247.12-.501m-.952%202.379q.276-.436.486-.908l.914.405q-.24.54-.555%201.038zm-.964%201.205q.183-.183.35-.378l.758.653a8%208%200%200%201-.401.432z%22%2F%3E%20%3Cpath%20d%3D%22M8%201a7%207%200%201%200%204.95%2011.95l.707.707A8.001%208.001%200%201%201%208%200z%22%2F%3E%20%3Cpath%20d%3D%22M7.5%203a.5.5%200%200%201%20.5.5v5.21l3.248%201.856a.5.5%200%200%201-.496.868l-3.5-2A.5.5%200%200%201%207%209V3.5a.5.5%200%200%201%20.5-.5%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Cpath%20d%3D%22M8.515%201.019A7%207%200%200%200%208%201V0a8%208%200%200%201%20.589.022zm2.004.45a7%207%200%200%200-.985-.299l.219-.976q.576.129%201.126.342zm1.37.71a7%207%200%200%200-.439-.27l.493-.87a8%208%200%200%201%20.979.654l-.615.789a7%207%200%200%200-.418-.302zm1.834%201.79a7%207%200%200%200-.653-.796l.724-.69q.406.429.747.91zm.744%201.352a7%207%200%200%200-.214-.468l.893-.45a8%208%200%200%201%20.45%201.088l-.95.313a7%207%200%200%200-.179-.483m.53%202.507a7%207%200%200%200-.1-1.025l.985-.17q.1.58.116%201.17zm-.131%201.538q.05-.254.081-.51l.993.123a8%208%200%200%201-.23%201.155l-.964-.267q.069-.247.12-.501m-.952%202.379q.276-.436.486-.908l.914.405q-.24.54-.555%201.038zm-.964%201.205q.183-.183.35-.378l.758.653a8%208%200%200%201-.401.432z%22%2F%3E%20%3Cpath%20d%3D%22M8%201a7%207%200%201%200%204.95%2011.95l.707.707A8.001%208.001%200%201%201%208%200z%22%2F%3E%20%3Cpath%20d%3D%22M7.5%203a.5.5%200%200%201%20.5.5v5.21l3.248%201.856a.5.5%200%200%201-.496.868l-3.5-2A.5.5%200%200%201%207%209V3.5a.5.5%200%200%201%20.5-.5%22%2F%3E%3C%2Fsvg%3E");
}

.admin-nav-link{
padding: 7px 10px;
font-size: var(--text-16);
line-height: 1.25;
}
.admin-open-badge{
display: inline-block;
min-width: 1.5em;
margin-left: 6px;
padding: 1px 6px;
border-radius: var(--radius-pill);
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 600;
text-align: center;
vertical-align: middle;
}
.admin-tabbar{
display: none;
}
@media (max-width: 991.98px){

body.admin-body .admin-shell-nav{
display: none;
}
body.admin-body{
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
.admin-tabbar{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1030;
display: flex;
align-items: stretch;
background: var(--surface);
border-top: 1px solid var(--line-strong);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.admin-tabbar-item{
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 56px;
padding: 6px 2px;
color: var(--muted);
text-decoration: none;
font-family: var(--font-body);
font-size: var(--text-12);
font-weight: 600;
text-align: center;
cursor: pointer;
list-style: none;
}
.admin-tabbar-item::-webkit-details-marker{
display: none;
}

.admin-tabbar-icon{
position: relative;
display: block;
line-height: 0;
}
.admin-tabbar-icon svg{
width: 22px;
height: 22px;
}
.admin-tabbar-icon .admin-open-badge{
position: absolute;
top: -6px;
left: 12px;
margin: 0;
padding: 0 5px;
font-size: var(--text-12);
line-height: 1.5;
border: 2px solid var(--surface);
}
.admin-tabbar-item.is-active{
color: var(--accent-ink);
box-shadow: inset 0 2px 0 0 var(--accent);
}

.admin-tabbar-item.is-active .admin-tabbar-icon svg{
stroke-width: 2.25;
}
.admin-tabbar-item.is-active .admin-tabbar-label{
font-weight: 700;
}
.admin-tabbar-item:focus-visible{
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.admin-tabbar-label{
display: block;
}
.admin-tabbar-more{
flex: 1 1 0;
display: flex;
}
.admin-tabbar-more > summary{
width: 100%;
}
.admin-tabbar-more[open] > summary{
color: var(--accent-ink);
background: var(--surface-2);
}

.admin-tabbar-more:not([open]) .admin-tabbar-panel{
display: none;
}
.admin-tabbar-panel{
position: fixed;
left: 0;
right: 0;
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
max-height: 60vh;
overflow-y: auto;
background: var(--surface);
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
padding: 1px;
}
.admin-tabbar-panel a{
padding: 14px 12px;
background: var(--surface);
color: var(--ink);
text-decoration: none;
font-size: var(--text-14);
}
.admin-tabbar-panel a:active{
background: var(--accent-weak);
}

.admin-table--stack table,
.admin-table--stack tbody,
.admin-table--stack tr,
.admin-table--stack td{
display: block;
width: 100%;
}
.admin-table--stack thead{
display: none;
}
.admin-table--stack tbody{
display: grid;
gap: 10px;
}
.admin-table--stack tr{
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
padding: var(--space-12);
}
.admin-table--stack td{
padding: 0;
border: 0;
text-align: left !important;
}
.admin-table--stack td + td{
margin-top: var(--space-8);
}
.admin-table--stack td::before{
content: attr(data-th);
display: block;
font-family: var(--font-mono);
font-size: var(--text-12);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted);
}
.admin-table--stack td:empty{
display: none;
}
}

.admin-funnel{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.admin-funnel-row{
display: grid;
grid-template-columns: 1.6rem minmax(6rem, 1fr) minmax(0, 2.2fr) 4rem 3rem;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
list-style: none;
}
.admin-funnel-row::-webkit-details-marker{
display: none;
}
.admin-funnel-row.is-static{
cursor: default;
}
.admin-funnel-details[open] > .admin-funnel-row{
border-color: var(--accent);
background: var(--accent-weak);
}
.admin-funnel-row:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.admin-funnel-nr{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}
.admin-funnel-label{
font-size: var(--text-14);
line-height: 1.2;
}
.admin-funnel-bar{
display: block;
height: 12px;
border-radius: var(--radius-sm);
background: var(--surface-2);
border: 1px solid var(--line);
overflow: hidden;
}
.admin-funnel-bar > span{
display: block;
height: 100%;
background: var(--accent);
}
.admin-funnel-count,
.admin-funnel-conv{
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
text-align: right;
font-size: var(--text-14);
}
.admin-funnel-conv{
color: var(--muted);
font-size: var(--text-13);
}
.admin-funnel-drop{
padding: 2px 10px 6px 2.6rem;
font-size: var(--text-12);
color: var(--muted);
}
.admin-funnel-panel{
margin: var(--space-2) 0 var(--space-4);
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.admin-funnel-panel-head{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
margin-bottom: 6px;
}
.admin-funnel-actors{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-4);
}
.admin-funnel-actors li{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
align-items: baseline;
justify-content: space-between;
padding: var(--space-4) 0;
border-bottom: 1px solid var(--line);
font-size: var(--text-14);
}
.admin-funnel-actors li:last-child{
border-bottom: 0;
}
.admin-funnel-when{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}

.admin-funnel-credits{
margin-left: auto;
font-size: var(--text-12);
font-weight: 700;
color: var(--accent);
white-space: nowrap;
}
@media (max-width: 767.98px){
.admin-funnel-row{
grid-template-columns: 1.5rem 1fr 3.4rem;
row-gap: 6px;
}
.admin-funnel-bar{
grid-column: 1 / -1;
order: 3;
}

.admin-funnel-conv{
grid-column: 1 / -1;
order: 4;
justify-self: start;
padding-left: 10px;
font-size: var(--text-12);
color: var(--muted);
}
.admin-funnel-drop{
padding-left: 10px;
}
}

.admin-billing-list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
}
.admin-billing-item{
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
align-items: baseline;
justify-content: space-between;
padding: 9px 12px;
background: var(--surface);
}
.admin-billing-main{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
align-items: baseline;
min-width: 0;
}
.admin-billing-who{
font-weight: 600;
overflow-wrap: anywhere;
}
.admin-billing-meta{
display: flex;
gap: var(--space-12);
align-items: baseline;
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
white-space: nowrap;
}
.admin-billing-credits{
color: var(--ink);
}

.admin-collapsible > summary{
cursor: pointer;
list-style: none;
padding: var(--space-2) 0;
}
.admin-collapsible > summary::-webkit-details-marker{
display: none;
}
.admin-collapsible > summary::before{
content: "\25B8";
display: inline-block;
margin-right: 6px;
color: var(--muted);
transition: transform var(--dur, 160ms) ease;
}
.admin-collapsible[open] > summary::before{
transform: rotate(90deg);
}

.discount-banner{
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
border: 1px solid var(--accent);
border-radius: var(--radius);
background: var(--accent-weak);
padding: 14px 16px;
}
.discount-banner-text{
color: var(--ink);
max-width: 60ch;
}
.discount-banner-timer{
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
font-family: var(--font-mono);
font-size: var(--text-13);
color: var(--accent-ink);
}
@media (max-width: 575.98px){
.discount-banner-timer{
width: 100%;
}
.discount-banner-timer .btn{
flex: 1 1 auto;
}
}

.auto-followup{
display: grid;
gap: 10px;
}
.auto-followup-status{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
align-items: baseline;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.auto-followup-status.is-gepland{
border-color: var(--warn);
}
.auto-followup-meta{
display: flex;
flex-wrap: wrap;
gap: 18px;
margin: 0;
}
.auto-followup-meta dt{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}
.auto-followup-meta dd{
margin: var(--space-2) 0 0;
font-weight: 600;
}

.admin-only-wide{
display: none;
}
@media (min-width: 992px){
.admin-only-wide{
display: table-cell;
}
}


.admin-kpi.is-alarm{
background: var(--accent-weak);
border: 1px solid var(--danger);
}
.admin-kpi.is-alarm .h4{
color: var(--danger);
}
.admin-kpi.is-nul .h4{
color: var(--warn);
}
.admin-kpi.is-goed .h4{
color: var(--ok);
}

.admin-kpi.is-waarschuwing{
background: var(--warn-weak);
border-color: var(--warn);
}
.admin-kpi.is-waarschuwing .h4{
color: var(--warn);
}

.admin-shell-head{
display: none;
}
@media (min-width: 992px){
.admin-shell-head{
display: flex;
}
}

.admin-cell-clip{
max-width: 24ch;
}
.admin-cell-clip > div{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 992px){
.admin-cell-clip{
max-width: 36ch;
}
}

.footer-legal{
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: var(--space-4);
font-size: var(--text-13);
}

.wizard-drop-klein{ display: none; }
@media (max-width: 767.98px){
.wizard-drop-groot{ display: none; }
.wizard-drop-klein{ display: inline; }
}

.cookie-banner{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1080;
background: var(--surface);
border-top: 1px solid var(--line-strong);
box-shadow: var(--shadow);
padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform .2s ease;
}
.cookie-banner.is-zichtbaar{ transform: translateY(0); }
.cookie-banner-inner{
max-width: 1100px;
margin: 0 auto;
display: grid;
gap: 14px;
}
.cookie-banner-titel{
font-family: var(--font-head);
font-size: var(--text-16);
font-weight: 700;
margin: 0 0 var(--space-4);
color: var(--ink);
}
.cookie-banner-lead{
margin: 0;
font-size: var(--text-14);
line-height: 1.5;
color: var(--muted);
}
.cookie-banner-lead a{ color: var(--accent-ink); }
.cookie-banner-acties{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}

.cookie-btn{
font-family: var(--font-body);
font-size: var(--text-14);
font-weight: 600;
padding: 11px 18px;
min-height: 44px;
border-radius: var(--radius-sm);
cursor: pointer;
border: 1px solid var(--control-border);
background: var(--surface);
color: var(--ink);
}
.cookie-btn:hover{ background: var(--surface-2); }
.cookie-btn:focus-visible{ outline: none; box-shadow: var(--focus); }
.cookie-btn-primair{
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.cookie-btn-primair:hover{ background: var(--accent-strong); border-color: var(--accent-strong); }
.cookie-btn-tekst{
border-color: transparent;
background: transparent;
color: var(--accent-ink);
text-decoration: underline;
}
.cookie-btn-tekst:hover{ background: transparent; color: var(--accent-ink); }
.cookie-modal{
position: fixed;
inset: 0;
z-index: 1090;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity .2s ease;
}
.cookie-modal.is-open{ opacity: 1; }
.cookie-modal-achtergrond{
position: absolute;
inset: 0;
background: rgba(14, 20, 32, .45);
}
.cookie-modal-paneel{
position: relative;
width: 100%;
max-width: 640px;
max-height: 88vh;
display: flex;
flex-direction: column;
background: var(--surface);
border-radius: var(--radius-md) var(--radius-md) 0 0;
border: 1px solid var(--line);
overflow: hidden;
}
.cookie-modal-kop{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
padding: 16px 18px;
border-bottom: 1px solid var(--line);
}
.cookie-modal-titel{
font-family: var(--font-head);
font-size: var(--text-18);
font-weight: 700;
margin: 0;
color: var(--ink);
}
.cookie-sluit{
border: 0;
background: transparent;
font-size: var(--text-24);
line-height: 1;
min-width: 44px;
min-height: 44px;
cursor: pointer;
color: var(--muted);
border-radius: var(--radius-sm);
}
.cookie-sluit:focus-visible{ outline: none; box-shadow: var(--focus); }
.cookie-modal-body{
padding: 16px 18px;
overflow-y: auto;
font-size: var(--text-14);
}
.cookie-modal-body a{ color: var(--accent-ink); }
.cookie-modal-voet{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--surface-2);
}
.cookie-categorie{
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-top: var(--space-12);
}
.cookie-categorie-kop{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.cookie-categorie-naam{
font-weight: 700;
color: var(--ink);
margin-bottom: var(--space-2);
}
.cookie-categorie-uitleg{
font-size: var(--text-14);
line-height: 1.45;
color: var(--muted);
}
.cookie-altijd-aan{
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
padding-top: 3px;
white-space: nowrap;
}

.cookie-schakelaar{
flex: 0 0 auto;
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
cursor: pointer;
}
.cookie-schakelaar input{
position: absolute;
opacity: 0;
width: 44px;
height: 44px;
margin: 0;
cursor: pointer;
}
.cookie-schakelaar-spoor{
width: 44px;
height: 26px;
border-radius: var(--radius-pill);
background: var(--line-strong);
position: relative;
transition: background .15s ease;
}
.cookie-schakelaar-spoor::after{
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--surface);
transition: transform .15s ease;
}
.cookie-schakelaar input:checked + .cookie-schakelaar-spoor{ background: var(--accent); }
.cookie-schakelaar input:checked + .cookie-schakelaar-spoor::after{ transform: translateX(18px); }
.cookie-schakelaar input:focus-visible + .cookie-schakelaar-spoor{ box-shadow: var(--focus); }

.cookie-schakelaar-label{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.cookie-fijndruk{
margin: 14px 0 0;
font-size: var(--text-13);
line-height: 1.45;
color: var(--muted);
}
body.cookie-modal-open{ overflow: hidden; }
@media (min-width: 768px){
.cookie-banner-inner{
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-24);
}
.cookie-banner-acties{ justify-content: flex-end; }
.cookie-modal{ align-items: center; }
.cookie-modal-paneel{ border-radius: var(--radius-md); }
}
@media (prefers-reduced-motion: reduce){
.cookie-banner,
.cookie-modal,
.cookie-schakelaar-spoor,
.cookie-schakelaar-spoor::after{ transition: none; }
}

.footer-link-knop{
border: 0;
background: transparent;
padding: 0;
font: inherit;
cursor: pointer;
text-align: left;
}
.footer-link-knop:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

.inbox-head{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-12);
margin-bottom: 18px;
}
.inbox-head-text{ min-width: 0; flex: 1 1 16rem; }
.inbox-title{
font-family: var(--font-head);
font-size: var(--text-24);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.15;
margin: 0 0 var(--space-4);
color: var(--ink);
}
.inbox-sub{
margin: 0;
font-size: var(--text-14);
line-height: 1.5;
color: var(--ink-soft);
}
.inbox-sub-quiet{ color: var(--muted); }

.inbox-nowrap{ white-space: nowrap; color: var(--accent-ink); }
.inbox-head-action{ margin: 0; flex: 0 0 auto; }
.inbox-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
padding: 0 14px;
border-radius: var(--radius);
border: 1px solid transparent;
font-family: var(--font-body);
font-size: var(--text-14);
font-weight: 700;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.inbox-btn:focus-visible{ outline: none; box-shadow: var(--focus); }

.inbox-btn-primary{
background: var(--accent-strong);
border-color: var(--accent-strong);
color: var(--on-accent);
}
.inbox-btn-primary:hover{
background: var(--accent-strong);
border-color: var(--accent-strong);
color: var(--on-accent);
}
.inbox-btn-quiet{
background: var(--surface);
border-color: var(--control-border);
color: var(--ink);
}
.inbox-btn-quiet:hover{ border-color: var(--accent); color: var(--accent-ink); }
.inbox-filters{
display: flex;
gap: var(--space-4);
padding: var(--space-4);
margin-bottom: var(--space-16);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.inbox-filter{
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 38px;
padding: 0 var(--space-8);
border-radius: var(--radius);
font-size: var(--text-14);
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.inbox-filter:hover{ color: var(--ink); }
.inbox-filter.is-active{
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
.inbox-filter:focus-visible{ outline: none; box-shadow: var(--focus); }
.inbox-filter-count{
font-family: var(--font-mono);
font-size: var(--text-12);
font-variant-numeric: tabular-nums;
color: var(--muted);
}
.inbox-filter.is-active .inbox-filter-count{ color: var(--accent-ink); }
.inbox-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.inbox-item{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-8) var(--space-16);
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}

.inbox-item.is-open{ border-left: 3px solid var(--accent); padding-left: 14px; }
.inbox-item.is-open .inbox-name{ font-weight: 800; }
.inbox-item-main{ min-width: 0; }
.inbox-item-who{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-4) var(--space-8);
margin-bottom: var(--space-2);
}
.inbox-name{ font-weight: 700; color: var(--ink); }
.inbox-company{ font-size: var(--text-13); color: var(--ink-soft); }
.inbox-email{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
overflow-wrap: anywhere;
}

.inbox-ask{
margin: 0 0 var(--space-2);
font-size: var(--text-16);
line-height: 1.35;
color: var(--ink);
text-wrap: pretty;
}
.inbox-ask-quiet{ font-size: var(--text-14); color: var(--ink-soft); }
.inbox-snippet{
margin: 0;
font-size: var(--text-13);
line-height: 1.45;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.inbox-meta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: var(--space-8);
}
.inbox-time{
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}
.inbox-tag{
display: inline-flex;
align-items: center;
padding: 2px 7px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: var(--text-12);
font-weight: 600;
letter-spacing: .02em;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
}
.inbox-tag-open{
border-color: rgba(232, 89, 12, .35);
background: var(--accent-weak);
color: var(--accent-ink);
}
.inbox-tag-link:hover{ border-color: var(--accent); color: var(--accent-ink); }
.inbox-actions{
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-8);
}
.inbox-actions-rest{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: var(--space-4) var(--space-12);
}
.inbox-actions-rest form{ margin: 0; }
.inbox-link{
border: 0;
background: transparent;
padding: var(--space-4) 0;
font: inherit;
font-size: var(--text-13);
color: var(--muted);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.inbox-link:hover{ color: var(--accent-ink); text-decoration: underline; }
.inbox-link:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

.inbox-link-done{ color: var(--ok); }
.inbox-body{ grid-column: 1 / -1; }
.inbox-body-meta{ margin: 0 0 6px; font-size: var(--text-13); color: var(--muted); }
.inbox-body-text{
padding: var(--space-12);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: var(--text-14);
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.inbox-empty{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--space-40) var(--space-20);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
color: var(--ok);
}
.inbox-empty-title{
margin: var(--space-4) 0 0;
font-family: var(--font-head);
font-size: var(--text-18);
font-weight: 700;
color: var(--ink);
}
.inbox-empty-text{ margin: 0; font-size: var(--text-14); color: var(--muted); }
.inbox-empty .inbox-btn{ margin-top: var(--space-12); }
.inbox-automated{ margin-top: var(--space-20); }
.inbox-automated > summary{
cursor: pointer;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-2);
font-size: var(--text-13);
font-weight: 600;
color: var(--ink-soft);
}
.inbox-automated > summary:focus-visible{ outline: none; box-shadow: var(--focus); }
.inbox-automated[open] > summary{ margin-bottom: var(--space-8); }
.inbox-automated > summary .inbox-sub-quiet{
display: block;
margin-top: var(--space-2);
font-weight: 400;
}
.inbox-list-quiet .inbox-item{ background: var(--surface-2); }
@media (max-width: 599.98px){
.inbox-head{ gap: 14px; }
.inbox-head-action{ width: 100%; }
.inbox-head-action .inbox-btn{ width: 100%; }
.inbox-title{ font-size: var(--text-24); }
.inbox-item{
grid-template-columns: minmax(0, 1fr);
padding: 14px;
}

.inbox-actions{
grid-column: 1;
grid-row: auto;
align-items: stretch;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.inbox-actions .inbox-btn{ width: 100%; }
.inbox-actions-rest{ justify-content: space-between; gap: var(--space-8); }
.inbox-link{ padding: var(--space-8) 0; }
}

.page-hero-title{
font-family: var(--font-head);

font-size: clamp(var(--text-24), 5vw, var(--text-48));
line-height: var(--leading-tight);
letter-spacing: -.045em;
font-weight: 800;
margin: 0 0 var(--space-16);
overflow-wrap: break-word;
hyphens: auto;
}
.page-hero-lead{
max-width: 54ch;
font-size: var(--text-18);
line-height: var(--leading-normal);
color: var(--ink-soft);
margin: 0 0 var(--space-16);
}

.legal-body{
max-width: 62ch;
}

.page-hero .note-strip{
max-width: 62ch;
}
.legal-body h2{
font-size: var(--text-20);
line-height: var(--leading-snug);
margin: var(--space-40) 0 var(--space-12);
}
.legal-body h2:first-of-type{ margin-top: 0; }
.legal-body h3{
font-size: var(--text-16);
margin: var(--space-24) 0 var(--space-8);
}
.legal-body p,
.legal-body li{
color: var(--ink-soft);
line-height: var(--leading-normal);
}

.legal-toc{
margin: 0 0 var(--space-40);
padding: var(--space-20) var(--space-24);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.legal-toc .eyebrow{ margin-bottom: var(--space-12); }
.legal-toc ul{
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: var(--space-32);
}
.legal-toc li{ break-inside: avoid; margin-bottom: var(--space-4); }
.legal-toc a{
color: var(--ink-soft);
font-size: var(--text-14);
text-decoration: none;
}
.legal-toc a:hover{ color: var(--accent-ink); text-decoration: underline; }
.legal-note{
margin: var(--space-40) 0 0;
padding-top: var(--space-24);
border-top: 1px solid var(--line);
font-size: var(--text-14);
color: var(--muted);
}
@media (max-width: 575.98px){
.legal-toc ul{ columns: 1; }
}

.label-mono{
font-family: var(--font-mono);
font-size: var(--text-12);
font-weight: 400;
line-height: var(--leading-snug);
color: var(--muted);
}

.label-mono.label-on-accent{
color: var(--on-accent);
}

.tox .tox-tbtn__select-label,
.tox .tox-tbtn,
.tox .tox-tbtn svg{
color: var(--ink-soft);
fill: currentColor;
}
.tox .tox-toolbar__group{
border-color: var(--line);
}

.badge.text-break{
white-space: normal;
word-break: break-word;
}

.cockpit-kop{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-12) var(--space-24);
margin-bottom: var(--space-24);
}

.periode-kiezer{
display: inline-flex;
border: 1px solid var(--control-border);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.periode-optie{
padding: var(--space-8) var(--space-16);
font-family: var(--font-mono);
font-size: var(--text-13);
color: var(--ink-soft);
text-decoration: none;
border-left: 1px solid var(--line);
white-space: nowrap;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.periode-optie:first-child{ border-left: 0; }
.periode-optie:hover{ background: var(--surface-2); color: var(--ink); }
.periode-optie:focus-visible{ outline: 0; box-shadow: var(--focus); position: relative; z-index: 1; }
.periode-optie.is-actief{
background: var(--accent-weak);
color: var(--accent-ink);
font-weight: 500;
}
.cockpit-cijfers{
display: grid;
gap: var(--space-16);
grid-template-columns: minmax(0, 1fr);
margin-bottom: var(--space-16);
}
@media (min-width: 720px){
.cockpit-cijfers{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cockpit-cijfer{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-20) var(--space-24);
}
.cockpit-cijfer-waarde{
font-family: var(--font-head);
font-size: var(--text-38);
line-height: var(--leading-tight);
letter-spacing: -.04em;
font-weight: 800;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.cockpit-cijfer .label-mono{ margin-top: var(--space-2); }

.cockpit-delta{
display: inline-flex;
align-items: baseline;
gap: var(--space-8);
margin-top: var(--space-8);
font-size: var(--text-13);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.cockpit-delta.is-op{ color: var(--ok-ink); }
.cockpit-delta.is-neer{ color: var(--danger-ink); }
.cockpit-delta.is-nieuw{ color: var(--accent-ink); }
.cockpit-delta.is-gelijk{ color: var(--muted); }
.cockpit-delta-basis{
font-weight: 400;
font-size: var(--text-12);
color: var(--muted);
}
.cockpit-vandaag{
margin: 0 0 var(--space-32);
padding: var(--space-12) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
font-size: var(--text-14);
color: var(--ink-soft);
line-height: var(--leading-snug);
}
.cockpit-vandaag .label-mono{ margin-right: var(--space-8); }
.cockpit-vandaag strong{ color: var(--ink); font-variant-numeric: tabular-nums; }
.cockpit-week{ color: var(--muted); font-size: var(--text-12); font-family: var(--font-mono); }
.cockpit-scheiding{ color: var(--line-strong); margin: 0 var(--space-8); }
.cockpit-sectie{ margin-bottom: var(--space-32); }
.cockpit-sectie-kop{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-8) var(--space-16);
margin-bottom: var(--space-12);
}
.cockpit-sectie-titel{
font-size: var(--text-20);
line-height: var(--leading-snug);
font-weight: 700;
letter-spacing: -.03em;
margin: 0;
}
.cockpit-sectie-voet{
margin: var(--space-12) 0 0;
font-size: var(--text-14);
}
.cockpit-saldo-laag{ color: var(--warn-ink); font-weight: 700; }
.cockpit-status{
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
margin: 0;
}

.status{
display: inline-flex;
align-items: center;
gap: var(--space-8);
padding: var(--space-4) var(--space-12);
border-radius: var(--radius-pill);
font-size: var(--text-12);
line-height: var(--leading-snug);
font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
.status::before{
content: "";
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: currentColor;
flex-shrink: 0;
}
.status-ok{ background: var(--ok-weak); color: var(--ok-ink); border-color: var(--ok); }
.status-warn{ background: var(--warn-weak); color: var(--warn-ink); border-color: var(--warn); }
.status-danger{ background: var(--danger-weak); color: var(--danger-ink); border-color: var(--danger); }
.status-neutral{ background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); }

@media (max-width: 991.98px){
.accounts-table tbody tr{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-12);
align-items: start;
}
.accounts-table td{
margin-top: 0 !important;
}

.accounts-table td:first-child,
.accounts-table td.cell-actions{
grid-column: 1 / -1;
}
.accounts-table td:first-child{
font-weight: 700;
overflow-wrap: anywhere;
}
.accounts-table td.cell-actions{
width: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
.accounts-table td.cell-actions::before{
display: none;
}
}


.btw-kwartalen{
display: flex;
gap: var(--space-4);
margin: 0 0 var(--space-32);
border-bottom: 1px solid var(--line-strong);
overflow-x: auto;
}
.btw-kwartaal{
display: block;
flex-shrink: 0;
padding: var(--space-8) var(--space-20) var(--space-12);
margin-bottom: -1px;
border-bottom: 3px solid transparent;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
.btw-kwartaal:hover{ color: var(--ink); background: var(--surface-2); }
.btw-kwartaal:focus-visible{ outline: 0; box-shadow: var(--focus); }
.btw-kwartaal-naam{ display: block; font-size: var(--text-16); font-weight: 700; color: var(--ink-soft); }
.btw-kwartaal-stand{ display: block; margin-top: var(--space-2); font-size: var(--text-13); }
.btw-kwartaal.is-open .btw-kwartaal-stand{ color: var(--warn-ink); font-weight: 600; }
.btw-kwartaal.is-actief{ border-bottom-color: var(--accent); }
.btw-kwartaal.is-actief .btw-kwartaal-naam{ color: var(--ink); }

.btw-samenvatting{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-16) var(--space-40);
margin-bottom: var(--space-48);
}
.btw-saldo-label{ display: block; font-size: var(--text-14); color: var(--muted); }
.btw-saldo{
display: block;
font-family: var(--font-head);
font-size: var(--text-38);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.btw-saldo-toelichting{ color: var(--ink-soft); }
.btw-saldo-toelichting p{ margin: 0; }
.btw-saldo-toelichting .is-dringend{ color: var(--danger-ink); }
.btw-aandacht{
display: inline-block;
padding: var(--space-8) var(--space-16);
border: 1px solid var(--warn);
border-radius: var(--radius);
background: var(--warn-weak);
color: var(--warn-ink);
font-weight: 600;
text-decoration: none;
}
.btw-aandacht.is-blokkerend{ border-color: var(--danger); background: var(--danger-weak); color: var(--danger-ink); }
a.btw-aandacht:hover{ color: var(--warn-ink); text-decoration: underline; }
a.btw-aandacht.is-blokkerend:hover{ color: var(--danger-ink); }
a.btw-aandacht:focus-visible{ outline: 0; box-shadow: var(--focus); }
.btw-verschil{ display: block; max-width: 760px; margin-top: var(--space-16); font-weight: 400; }

.btw-stap{ margin-bottom: var(--space-48); }
.btw-stap-kop{ display: flex; align-items: baseline; gap: var(--space-12); margin-bottom: var(--space-8); }
.btw-stap-nummer{
width: var(--space-20);
flex-shrink: 0;
font-family: var(--font-mono);
font-size: var(--text-18);
color: var(--muted);
}
.btw-stap-titel{ margin: 0; font-size: var(--text-20); font-weight: 700; line-height: var(--leading-snug); }
.btw-stap > :not(.btw-stap-kop){ margin-left: var(--space-32); }
.btw-stap-los > :not(.btw-stap-kop){ margin-left: 0; }
.btw-stap-uitleg{ margin-top: 0; margin-bottom: var(--space-16); max-width: 760px; color: var(--ink-soft); }

.btw-paneel{
max-width: 760px;
padding: var(--space-4) var(--space-16) var(--space-8);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.btw-rubrieken{ width: 100%; border-collapse: collapse; }
.btw-rubrieken th,
.btw-rubrieken td{ padding: var(--space-8); vertical-align: baseline; }
.btw-rubrieken thead th{
font-size: var(--text-13);
font-weight: 600;
color: var(--muted);
text-align: left;
border-bottom: 1px solid var(--line-strong);
}
.btw-rubrieken .num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.btw-rubrieken tr.btw-groep th{
padding-top: var(--space-16);
font-size: var(--text-14);
font-weight: 600;
color: var(--muted);
text-align: left;
}
.btw-rubrieken tbody td{ border-bottom: 1px solid var(--line); color: var(--ink); }
.btw-rubrieken td.btw-rubriek{ padding-left: var(--space-24); }
.btw-rubrieken tr.is-controle td{ color: var(--muted); }
.btw-rubrieken tr.is-totaal td{ font-weight: 700; color: var(--ink); border-bottom: 0; }

.btw-rubriek-regel{ display: flex; align-items: baseline; }
.btw-code{
display: inline-block;
flex-shrink: 0;
min-width: var(--space-32);
font-family: var(--font-mono);
font-size: var(--text-14);
color: var(--muted);
}
.btw-nul{ max-width: 760px; margin: var(--space-12) 0 0; font-size: var(--text-14); color: var(--muted); }

.btw-bedrag{
position: relative;
padding: 0;
border: 0;
border-bottom: 1px dashed var(--line-strong);
background: none;
font: inherit;
font-variant-numeric: tabular-nums;
color: inherit;
cursor: copy;
}
.btw-bedrag:hover{ color: var(--accent-ink); border-bottom-color: currentColor; }
.btw-bedrag:focus-visible{ outline: 0; box-shadow: var(--focus); border-radius: var(--radius-sm); }

.btw-bedrag.is-gemeld{ color: var(--ok-ink); border-bottom-color: currentColor; }
.btw-bedrag.is-gemeld::after{
content: attr(data-copy-status);
position: absolute;
right: 0;
bottom: calc(100% + var(--space-4));
padding: var(--space-2) var(--space-8);
border-radius: var(--radius-sm);
background: var(--ink);
color: var(--surface);
font-size: var(--text-12);
font-weight: 600;
line-height: var(--leading-snug);
white-space: nowrap;
pointer-events: none;
}
.btw-icp{ max-width: 760px; margin-top: var(--space-24); }

.btw-meldingen{ max-width: 760px; margin: 0; padding: 0; list-style: none; }
.btw-meldingen li{ padding: var(--space-8) 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.btw-meldingen li:last-child{ border-bottom: 0; }
.btw-melding-soort{ display: block; font-size: var(--text-13); font-weight: 700; color: var(--danger-ink); }

.btw-meer{ margin-top: var(--space-12); }
.btw-meer > summary{
display: inline-flex;
align-items: center;
gap: var(--space-8);
list-style: none;
cursor: pointer;
font-size: var(--text-14);
font-weight: 600;
color: var(--accent-ink);
}
.btw-meer > summary::-webkit-details-marker{ display: none; }

.btw-meer > summary::before{
content: "";
width: 6px;
height: 6px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(-45deg);
transition: transform var(--dur) var(--ease);
}
.btw-meer[open] > summary::before{ transform: rotate(45deg); }
.btw-meer > summary:focus-visible{ outline: 0; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.btw-toevoegen{ margin-top: var(--space-16); }
.btw-actie{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12); }

.btw-onderbouwing{ margin-top: var(--space-56); }
.btw-onderbouwing-titel{ margin: 0 0 var(--space-12); font-size: var(--text-20); font-weight: 700; }
.btw-blok{ border-top: 1px solid var(--line-strong); }
.btw-blok:last-child{ border-bottom: 1px solid var(--line-strong); }
.btw-blok > summary{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-4) var(--space-16);
padding: var(--space-16) 0;
list-style: none;
cursor: pointer;
}
.btw-blok > summary::-webkit-details-marker{ display: none; }
.btw-blok > summary::before{
content: "";
width: 7px;
height: 7px;
margin-right: var(--space-4);
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(-45deg);
align-self: center;
transition: transform var(--dur) var(--ease);
}
.btw-blok[open] > summary::before{ transform: rotate(45deg); }
.btw-blok > summary:focus-visible{ outline: 0; box-shadow: var(--focus); }
.btw-blok-titel{ font-size: var(--text-18); font-weight: 700; color: var(--ink); }
.btw-blok-samenvatting{ font-size: var(--text-14); color: var(--muted); font-variant-numeric: tabular-nums; }
.btw-blok-inhoud{ padding: 0 0 var(--space-24) var(--space-24); }
@media (prefers-reduced-motion: reduce){
.btw-blok > summary::before,
.btw-meer > summary::before{ transition: none; }
}

.btw-rij-actie{ font-size: var(--text-14); white-space: nowrap; }
.btw-inline-knop{ padding: 0; vertical-align: baseline; font-size: inherit; }
.btw-ontbreekt{ color: var(--warn-ink); }
.btw-regels td[data-th="Factuur"],
.btw-regels td[data-th="Datum"]{ white-space: nowrap; }
.btw-regels .btw-klant{ overflow-wrap: anywhere; }

.doelgroep-blok{ margin-bottom: var(--space-40); }
.doelgroep-blok-titel{
display: flex;
align-items: baseline;
gap: var(--space-8);
margin-bottom: var(--space-8);
font-size: var(--text-18);
font-weight: 700;
}
.doelgroep-blok-aantal{ font-family: var(--font-mono); font-size: var(--text-13); font-weight: 500; color: var(--muted); }
.doelgroep-filters{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12); margin-bottom: var(--space-16); }
.doelgroep-filter-check{ margin-bottom: var(--space-8); }
.doelgroep-select{ min-width: 9rem; }
.doelgroep-tekst{ min-width: 12rem; max-width: 32ch; }
.doelgroep-zelf{ font-size: var(--text-13); color: var(--ink-soft); }
.doelgroep-notitie{ width: 100%; font-size: var(--text-13); }
.doelgroep-opslaan{ margin-top: var(--space-8); }

.doelgroep-klant{ min-width: 10rem; }
.doelgroep-mail{ overflow-wrap: break-word; }
.doelgroep-activiteit{ white-space: nowrap; }
.doelgroep-acties{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.doelgroep-inline-knop{ padding: 0; vertical-align: baseline; font-size: var(--text-13); }

.btw-legenda{ font-size: var(--text-16); }
@media (max-width: 991.98px){
.btw-stap > :not(.btw-stap-kop){ margin-left: 0; }
.btw-saldo{ font-size: var(--text-30); }
.btw-paneel{ padding-left: var(--space-8); padding-right: var(--space-8); }
.btw-rubrieken td.btw-rubriek{ padding-left: var(--space-12); }
.btw-blok-inhoud{ padding-left: 0; }

.btw-regels.admin-table--stack tbody tr{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-12);
align-items: start;
}
.btw-regels.admin-table--stack td{ margin-top: 0 !important; }
.btw-regels.admin-table--stack td:first-child,
.btw-regels.admin-table--stack td[data-th="Klant"],
.btw-regels.admin-table--stack td[data-th="Leverancier"],
.btw-regels.admin-table--stack td[data-th="Toelichting"],
.btw-regels.admin-table--stack td.cell-actions{
grid-column: 1 / -1;
width: auto;
}
.btw-regels.admin-table--stack td.cell-actions::before{ display: none; }
.btw-regels td[data-th="Factuur"]{ white-space: normal; }
}

.cockpit-grafiek{
margin: 0 0 var(--space-16);
padding: var(--space-16) var(--space-16) var(--space-12);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.cockpit-grafiek-vlak{
min-height: 220px;
}
.cockpit-grafiek-voet{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8) var(--space-20);
margin-top: var(--space-8);
padding-top: var(--space-12);
border-top: 1px solid var(--line);
font-size: var(--text-13);
color: var(--ink-soft);
}

.cockpit-legenda-vlak,
.cockpit-legenda-lijn{
display: inline-block;
vertical-align: middle;
margin-right: var(--space-8);
}
.cockpit-legenda-vlak{ width: 10px; height: 10px; border-radius: 2px; }
.cockpit-legenda-lijn{ width: 14px; height: 2px; border-radius: 2px; }
.cockpit-grafiek-periode{
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--text-12);
color: var(--muted);
}

.cockpit-spark{
display: block;
height: 34px;
margin: var(--space-8) 0 var(--space-4);
}

.account-bar{
display: block;
height: 6px;
border-radius: var(--radius-pill);
background: var(--surface-2);
margin-bottom: var(--space-4);
overflow: hidden;
}
.account-bar-vul{
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: var(--accent);
}
.account-spark-cel{ width: 150px; }
.account-spark{
display: block;
width: 100%;
height: 28px;
}
@media (max-width: 991.98px){

.accounts-table td.account-spark-cel{
grid-column: 1 / -1;
width: auto;
}
.account-spark{ height: 34px; }
}

.cockpit-legenda-loopt{
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: var(--space-8);
background: var(--accent-weak);
border: 1px solid var(--accent);
}