/* Ecommy-huisstijl voor Ecommy Flows. Gegenereerd door make_theme.py uit de site-tokens (rebrand-sage). */
@font-face{font-family:'General Sans';src:url(/ecommy-fonts/GeneralSans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/ecommy-fonts/GeneralSans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/ecommy-fonts/GeneralSans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/ecommy-fonts/GeneralSans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/ecommy-fonts/IBMPlexMono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/ecommy-fonts/IBMPlexMono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/ecommy-fonts/IBMPlexMono-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root,:host{
  --font-sans:'General Sans',ui-sans-serif,system-ui,sans-serif !important;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace !important;
  --font-sentient:'General Sans',ui-sans-serif,system-ui,sans-serif !important;
  --default-font-family:'General Sans',ui-sans-serif,system-ui,sans-serif !important;
}
html,body{font-family:'General Sans',ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;-webkit-font-smoothing:antialiased}
:root{
  --background:#fbfbf7;--foreground:#1b201d;--card:#ffffff;--card-foreground:#1b201d;
  --popover:#ffffff;--popover-foreground:#1b201d;--muted:#f1f3ee;--muted-foreground:#56645c;
  --accent:#e8efe9;--accent-foreground:#1b201d;--secondary:#1b201d;--secondary-foreground:#ffffff;
  --border:#dde3db;--input:#dde3db;--ring:#1f4d3a;
  --primary:155 43% 21% !important;--primary-foreground:0 0% 100% !important;
  --primary-100:131 16% 86% !important;--primary-300:157 45% 16% !important;
  --destructive:5 62% 43%;
  --sidebar-background:#f4f5ef;--sidebar-foreground:#1b201d;--sidebar-primary:155 43% 21%;
  --sidebar-primary-foreground:#ffffff;--sidebar-accent:#e8efe9;--sidebar-accent-foreground:#1b201d;
  --sidebar-border:#dde3db;--sidebar-ring:#1f4d3a;
  --builder-background:#f4f5ef;--builder-background-pattern:#b9cbbd;
  --radius:.45rem;
}
.dark{
  --background:#0a0a0a;--foreground:#f5f5f5;--card:#121212;--card-foreground:#f5f5f5;
  --popover:#121212;--popover-foreground:#f5f5f5;--muted:#1a1a1a;--muted-foreground:#a0a0a0;
  --accent:#1d201d;--accent-foreground:#f5f5f5;--secondary:#1d201d;--secondary-foreground:#e4e6e4;
  --border:#2a2a2a;--input:#2a2a2a;--ring:#7c9082;
  --primary:138 8% 53% !important;--primary-foreground:0 0% 4% !important;
  --primary-100:137 11% 24% !important;--primary-300:143 18% 83% !important;
  --destructive:6 65% 66%;
  --sidebar-background:#121212;--sidebar-foreground:#f5f5f5;--sidebar-primary:138 8% 53%;
  --sidebar-primary-foreground:#0a0a0a;--sidebar-accent:#1d201d;--sidebar-accent-foreground:#f5f5f5;
  --sidebar-border:#2a2a2a;--sidebar-ring:#7c9082;
  --builder-background:#0a0a0a;--builder-background-pattern:#36443a;
  --radius:.45rem;
}

/* Geen AI-look: koppen iets strakker, zoals op de site */
h1,h2,h3{letter-spacing:-0.01em}
/* Tekst die expliciet Inter kiest, volgt ook de merkfont */
[style*="Inter"]{font-family:'General Sans',ui-sans-serif,system-ui,sans-serif !important}
/* Logo wisselt mee met licht/donker */
html.dark img[src="/ecommy-flows.svg"]{content:url(/ecommy-flows-dark.svg)}
html.dark img[src="/ecommy-icon.svg"]{content:url(/ecommy-icon-dark.svg)}

:root{--eca-deep:#163a2c;--eca-deep-card:#1e4a38;--eca-deep-border:#2c5b46;--eca-deep-fg:#f2efe6;--eca-deep-muted:#cbdbd1;--eca-pos:#86cfa6;--eca-dot:#d7e2d9;--eca-glow:#e3ece5}
.dark{--eca-deep:#1a2e24;--eca-deep-card:#22382d;--eca-deep-border:#2f4a3b;--eca-dot:#1d201d;--eca-glow:#17221a}
.eca-root{background:var(--background)}
.eca-bg{position:absolute;inset:0;display:flex;pointer-events:none;user-select:none}
.eca-panel{display:none}
.eca-field{flex:1;background-color:var(--background);
  background-image:radial-gradient(ellipse 60% 50% at 50% 50%,var(--eca-glow),transparent 70%),radial-gradient(circle at 1px 1px,var(--eca-dot) 1px,transparent 0);
  background-size:100% 100%,22px 22px}
.eca-scrim{display:none}
.eca-stage>section{border:1px solid var(--border)!important;border-radius:14px!important;background:var(--card)!important;
  box-shadow:0 2px 4px rgb(22 30 26/.05),0 18px 48px rgb(22 30 26/.10)!important}
.dark .eca-stage>section{box-shadow:0 2px 4px rgb(0 0 0/.3),0 18px 48px rgb(0 0 0/.5)!important}
.eca-stage h1,.eca-stage h2{font-weight:600;letter-spacing:-0.015em}
.eca-stage button[type=submit]{height:42px;font-weight:500;border-radius:.45rem}
.eca-stage input{height:42px;background:var(--card)}
.eca-stage input:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgb(31 77 58/.15)}
@media (min-width:1024px){
  .eca-panel{display:flex;flex-direction:column;justify-content:space-between;width:44%;max-width:640px;min-width:460px;
    padding:44px 56px;background-color:var(--eca-deep);color:var(--eca-deep-fg);position:relative;overflow:hidden;
    background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255/.06) 1px,transparent 0),radial-gradient(ellipse 80% 55% at 85% 105%,rgb(134 207 166/.16),transparent 70%);
    background-size:22px 22px,100% 100%}
  .eca-stage{left:clamp(460px,44%,640px)!important}
}
@media (min-width:1024px){.eca-stage>section :has(>img[src*="ecommy"]){display:none}.eca-stage>section img[src*="ecommy"]{display:none}.eca-stage>section{max-width:420px!important}}
.eca-stage>section>div>div>div>div{padding-left:36px;padding-right:36px}
.eca-logo{height:22px;width:auto;align-self:flex-start;content:url(/ecommy-flows-dark.svg)!important}
.eca-copy{max-width:440px}
.eca-eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--eca-deep-muted);margin:0 0 18px}
.eca-title{font-size:44px;line-height:1.05;font-weight:600;letter-spacing:-0.025em;margin:0 0 18px;color:var(--eca-deep-fg)}
.eca-lead{font-size:16px;line-height:1.6;color:var(--eca-deep-muted);margin:0 0 36px;max-width:400px}
.eca-flow{display:flex;align-items:center;gap:0}
.eca-node{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--eca-deep-border);background:var(--eca-deep-card);
  border-radius:.45rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--eca-deep-fg);white-space:nowrap}
.eca-node i{width:6px;height:6px;border-radius:99px;background:var(--eca-deep-muted);display:block}
.eca-node-mid{border-color:var(--eca-pos)}
.eca-node-mid i{background:var(--eca-pos);box-shadow:0 0 0 3px rgb(134 207 166/.2)}
.eca-line{flex:1;min-width:18px;max-width:48px;height:1px;background-image:linear-gradient(90deg,var(--eca-deep-border) 50%,transparent 50%);background-size:6px 1px}
.eca-foot{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--eca-deep-muted);opacity:.7;margin:0}

.eca-copy,.eca-foot{display:none!important}
@media (min-width:1024px){.eca-panel{justify-content:center;align-items:center}}
.eca-logo{height:40px!important;align-self:center!important}