@font-face{font-family:Geist;src:url('/assets/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--text-secondary:#606a78;--ink-strong:#20242b;--line-soft:#e1e5eb;--canvas:#fff;--font-geist-sans:Geist;--font-site-sans:Geist;--surface:#fff;--lime:#eef3ff;--primary:#315cf5;--primary-hover:#2149d3;--success:#286348;--text-muted:#606a78;--surface-subtle:#f5f7fa;--line-strong:#cbd2dd;--muted:#606a78;--muted-strong:#606a78;--sidebar:#f5f7fa;--surface-inset:#eef3ff;--row-delay:0ms;--story-duration:2200ms}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input{font:inherit}button{cursor:pointer}svg{flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.public-site main{display:block}a{color:inherit}p{max-width:70ch}
.public-site { --site-muted: var(--text-secondary); --site-olive: var(--ink-strong); --site-line: var(--line-soft); background: var(--canvas); color: var(--ink-strong); font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 15px; line-height: 1.6; }
.public-site ::selection { background: var(--lime); color: var(--ink-strong); }
.public-site a { color: inherit; text-underline-offset: 4px; }
.public-site :focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 5px; }
.site-width { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-skip { position: fixed; top: 12px; left: 20px; z-index: 50; background: var(--surface); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-skip:focus { width: auto; height: auto; clip-path: none; padding: 10px 18px; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 24px; border-bottom: 1px solid var(--site-line); }
.site-brand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-site-sans), Arial, sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -.03em; text-decoration: none; }
.site-brand .afgepunt-mark { flex-shrink: 0; object-fit: contain; }
.site-header nav { display: flex; gap: 28px; align-items: center; font-size: 13px; font-weight: 550; }
.site-header nav > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.site-header nav > a:not(.site-button):hover { text-decoration: underline; }
.site-header nav > a[aria-current="page"] { color: var(--ink-strong); text-decoration: underline; font-weight: 650; }
.site-header .site-start { flex-shrink: 0; }
.site-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 22px; border-radius: 6px; background: var(--primary); color: var(--surface) !important; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease-out; }
.site-button:hover { background: var(--primary-hover); }
.site-button.compact { min-height: 44px; padding: 8px 15px; }
.site-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.site-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: underline; }
.site-hero { padding-top: 54px; padding-bottom: 52px; }
.hero-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 42px; align-items: end; margin-bottom: 48px; }
.hero-heading h1 { font-family: var(--font-geist-sans), Arial, sans-serif; font-size: clamp(48px, 5.5vw, 76px); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.hero-heading h1 > span { color: var(--primary); }
.hero-intro > p:first-child { font-size: 17px; line-height: 1.55; margin-bottom: 24px; color: var(--site-muted); }
.hero-intro .hero-note { font-size: 12px; color: var(--site-muted); margin: 14px 0 0; }
.landing-site .site-hero { padding-top: 68px; padding-bottom: 48px; }
.landing-site .hero-heading { display: block; max-width: 800px; margin: 0 auto 46px; text-align: center; }
.landing-site .hero-heading h1 { font-size: clamp(42px, 4.4vw, 64px); line-height: 1.08; margin: 0 0 22px; }
.landing-site .hero-intro > p:first-child { margin: 0 auto 26px; max-width: 58ch; font-size: 17px; line-height: 1.65; }
.landing-site .site-hero .site-actions { justify-content: center; }
.landing-site .example-toolbar { background: var(--surface-inset); }
.landing-site .example-bottom { background: var(--surface); }
.payment-example { overflow: hidden; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: 12px; }
.example-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 24px; }
.example-toolbar strong { font-size: 14px; }
.example-toolbar span { color: var(--site-muted); font-size: 11px; }
.payment-example table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.payment-example th { color: var(--site-muted); text-align: left; font-size: 11px; font-weight: 500; padding: 9px 24px; border-block: 1px solid #e5eae7; }
.payment-example td { padding: 15px 24px; border-bottom: 1px solid #edf0ee; }
.payment-example td:first-child { width: 33%; }
.payment-example td strong { font-weight: 550; }
.payment-example th:nth-child(3), .payment-example .example-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.example-amount small { color: var(--site-muted); font-size: 11px; }
.payment-example td:last-child { text-align: right; white-space: nowrap; }
.payment-example td button, .payment-example td > a { display: inline-flex; align-items: center; gap: 12px; border: 0; padding: 5px 0; background: transparent; font: inherit; font-size: 12px; color: var(--success); text-decoration: none; cursor: pointer; }
.payment-example td button:hover, .payment-example td > a:hover { text-decoration: underline; }
.payment-example td > a { color: #77531a; }
.example-selected td { background: #f4f7ff; }
.example-proof { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 20px; background: var(--lime); font-size: 12px; }
.example-proof > div { display: grid; gap: 3px; }
.example-proof span { color: var(--site-muted); }
.example-proof > a { white-space: nowrap; font-weight: 600; }
.example-bottom { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 18px; font-size: 11px; color: var(--site-muted); }
.example-bottom a { color: var(--primary); font-weight: 600; }
.example-mobile-date { display: none; }
.example-steps { display: flex; gap: 24px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--site-line); }
.example-steps button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 15px 0; color: var(--site-muted); font: inherit; font-size: 13px; cursor: pointer; }
.example-steps button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.example-invoice { display: grid; grid-template-columns: 1fr 260px; gap: 32px; padding: 36px 24px; min-height: 280px; background: var(--surface); }
.example-invoice strong { display: block; font-size: 20px; margin-bottom: 8px; }
.example-invoice span, .example-invoice p { font-size: 13px; color: var(--site-muted); }
.example-invoice a { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--primary); }
.example-invoice dl { margin: 0; font-size: 13px; }
.example-invoice dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--site-line); }
.example-invoice dd { margin: 0; font-variant-numeric: tabular-nums; }
.example-invoice dl > div:last-child { font-weight: 600; }
.example-entry { min-height: 280px; background: var(--surface); }
.example-entry th:not(:first-child), .example-entry td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.example-entry p { padding: 18px 24px; margin: 0; font-size: 12px; color: var(--site-muted); }
.example-entry .example-account-note { padding-top: 0; font-size: 11px; }
.example-account { display: flex; align-items: baseline; gap: 12px; }
.example-account-code { flex: 0 0 56px; font-variant-numeric: tabular-nums; font-weight: 600; }
.example-coding { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 0; padding: 18px 24px; background: #f8faff; font-size: 12px; }
.example-coding > div { flex: 1 1 140px; min-width: 0; }
.example-coding dt { color: var(--site-muted); font-size: 11px; }
.example-coding dd { margin: 4px 0 0; font-weight: 600; }
.example-vat { min-height: 280px; background: var(--surface); }
.example-vat-period { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 20px 24px; font-size: 13px; }
.example-vat-period span { color: var(--site-muted); font-size: 12px; }
.example-vat th:last-child, .example-vat td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.example-vat td:first-child { width: auto; }
.example-vat td small { display: block; color: var(--site-muted); font-size: 11px; margin-top: 3px; }
.example-vat p { margin: 0; padding: 18px 24px 0; font-size: 13px; }
.example-vat .example-vat-scope { padding-block: 10px 22px; color: var(--site-muted); font-size: 12px; }
.site-how { display: grid; grid-template-columns: 1fr 1.3fr; gap: 84px; padding-block: 70px 96px; }
.public-site h2 { font-family: var(--font-geist-sans), Arial, sans-serif; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.site-connections { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 28px; padding-block: 28px; border-block: 1px solid var(--site-line); }
.site-connections > p { color: var(--site-muted); font-size: 13px; max-width: 20ch; margin: 0; }
.site-connection-brands { display: flex; align-items: center; justify-content: space-evenly; gap: 28px; }
.site-connection-brands > a, .site-connection-brands > div { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-decoration: none; }
.site-connection-brands > a:hover > span:last-child { text-decoration: underline; }
.site-connection-brands > a > span:last-child, .site-connection-brands > div > span:last-child { color: var(--site-muted); font-size: 11px; }
.site-connections > .site-text-link { font-size: 12px; white-space: nowrap; }
.site-connection-brands .brand-odoo img { width: 110px; height: 48px; }
.site-connection-brands .brand-exact-online img { width: 83px; height: auto; }
.site-connection-brands .brand-exact-online > span { font-size: 12px; }
.site-connection-brands .brand-yuki img { width: 68px; height: 48px; }
.section-intro { font-size: 16px; margin-bottom: 30px; color: var(--site-muted); }
.how-list { margin: 0; }
.how-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid #e4e9f2; }
.how-list dt { font-size: 14px; font-weight: 600; }
.how-list dd { margin: 0; font-size: 13px; line-height: 1.65; color: var(--site-muted); }
.site-odoo { background: var(--lime); padding-block: 70px; }
.odoo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: center; }
.odoo-layout p { max-width: 65ch; font-size: 15px; color: var(--muted-strong); margin-bottom: 24px; }
.odoo-benefits { margin: -4px 0 26px; padding: 0; list-style: none; color: var(--muted-strong); font-size: 13px; }
.odoo-benefits li { padding-block: 9px; border-bottom: 1px solid #d5e0f3; }
.site-faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 84px; padding-block: 96px; }
.site-faq details { border-top: 1px solid #e4e9f2; }
.site-faq details:last-child { border-bottom: 1px solid #e4e9f2; }
.site-faq summary { padding: 20px 24px 20px 0; cursor: pointer; font-size: 14px; font-weight: 550; }
.site-faq details p { font-size: 13px; line-height: 1.75; color: var(--site-muted); padding-bottom: 20px; margin: 0; }
.site-close { padding-block: 60px; background: #182b58; color: var(--surface); }
.site-close > div { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.site-close h2 { margin: 0; }
.site-button.light { color: var(--ink-strong) !important; background: var(--surface); }
.site-button.light:hover { background: var(--lime); }
.site-close p { color: #dbe4ff; font-size: 11px; line-height: 1.6; margin: 16px 0 0; }
.site-close :focus-visible { outline-color: var(--surface); }
.site-footer { min-height: 120px; display: flex; align-items: center; gap: 28px; font-size: 12px; color: var(--site-muted); }
.site-footer > span { margin-right: auto; }
.site-footer > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer .site-brand { color: var(--ink-strong); font-size: 21px; margin-right: 24px; }
.demo-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; gap: 12px; color: var(--primary); background: var(--lime); font-size: 12px; min-height: 40px; }
.demo-banner a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.demo-mode .app-shell { min-height: calc(100vh - 40px); }
.access-page { min-height: 100vh; background: var(--canvas); color: var(--ink-strong); font-family: var(--font-site-sans), Arial, sans-serif; padding: 40px 24px; }
.access-content { width: min(560px, 100%); margin: 10vh auto; }
.access-content .site-brand { margin-bottom: 42px; }
.access-content h1 { font-family: var(--font-geist-sans), Arial, sans-serif; font-weight: 600; font-size: 40px; line-height: 1.15; margin-bottom: 20px; }
.access-content > p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.privacy-copy { max-width: 70ch; padding-block: 55px 90px; }
.privacy-copy h1 { font-family: var(--font-geist-sans), Arial, sans-serif; font-weight: 400; font-size: 42px; margin-bottom: 30px; }
.privacy-copy h2 { margin: 30px 0 12px; font-size: 20px; }
.privacy-copy p { color: var(--site-muted); }
.registration-fit { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--site-line, var(--line-soft)); font-size: 14px; line-height: 1.65; }
.registration-fit > p { margin: 0 0 12px; }
.registration-fit > a { display: inline-flex; align-items: center; min-height: 32px; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .site-width { width: calc(100% - 40px); max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px); }
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 76px; padding-block: 16px; gap: 12px 16px; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 24px; flex-wrap: wrap; }
  .site-header nav .site-nav-secondary { display: none; }
  .site-header .site-start { grid-column: 2; grid-row: 1; min-height: 44px; }
  .hero-heading { grid-template-columns: 1fr; gap: 26px; }
  .site-hero { padding-top: 36px; padding-bottom: 36px; }
  .landing-site .site-hero { padding-top: 44px; padding-bottom: 32px; }
  .landing-site .hero-heading { margin-bottom: 32px; }
  .hero-heading h1 { font-size: clamp(46px, 8vw, 64px); }
  .site-connections { grid-template-columns: 1fr; gap: 20px; }
  .site-connections > p { max-width: none; }
  .site-connection-brands { justify-content: space-between; gap: 20px; }
  .site-how, .site-faq, .odoo-layout { grid-template-columns: 1fr; gap: 30px; }
  .site-how, .site-faq { padding-block: 55px; }
  .site-odoo { padding-block: 48px; }
  .site-close > div { flex-direction: column; align-items: flex-start; gap: 28px; }
  .payment-example th, .payment-example td { padding-inline: 14px; }
  .example-reference, .example-payments th:nth-child(4) { display: none; }
  .site-footer { flex-wrap: wrap; gap: 12px 20px; padding-block: 30px; }
  .site-footer > span { flex-basis: 100%; order: 3; }
}
@media (max-width: 480px) {
  .example-account { display: grid; gap: 2px; }
  .example-steps { padding-inline: 10px; gap: 6px; justify-content: space-between; }
  .example-steps button { font-size: 12px; }
  .example-coding, .example-vat-period { padding-inline: 14px; }
  .example-vat p { padding-inline: 14px; }
  .example-invoice { grid-template-columns: 1fr; gap: 20px; padding: 24px 14px; }
  .example-entry p { padding-inline: 14px; }
  .site-header nav { gap: 12px; font-size: 12px; }
  .site-header .site-start { padding-inline: 12px; font-size: 12px; }
  .site-brand { font-size: 21px; }
  .hero-heading { margin-bottom: 30px; }
  .hero-intro > p:first-child { font-size: 15px; }
  .landing-site .hero-heading h1 { font-size: clamp(30px, 8.5vw, 40px); margin-bottom: 20px; }
  .landing-site .hero-intro > p:first-child { font-size: 15px; max-width: 34ch; }
  .hero-line-break { display: none; }
  .landing-site .payment-example td { padding-block: 14px; }
  .site-actions { gap: 20px; }
  .site-actions .site-button { padding-inline: 18px; }
  .example-toolbar { padding: 14px; flex-wrap: wrap; }
  .payment-example table { font-size: 12px; }
  .payment-example th, .payment-example td { padding: 11px 10px; }
  .example-date, .example-payments th:nth-child(2) { display: none; }
  .example-mobile-date { display: block; color: var(--text-secondary); font-size: 11px; margin-top: 3px; }
  .payment-example td:first-child { width: auto; }
  .payment-example td button, .payment-example td > a { gap: 5px; font-size: 11px; }
  .example-amount small { display: none; }
  .example-bottom { padding: 12px; }
  .example-bottom span { max-width: 170px; }
  .example-proof { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .how-list > div { grid-template-columns: 1fr; gap: 8px; }
  .demo-banner { padding-inline: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .public-site * { transition: none !important; scroll-behavior: auto !important; } }