/* ============================================================
   AnnTac.eu design system
   Licht en fris, wit canvas, AnnTac-paars #3a2cff als accent.
   Lettertype: Poppins (zelf gehost), fallback op systeemfonts.
   ============================================================ */
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gilroy";src:url("/assets/fonts/Gilroy-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --acc:#3a2cff;            /* AnnTac primair blauw-violet (Pantone 2736 C) */
  --acc-deep:#2417c9;
  --acc-soft:#eceafe;
  --green:#1BD983;          /* AnnTac groen (Pantone 7479 C) */
  --teal:#028DAD;           /* Pantone 314 C */
  --grad:linear-gradient(45deg,#3a2cff 0%,#028DAD 55%,#1BD983 100%); /* brandbook: 45 graden */
  --ink:#181a2a;
  --muted:#5c6172;
  --line:#e6e8f0;
  --bg:#ffffff;
  --bg-alt:#f7f8fc;
  --radius:14px;
  --shadow:0 8px 28px rgba(58,44,255,.10);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--acc)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1,h2{font-family:"Gilroy","Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:700}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
h3{font-size:1.08rem}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.center{text-align:center}
.maxw{max-width:760px;margin-left:0;margin-right:0}
/* centred blocks say so explicitly */
.center .maxw,.maxw.center{margin-left:auto;margin-right:auto}
.mt{margin-top:2.2rem}
.lead{font-size:1.14rem;color:var(--muted);max-width:640px}
.center .lead,.sub{color:var(--muted)}
.sub{max-width:680px;margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:11px 22px;border-radius:10px;font-weight:600;font-size:.95rem;
  text-decoration:none;text-align:center;border:1.5px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn-lg{padding:13px 28px;font-size:1.02rem}
.btn-primary{background:var(--acc);color:#fff;box-shadow:0 4px 14px rgba(58,44,255,.28)}
.btn-primary:hover{background:var(--acc-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--acc);border-color:var(--acc)}
.btn-ghost:hover{background:var(--acc-soft)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:1.2rem 0 .6rem}
.cta-row.center{justify-content:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .container{max-width:1360px}
.header-inner{display:flex;align-items:center;gap:26px;height:66px}
.header-inner .brand,.header-cta{flex-shrink:0}
.brand img{display:block}
.main-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.main-nav a,.header-cta .btn,.lang-switch button{white-space:nowrap}
.main-nav a{color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:500;
  padding:8px 12px;border-radius:8px}
.main-nav a:hover{background:var(--bg-alt)}
.main-nav a.on{color:var(--acc)}
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-item .sub{position:absolute;top:100%;left:0;min-width:180px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:8px;display:none;flex-direction:column}
.nav-item:hover .sub,.nav-item:focus-within .sub,.nav-item.open>.sub{display:flex}
.lang-switch .sub{left:auto;right:0}
.nav-item .sub a{display:block;padding:8px 12px}
.header-cta{display:flex;align-items:center;gap:14px;margin-left:8px}
.lang-switch button{background:none;border:1.5px solid var(--line);border-radius:8px;
  padding:7px 12px;font:inherit;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
.lang-sub{right:0;left:auto}
.lang-sub a{color:var(--ink);text-decoration:none;font-size:.9rem;padding:8px 12px;border-radius:8px}
.lang-sub a:hover{background:var(--bg-alt)}
.lang-sub a[aria-current="true"]{color:var(--acc);font-weight:600}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s}
.btn-start .cta-short{display:none}

/* ---------- hero ---------- */
.hero{background:
  radial-gradient(900px 420px at 85% -10%,rgba(27,217,131,.13),transparent 60%),
  radial-gradient(700px 380px at -10% 110%,rgba(58,44,255,.08),transparent 60%),
  var(--bg);
  padding:96px 0 88px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.hero-copy h1{font-size:clamp(2.15rem,4.4vw,3.35rem);max-width:720px;letter-spacing:-.025em}
.hero-copy .lead{font-size:1.12rem;line-height:1.68;max-width:650px}
.hero-visual .imgshot{transform:rotate(.35deg);box-shadow:0 24px 60px rgba(35,29,112,.16)}
.hero-note{font-size:.85rem;color:var(--muted)}

/* Homepage source flow: several everyday inputs become one complete dossier.
   The animation only explains direction; the content remains clear without it. */
.hero-flow{position:relative;margin:0;padding:18px;border:1px solid rgba(58,44,255,.13);
  border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,248,252,.96));
  box-shadow:0 24px 60px rgba(35,29,112,.14);overflow:hidden}
.hero-flow::before{content:"";position:absolute;right:-80px;top:-100px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(27,217,131,.16),transparent 68%);pointer-events:none}
.hf-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:15px}
.hf-head>span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.hf-head img{display:block;width:126px;height:auto;max-height:45px;object-fit:contain}
.hf-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(138px,1fr) 74px minmax(175px,1.13fr);
  align-items:center;min-height:320px}
.hf-sources{display:grid;gap:10px}
.hero-source{display:grid;grid-template-columns:35px 1fr;gap:10px;align-items:center;min-width:0;
  padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:0 5px 15px rgba(35,29,112,.06);animation:sourceBreathe 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * .48s)}
.hero-source span{min-width:0}.hero-source b,.hero-source small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-source b{font-size:.83rem;line-height:1.25}.hero-source small{margin-top:2px;color:var(--muted);font-size:.66rem}
.hs-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;color:var(--acc);
  background:var(--acc-soft)}
.hs-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hs-orbit{border-color:rgba(2,141,173,.24)}.hs-orbit .hs-icon{color:var(--teal);background:rgba(27,217,131,.11)}
.hf-lines{display:block;width:100%;height:320px;overflow:visible}
.hf-lines path{fill:none;stroke:url(#heroFlowGradient);stroke-width:2;
  stroke-linecap:round;stroke-dasharray:7 11;animation:flowDash 1.9s linear infinite}
.hf-lines path:nth-child(2){animation-delay:-.35s}.hf-lines path:nth-child(3){animation-delay:-.7s}.hf-lines path:nth-child(4){animation-delay:-1.05s}
.hf-dossier{position:relative;padding:18px 16px 16px;border:1px solid rgba(58,44,255,.2);border-radius:17px;
  background:#fff;box-shadow:0 14px 34px rgba(58,44,255,.11)}
.hf-dossier::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:17px 17px 0 0;background:var(--grad)}
.hf-dossier>span{display:inline-block;margin:1px 0 7px;color:var(--teal);font-size:.64rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.hf-dossier h3{margin:0 0 12px;font-size:.96rem}
.hf-dossier ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.hf-dossier li{display:grid;grid-template-columns:20px 1fr 16px;align-items:center;gap:7px;color:var(--muted);font-size:.73rem}
.hf-dossier li>span{width:18px;height:14px;border-radius:3px;background:linear-gradient(135deg,var(--acc-soft),#dff9ee);position:relative}
.hf-dossier li>span::before{content:"";position:absolute;left:2px;top:-3px;width:8px;height:4px;border-radius:2px 2px 0 0;background:#d7d3ff}
.hf-dossier li>b{color:var(--green);font-size:.82rem}
.hero-flow figcaption{position:relative;z-index:1;margin-top:14px;padding:11px 13px;border-radius:11px;
  background:linear-gradient(90deg,rgba(58,44,255,.07),rgba(27,217,131,.09));color:var(--ink);
  font-size:.72rem;line-height:1.5}
@keyframes flowDash{to{stroke-dashoffset:-36}}
@keyframes sourceBreathe{0%,72%,100%{transform:translateX(0);box-shadow:0 5px 15px rgba(35,29,112,.06)}
  82%{transform:translateX(4px);box-shadow:0 7px 20px rgba(58,44,255,.13)}}
@media(prefers-reduced-motion:reduce){.hero-source,.hf-lines path{animation:none}}
.pagehead{background:
  radial-gradient(800px 360px at 90% -20%,rgba(27,217,131,.12),transparent 60%),var(--bg);
  padding:56px 0 34px}
.pagehead .badge{margin-bottom:10px}
.pagehead.orbit{background:
  radial-gradient(800px 380px at 85% -10%,rgba(2,141,173,.14),transparent 60%),
  radial-gradient(600px 300px at 0% 120%,rgba(58,44,255,.08),transparent 60%),var(--bg)}
.forwho{color:var(--muted);font-size:.95rem}
.story{max-width:760px}
.story p{font-size:1.05rem}
.mt-s{margin-top:1.4rem}
.platform{display:inline-block;background:var(--bg-alt);color:var(--muted);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:6px;margin-bottom:8px}
.partners .featblock h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* ---------- sections ---------- */
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.section.pt0{padding-top:8px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid4.stretch>*,.grid3.stretch>*{display:flex;flex-direction:column}
.grid4.stretch .btn,.grid3.stretch .btn{margin-top:auto}

/* ---------- cards & blocks ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card.hl{border-color:var(--acc);box-shadow:var(--shadow)}
.badge{display:inline-block;background:var(--acc-soft);color:var(--acc-deep);font-size:.7rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:6px;margin-bottom:10px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.pillar img{margin-bottom:12px}
.pillar h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.mini{background:var(--bg-alt);border-radius:var(--radius);padding:22px}
.featblock{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.featblock h3{color:var(--acc-deep)}
.specbar{margin-top:26px;background:var(--acc-soft);border-radius:12px;padding:16px 20px;font-size:.95rem}
.nextstep{margin-top:18px;color:var(--muted)}
.price-line{font-weight:600;color:var(--acc-deep)}
.tag{color:var(--muted);font-style:italic;font-size:.93rem;margin:2px 0 12px}

/* ---------- tier strip (home) ---------- */
.tierstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tiercard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.tiercard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tiercard.hl{border-color:var(--acc)}
.tiercard p{font-size:.86rem;color:var(--muted);min-height:3.4em}
.tiercard .more{font-size:.86rem;font-weight:600;color:var(--acc)}

/* ---------- sectors ---------- */
.sectors .sector{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.sector h3{color:var(--acc-deep)}
.yoursector{margin-top:22px;background:var(--grad);border-radius:var(--radius);padding:30px;
  color:#fff;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.yoursector h3{color:#fff;margin:0 0 4px}
.yoursector p{margin:0;flex:1 1 320px;color:rgba(255,255,255,.9)}
.yoursector .btn{background:#fff;color:var(--acc-deep);box-shadow:none}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
blockquote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
blockquote p{font-size:.98rem}
blockquote cite{font-style:normal;font-size:.85rem;color:var(--muted)}

/* ---------- pricing ---------- */
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin:6px 0 2px}
.toggle button{border:0;background:none;font:inherit;font-size:.92rem;font-weight:500;
  padding:9px 20px;border-radius:999px;cursor:pointer;color:var(--muted)}
.toggle button.on{background:var(--acc);color:#fff}
.vat{color:var(--muted);font-size:.85rem}
.pricecard .badge{align-self:flex-start}
.pricecard h3{margin-bottom:.65rem}
.pricecard .price{font-size:1.65rem;font-weight:700;line-height:1.3;margin:2px 0 0;min-height:6.65rem}
.pricecard .price small{display:block;font-size:.76rem;font-weight:400;color:var(--muted);margin-top:2px}
.pricecard .price-dual{display:grid;grid-template-columns:minmax(7.65rem,auto) 1fr;column-gap:10px;align-content:start;align-items:baseline}
.pricecard .price-dual>span{grid-column:1}
.pricecard .price-dual>.price-tax{grid-column:2;margin:0;white-space:nowrap}
.pricecard .price-dual>.price-incl{font-size:1em;color:var(--ink);font-weight:700;margin-top:0}
.pricecard .price-dual>.price-net{font-size:.64em;color:var(--muted);font-weight:600;margin-top:6px}
.pricecard .price-dual>.per{grid-column:1/-1;margin-top:5px}
.pricecard .quote-price{display:block;max-width:12rem;font-size:1.22rem;line-height:1.4;font-weight:600;color:var(--ink)}
ul.feat{list-style:none;padding:0;margin:0 0 18px;font-size:.9rem}
ul.feat li{padding:5px 0 5px 22px;position:relative}
ul.feat li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;border-radius:50%;background:#d8d4fb}
ul.feat li.on{font-weight:500}
ul.feat li.on::before{background:var(--acc)}
.pricecard .cta{margin-top:auto}
.pricing-group-head{max-width:760px;margin:0 auto 22px;text-align:center}
.pricing-group-head h2{margin-bottom:.35rem}
.pricing-group-head p{margin:0;color:var(--muted)}
.pricing-group-head.business{margin-top:56px}
.pricing-base-grid{max-width:900px;margin:0 auto}
.pricing-business-grid{align-items:stretch}
.base-plan-grid{max-width:900px;margin:26px auto 52px}
.base-plan-card{display:flex;flex-direction:column}
.base-plan-card .badge{align-self:flex-start}
.base-plan-card .base-plan-price{font-size:2rem;font-weight:700;margin:.35rem 0 0;color:var(--ink)}
.base-plan-card .cta{margin-top:auto;align-self:flex-start}
.document-manager-claim{margin-bottom:44px}
.cardnote{font-size:.82rem;color:var(--muted);margin-top:auto;padding-bottom:12px}
.cardnote+.cta{margin-top:0}
@media (min-width:1001px){
  .pricecard .tag{min-height:5.8rem}
}
.disc{background:#fff;border:1.5px dashed var(--acc);border-radius:12px;padding:18px 20px;margin-top:26px;font-size:.94rem}
.note{color:var(--muted);font-size:.88rem;margin-top:16px}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.mod p{font-size:.9rem;color:var(--muted);margin:0}
.modprice{color:var(--acc-deep);font-weight:700;margin:0 0 8px !important}
.dual-vat{display:grid;gap:2px}
.dual-vat .dual-net,.dual-vat .dual-gross{display:block}
.dual-vat .dual-gross{color:var(--acc-deep);font-weight:700}
.dual-vat .dual-net{color:var(--muted);font-size:.88em;font-weight:500}
.dual-vat small{font-size:.76em;font-weight:500}
.dual-period{font-size:.9em;font-weight:400}
.tier-dual{display:inline-grid;vertical-align:top;gap:4px}
.dual-price-row{display:block}
.dual-price-row>b{color:var(--acc-deep)}
.dual-price-row>span{color:var(--muted)}
.orbit-price-mark{display:grid;place-items:center;min-height:180px}
.orbit-price-mark img{width:min(320px,80%);height:auto}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:10px}
summary{cursor:pointer;font-weight:600;font-size:.98rem}
details p{margin:10px 0 0;color:var(--muted);font-size:.94rem}

/* ---------- orbit ---------- */
.orbit-price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:640px}
.bigprice{font-size:2rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 10px}
.orbitband{margin-top:26px;background:var(--grad);border-radius:var(--radius);padding:30px;color:#fff;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.orbitband h2{color:#fff;margin:0 0 6px}
.orbitband p{margin:0;color:rgba(255,255,255,.9)}
.orbitband>div{flex:1 1 340px}
.orbitband .btn{background:#fff;color:var(--acc-deep);box-shadow:none}

/* ---------- echte beelden ---------- */
.imgshot{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.imgshot img{display:block;width:100%;height:auto}
.sector img{width:96px;height:96px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.hero{background-image:url("/assets/img/bg-gradient.webp");background-size:cover;background-position:center}

/* ---------- mock screenshot ---------- */
.shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:6px;background:var(--bg-alt);border-bottom:1px solid var(--line);padding:10px 14px}
.shot-bar span{width:10px;height:10px;border-radius:50%;background:#dfe2ec}
.shot-bar i{font-style:normal;font-size:.72rem;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:2px 10px;margin-left:10px}
.shot-body{display:grid;grid-template-columns:64px 1fr;min-height:230px}
.shot-side{background:var(--bg-alt);border-right:1px solid var(--line);padding:14px 12px}
.shot-side b{display:block;height:10px;border-radius:5px;background:#e3e1fb;margin-bottom:12px}
.shot-side b:first-child{background:var(--acc)}
.shot-main{padding:16px 18px}
.shot-search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--acc);border-radius:9px;padding:8px 12px;color:var(--acc);margin-bottom:14px}
.shot-search u{display:block;flex:1;height:8px;border-radius:4px;background:var(--acc-soft);text-decoration:none}
.shot-row{height:12px;border-radius:6px;background:var(--bg-alt);margin-bottom:10px}
.w90{width:90%}.w80{width:80%}.w75{width:75%}.w70{width:70%}.w60{width:60%}
.shot figcaption{font-size:.78rem;color:var(--muted);padding:8px 14px;border-top:1px solid var(--line);background:var(--bg-alt)}

/* ---------- apps en downloads ---------- */
.appgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.appgrid.rev>div:first-child{order:2}
.appgrid.rev>div:last-child{order:1}
.appblock{scroll-margin-top:80px}
.appshot-ph{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:var(--bg-alt);padding:28px;text-align:center}
.appshot-ph p{color:var(--muted);font-size:.85rem;margin:0;max-width:260px}
@media(max-width:1000px){.appgrid{grid-template-columns:1fr}.appgrid.rev>div:first-child{order:1}.appgrid.rev>div:last-child{order:2}}

/* ---------- orbit mock (chat -> taken) ---------- */
.orbitshot .oshot{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;padding:20px;min-height:230px}
.ophone{background:var(--bg-alt);border:1px solid var(--line);border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.obub{border-radius:12px;padding:10px 12px;max-width:88%}
.obub u{display:block;height:8px;border-radius:4px;background:#dfe2ec;text-decoration:none;margin:4px 0}
.obub.in{background:#fff;border:1px solid var(--line);align-self:flex-start}
.obub.out{background:var(--acc-soft);align-self:flex-end}
.obub.out u{background:#c9c3fb}
.obub.totask{border-color:var(--acc);position:relative}
.chip{position:absolute;right:-8px;bottom:-10px;background:var(--grad);color:#fff;border-radius:999px;
  padding:3px 9px;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;gap:3px;box-shadow:0 3px 10px rgba(58,44,255,.3)}
.otasks{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff}
.otask{display:flex;align-items:center;gap:10px;background:var(--bg-alt);border-radius:9px;padding:9px 11px}
.otask i{width:18px;height:18px;border-radius:6px;border:1.5px solid #c9cddc;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.otask.done i{background:var(--green);border-color:var(--green)}
.otask.new{outline:1.5px solid var(--acc);background:var(--acc-soft)}
.otask u{display:block;height:8px;border-radius:4px;background:#dfe2ec;text-decoration:none;flex:1}
.otask u.w70{max-width:70%}.otask u.w60{max-width:60%}.otask u.w80{max-width:80%}.otask u.w65{max-width:65%}

/* ---------- embeds / support / contact ---------- */
.embed-slot{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.paidsupport{margin-top:22px;background:var(--acc-soft);border-radius:var(--radius);padding:26px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.contact-aside{background:var(--bg-alt);border-radius:var(--radius);padding:26px}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:4px 0}

/* ---------- final cta ---------- */
.cta-final{background:
  radial-gradient(700px 340px at 50% 130%,rgba(27,217,131,.13),transparent 60%),var(--bg-alt)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#fff;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;padding:44px 20px 20px}
.f-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.f-col ul{list-style:none;padding:0;margin:0}
.f-col li{padding:3px 0}
.f-col a{color:var(--ink);text-decoration:none;font-size:.92rem}
.f-col a:hover{color:var(--acc)}
.f-brand p{color:var(--muted);font-size:.9rem;margin-top:10px}
.footer-bottom{border-top:1px solid var(--line);padding:14px 20px}
.footer-bottom p{margin:0;font-size:.82rem;color:var(--muted)}

/* ---------- language chooser / 404 ---------- */
.langchooser{padding:80px 20px;text-align:center}
.langchooser ul{margin-top:26px}
.langchooser li{padding:6px 0}
.langchooser a{font-size:1.1rem;font-weight:600;text-decoration:none}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .grid4,.sectors{grid-template-columns:repeat(2,1fr)}
  .tierstrip{grid-template-columns:repeat(2,1fr)}
  .quotes,.grid3{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
/* Use the compact menu before the navigation and action buttons compete for
   space. Keep submenu rules scoped to the navigation, not the language menu. */
@media(max-width:1200px){
  body{overflow-x:hidden}
  .site-header{position:sticky;top:0}
  .menu-btn{display:block;margin-left:0;padding:8px 6px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:10px 16px 18px;gap:0;box-shadow:var(--shadow);
    max-height:calc(100vh - 72px);overflow-y:auto}
  .main-nav.open{display:flex}
  .main-nav>a{display:block;padding:13px 10px;font-size:1.02rem;font-weight:600;border-radius:10px}
  .main-nav .nav-item{display:block;position:static;padding:0}
  .main-nav .nav-item>a{display:block;padding:13px 10px;font-size:1.02rem;font-weight:600;border-radius:10px}
  .main-nav .nav-item .sub{position:static;display:flex;flex-direction:column;min-width:0;
    border:0;box-shadow:none;background:none;padding:0 0 6px 14px;margin:0}
  .main-nav .nav-item .sub a{display:block;padding:10px 10px;font-size:.98rem;font-weight:500}
  .header-inner{position:relative;gap:8px}
  .header-cta{margin-left:auto}
}
@media(max-width:700px){
  .grid2,.grid3,.grid4,.quotes,.sectors,.tierstrip,.contact-grid{grid-template-columns:1fr}
  .brand img{width:96px;height:auto}
  .header-cta{gap:6px;margin-left:auto}
  .header-cta .btn{padding:8px 9px;font-size:.74rem}
  .btn-start .cta-long{display:none}
  .btn-start .cta-short{display:inline}
  .lang-switch button{padding:6px 9px;font-size:.78rem}
  .hero{padding:38px 0 34px}
  .section{padding:40px 0}
  h1{font-size:1.72rem}
  .pagehead h1{font-size:1.6rem}
  .cta-row{flex-wrap:wrap}
  .btn-lg{width:100%;text-align:center}
  .orbitband{flex-direction:column;align-items:flex-start;gap:14px}
  .appgrid{gap:22px}
  .paidsupport iframe{height:1150px}
  .startpath ol{grid-template-columns:1fr;padding:10px 0}
  .startpath li,.startpath li:first-child,.startpath li:last-child{padding:12px 0;border-right:0;border-bottom:1px solid var(--line)}
  .startpath li:last-child{border-bottom:0}
  .hero-flow{padding:15px;border-radius:19px}
  .hf-stage{grid-template-columns:1fr;gap:16px;min-height:0}
  .hf-sources{grid-template-columns:1fr 1fr;gap:8px}
  .hf-lines{display:none}
  .hf-dossier{max-width:none}
  .hero-source{grid-template-columns:30px 1fr;padding:9px}
  .hs-icon{width:30px;height:30px}.hs-icon svg{width:17px;height:17px}
  .hero-source small{white-space:normal;line-height:1.25}
}
@media(max-width:380px){
  .brand img{width:82px}
  .header-inner{gap:6px}
  .header-cta{gap:4px}
  .header-cta .btn{padding:7px;font-size:.71rem}
  .lang-switch button{padding:5px 7px}
  .menu-btn{padding:6px 4px}
}
@media(max-width:420px){.hf-sources{grid-template-columns:1fr}}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:20px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto}
}

/* tier visual als subtiele achtergrond in de pagehead + orbitband image (24 aug)
   Het image staat IN de .container en wordt gepositioneerd t.o.v. de container,
   zodat het op elke schermbreedte netjes rechts naast de tekst valt. */
.pagehead.has-tv{overflow:hidden}
.pagehead.has-tv .container{position:relative}
.pagehead.has-tv h1,.pagehead.has-tv .lead,.pagehead.has-tv .forwho{max-width:660px;position:relative;z-index:1}
.pagehead.has-tv .cta-row,.pagehead.has-tv .badge{position:relative;z-index:1}
.tv-bg{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:0;
  width:min(320px,26vw);height:auto;opacity:1;pointer-events:none;user-select:none}
/* 28 aug: productlogo's blijven zichtbaar op mobiel/tablet. Onder 900px gaat
   het logo niet meer weg maar wordt het een compact, gecentreerd blok onder
   de knoppen (het img-element staat al als laatste in de container). */
@media (max-width:900px){
  .tv-bg{position:static;transform:none;display:block;width:128px;margin:26px auto 0}
}
.orbitband .ob-img{width:120px;height:120px;border-radius:16px;background:#fff;flex:0 0 auto;object-fit:contain}
@media (max-width:560px){.orbitband .ob-img{width:76px;height:76px;border-radius:12px}}

/* app-video (Uplink) + hero-afbeelding onder de pagehead (Orbit) (24 aug) */
.appshot video{display:block;width:100%;height:auto}
.imgshot.heroshot-below{margin:0 0 40px}

/* 25 aug: store badges, formulierkeuze, btw-band, socials, nieuws, footer 5 kolommen */
.store-badges{align-items:center}
.store-badges img{display:block;height:48px;width:auto;border-radius:8px}
.form-choice input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.choice-btns{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.choice-btns label{padding:10px 22px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;
  font-weight:600;background:#fff;transition:border-color .15s,background .15s,color .15s}
#fk-alg:checked ~ .choice-btns label[for="fk-alg"],
#fk-sup:checked ~ .choice-btns label[for="fk-sup"]{background:var(--acc-deep);border-color:var(--acc-deep);color:#fff}
#fk-alg:checked ~ #pane-sup{display:none}
#fk-sup:checked ~ #pane-alg{display:none}
.choice-note{margin:0 0 14px}
.formpane iframe{background:#fff;border-radius:12px}
.btwband{display:flex;gap:18px;align-items:flex-start;margin-top:28px;padding:22px 24px;
  background:linear-gradient(90deg,rgba(85,80,255,.07),rgba(61,220,151,.09));border:1px solid var(--line);border-radius:16px}
.btwband h3{margin:0 0 6px}
.btwband p{margin:0}
.btw-chip{flex:0 0 auto;background:var(--acc-deep);color:#fff;font-weight:600;font-size:.85rem;
  padding:6px 14px;border-radius:999px;white-space:nowrap;margin-top:2px}
@media (max-width:560px){.btwband{flex-direction:column;gap:10px}}
.socialrow{margin-top:12px;font-size:.95rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* grappige 404 (25 aug). Met achtergrondbeeld zodra 404-chaos.webp bestaat. */
.p404{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f6f7fd 0%,#eef1fb 45%,#e8f7f1 100%)}
.p404.has-bg{background:url("/assets/img/404-chaos.webp") center/cover no-repeat}
.wrap404{text-align:center;max-width:720px;padding:48px 24px;background:rgba(255,255,255,.86);
  border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(6px);margin:24px}
.code404{font-size:4.2rem;font-weight:700;line-height:1;margin:18px 0 6px;
  background:linear-gradient(90deg,var(--acc-deep),#3ddc97);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap404 h1{margin:0 0 14px}
.lead404{color:var(--muted);margin:0 0 10px}
.en404{font-size:.92rem}
.wrap404 .cta-row{margin:22px 0 10px;justify-content:center}
.note404{font-size:.92rem;color:var(--muted);margin:14px 0 18px}
.lang404{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:.9rem}

/* 25 aug avond: pagetext-uitlijning, hulp op afstand naast intro, about-grid */
.pagetext{max-width:760px}
.supportgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:start}
.assistbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.assistbox h2{font-size:1.12rem;margin:0 0 8px}
.assistbox p{font-size:.92rem;color:var(--muted);margin:0 0 10px}
.assistbox iframe{display:block;border:0;border-radius:10px;background:#fff}
.aboutgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}
.aboutgrid .imgshot{margin:0}
@media(max-width:900px){
  .supportgrid,.aboutgrid{grid-template-columns:1fr;gap:24px}
}

/* Productkleuren van de designer-iconen (25 aug):
   Base #028DAD, Launch #1BD983, Horizon #E51FAE, Infinity #6C7AFF, Orbit indigo. */
body.tier-base .pagehead.has-tv{background-image:radial-gradient(620px 320px at 82% 30%,rgba(2,141,173,.13),transparent 70%)}
body.tier-launch .pagehead.has-tv{background-image:radial-gradient(620px 320px at 82% 30%,rgba(27,217,131,.14),transparent 70%)}
body.tier-horizon .pagehead.has-tv{background-image:radial-gradient(620px 320px at 82% 30%,rgba(229,31,174,.10),transparent 70%)}
body.tier-infinity .pagehead.has-tv{background-image:radial-gradient(620px 320px at 82% 30%,rgba(108,122,255,.14),transparent 70%)}
body.tier-orbit .pagehead.has-tv{background-image:radial-gradient(620px 320px at 82% 30%,rgba(75,85,235,.12),transparent 70%)}
body.tier-base .specbar{border-left:4px solid #028DAD}
body.tier-launch .specbar{border-left:4px solid #1BD983}
body.tier-horizon .specbar{border-left:4px solid #E51FAE}
body.tier-infinity .specbar{border-left:4px solid #6C7AFF}
.tiercard .tc-icon,.card .tc-icon{display:block;height:64px;width:auto;margin:10px 0 12px}
.badge-soft{display:inline-block;background:var(--bg-alt);color:var(--muted);font-size:.72rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.card.tc-base:hover{border-color:#028DAD}
.card.tc-launch:hover{border-color:#1BD983}
.card.tc-horizon:hover{border-color:#E51FAE}
.card.tc-infinity:hover{border-color:#6C7AFF}
.tiercard.tc-base:hover{border-color:#028DAD}
.tiercard.tc-launch:hover{border-color:#1BD983}
.tiercard.tc-horizon:hover{border-color:#E51FAE}
.tiercard.tc-infinity:hover{border-color:#6C7AFF}
.tiercard.tc-orbit:hover{border-color:#4B55EB}
.orbitband .ob-img{background:#fff;padding:10px}
.newslist .newsitem{padding:26px 0;border-bottom:1px solid var(--line)}
.newslist .newsitem:last-child{border-bottom:none}
.newsdate{color:var(--muted);font-size:.9rem;margin:0 0 4px}
.newslist h2{margin:0 0 10px}
.paidsupport iframe,.embed-slot iframe{border-radius:12px;background:#fff;margin-top:14px}

/* ============================================================
   28 augustus 2026: conversiecomponenten uit de verbeterbrief.
   Zelfde lichte, frisse basis; geen nieuwe dependencies, geen zware
   animaties. Alles werkt zonder JavaScript en is met het toetsenbord
   te bedienen.
   ============================================================ */

/* ---------- header: Inloggen naast Start nu ---------- */
.btn-quiet{background:none;color:var(--muted);border-color:transparent;padding:9px 12px}
.btn-quiet:hover{background:var(--bg-alt);color:var(--ink)}
.btn-start{box-shadow:0 6px 18px rgba(58,44,255,.32)}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-xs{padding:6px 13px;font-size:.8rem;border-radius:8px}

/* ---------- hero: trustregel onder de knoppen ---------- */
.trustrow{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0;
  font-size:.9rem;color:var(--muted)}
.trustrow li{display:flex;align-items:center;gap:7px}
.trustrow li::before{content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  background:var(--green) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- direct path from promise to the public signup ---------- */
.startpath{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.startpath ol{list-style:none;margin:0;padding:20px 0;display:grid;grid-template-columns:repeat(3,1fr)}
.startpath li{display:flex;align-items:flex-start;gap:12px;padding:4px 24px;border-right:1px solid var(--line)}
.startpath li:first-child{padding-left:0}
.startpath li:last-child{border-right:0;padding-right:0}
.sp-num{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:var(--acc-soft);color:var(--acc-deep);font-weight:700}
.startpath b{display:block;font-size:.92rem;margin-bottom:2px}
.startpath small{display:block;color:var(--muted);font-size:.8rem;line-height:1.45}

/* ---------- bewijsbalk direct onder de hero ---------- */
.proofbar{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0}
.quotes.qsmall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quotes.qsmall blockquote{margin:0;font-size:.92rem}
.quotes.qsmall p{margin:0 0 .4em}
.quotes.qsmall cite{font-size:.82rem;color:var(--muted);font-style:normal}

/* ---------- gedeelde bouwstenen ---------- */
.filechip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;font-size:.9rem;font-weight:500;box-shadow:0 2px 8px rgba(24,26,42,.05)}
.filechip .ft-ico{color:var(--acc);flex:0 0 auto}
.fieldrows{margin:0;display:grid;gap:2px}
.fieldrows .fr{display:grid;grid-template-columns:minmax(96px,42%) 1fr;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.fieldrows .fr:last-child{border-bottom:0}
.fieldrows dt{margin:0;font-size:.82rem;color:var(--muted)}
.fieldrows dd{margin:0;font-size:.9rem;font-weight:500}
.micro{font-size:.8rem;color:var(--muted)}

/* ---------- boomstructuur ---------- */
.foldertree{font-size:.92rem}
.foldertree ul{list-style:none;margin:0;padding:0}
.foldertree ul ul{margin-left:9px;padding-left:14px;border-left:1px solid var(--line)}
.foldertree li{position:relative}
.ft-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px}
.foldertree>ul>li>.ft-row{font-weight:600}
.ft-ico{color:var(--acc);flex:0 0 auto}
.foldertree .is-file>.ft-row{color:var(--muted)}
.foldertree .is-file .ft-ico{color:var(--teal)}
.foldertree.sm{font-size:.86rem}
.foldertree.sm .ft-row{padding:3px 6px}

/* ---------- 10. van document naar de juiste plek ---------- */
.flow3{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(3,1fr);counter-reset:none}
.fl-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 18px;box-shadow:var(--shadow);position:relative}
.fl-num{position:absolute;top:-13px;left:22px;width:28px;height:28px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:.85rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.fl-step h3{margin:6px 0 12px;font-size:1rem}
.fl-body{min-height:112px}
.fl-note{margin:12px 0 0;font-size:.83rem;color:var(--muted)}

/* ---------- 11-13. archiefstructuur-selector ---------- */
.archsel{margin-top:1.8rem}
.archsel>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.archtabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.archtabs label{padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-size:.9rem;font-weight:600;cursor:pointer;color:var(--muted);
  transition:border-color .15s,background .15s,color .15s}
.archtabs label:hover{border-color:var(--acc);color:var(--acc)}
.archpanes{max-width:840px;margin:0 auto}
.archpane{display:none;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.archstruct{margin:0 0 14px;font-size:.88rem;color:var(--muted)}
.archstruct span{display:inline-block;font-weight:600;color:var(--ink);margin-right:6px}
.archstruct.sm{font-size:.8rem;margin-bottom:10px}
.archpane .btn{margin-top:18px}
#as-bedrijf:checked~.archtabs label[for="as-bedrijf"],#as-accountancy:checked~.archtabs label[for="as-accountancy"],
#as-bewind:checked~.archtabs label[for="as-bewind"],#as-advocatuur:checked~.archtabs label[for="as-advocatuur"],
#as-notariaat:checked~.archtabs label[for="as-notariaat"],#as-persoonlijk:checked~.archtabs label[for="as-persoonlijk"],
#as-business:checked~.archtabs label[for="as-business"],#as-protection:checked~.archtabs label[for="as-protection"],
#as-legal:checked~.archtabs label[for="as-legal"],#as-notary:checked~.archtabs label[for="as-notary"],
#as-personal:checked~.archtabs label[for="as-personal"],#as-unternehmen:checked~.archtabs label[for="as-unternehmen"],
#as-steuerberatung:checked~.archtabs label[for="as-steuerberatung"],#as-betreuung:checked~.archtabs label[for="as-betreuung"],
#as-kanzlei:checked~.archtabs label[for="as-kanzlei"],#as-notariat:checked~.archtabs label[for="as-notariat"],
#as-privat:checked~.archtabs label[for="as-privat"],#as-empresa:checked~.archtabs label[for="as-empresa"],
#as-asesoria:checked~.archtabs label[for="as-asesoria"],#as-curatela:checked~.archtabs label[for="as-curatela"],
#as-abogados:checked~.archtabs label[for="as-abogados"],#as-notarias:checked~.archtabs label[for="as-notarias"],
#as-entreprise:checked~.archtabs label[for="as-entreprise"],#as-expertise:checked~.archtabs label[for="as-expertise"],
#as-avocats:checked~.archtabs label[for="as-avocats"],#as-notaires:checked~.archtabs label[for="as-notaires"],
#as-personnel:checked~.archtabs label[for="as-personnel"]
{background:var(--acc);border-color:var(--acc);color:#fff}
#as-bedrijf:checked~.archpanes #ap-bedrijf,#as-accountancy:checked~.archpanes #ap-accountancy,
#as-bewind:checked~.archpanes #ap-bewind,#as-advocatuur:checked~.archpanes #ap-advocatuur,
#as-notariaat:checked~.archpanes #ap-notariaat,#as-persoonlijk:checked~.archpanes #ap-persoonlijk,
#as-business:checked~.archpanes #ap-business,#as-protection:checked~.archpanes #ap-protection,
#as-legal:checked~.archpanes #ap-legal,#as-notary:checked~.archpanes #ap-notary,
#as-personal:checked~.archpanes #ap-personal,#as-unternehmen:checked~.archpanes #ap-unternehmen,
#as-steuerberatung:checked~.archpanes #ap-steuerberatung,#as-betreuung:checked~.archpanes #ap-betreuung,
#as-kanzlei:checked~.archpanes #ap-kanzlei,#as-notariat:checked~.archpanes #ap-notariat,
#as-privat:checked~.archpanes #ap-privat,#as-empresa:checked~.archpanes #ap-empresa,
#as-asesoria:checked~.archpanes #ap-asesoria,#as-curatela:checked~.archpanes #ap-curatela,
#as-abogados:checked~.archpanes #ap-abogados,#as-notarias:checked~.archpanes #ap-notarias,
#as-entreprise:checked~.archpanes #ap-entreprise,#as-expertise:checked~.archpanes #ap-expertise,
#as-avocats:checked~.archpanes #ap-avocats,#as-notaires:checked~.archpanes #ap-notaires,
#as-personnel:checked~.archpanes #ap-personnel
{display:block}
.archsel>input:focus-visible~.archtabs label{outline:2px solid var(--acc);outline-offset:2px}

.emptyrule{margin-top:32px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.emptyrule h3{margin:0 0 8px}
.emptyrule p{margin:0;color:var(--muted);font-size:.94rem}
.er-trees{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.er-trees figure{margin:0}
.er-trees figcaption{font-size:.78rem;color:var(--muted);margin-bottom:6px;font-weight:600}

/* ---------- 14-15. velden en lijsten ---------- */
.fieldgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin-top:1.8rem}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}
.fcard h3{margin:0 0 14px;font-size:1rem}
.listname{margin:0 0 8px;font-weight:600;font-size:.9rem}
.listvals{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.listvals li{padding:7px 12px;border:1px solid var(--line);border-radius:8px;font-size:.88rem;background:var(--bg-alt)}
.listadd{margin:10px 0 0;font-size:.86rem;color:var(--acc);font-weight:600}
.fnote{max-width:760px;margin:1.1rem auto 0;color:var(--muted);font-size:.94rem;text-align:center}
.yearbox{margin-top:2rem;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:grid;grid-template-columns:auto 1fr;gap:8px 28px;align-items:center;max-width:760px;
  margin-left:auto;margin-right:auto}
.yearbox h3{grid-column:1/-1;margin:0}
.yearflow{display:flex;flex-direction:column;align-items:center;gap:4px}
.yb{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 16px;text-align:center;min-width:150px}
.yb span{display:block;font-size:.76rem;color:var(--muted)}
.yb b{font-size:.95rem}
.yarrow{color:var(--acc);font-size:1.1rem;line-height:1}
.yearbox>p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- 16 en 18. herkenning als keten ---------- */
.aichain{display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr;gap:14px;align-items:center;
  margin-top:1.8rem}
.ac-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow)}
.ac-arrow{color:var(--acc);font-size:1.3rem;text-align:center}
.ac-proposal{border-color:rgba(58,44,255,.35);background:linear-gradient(180deg,#fbfbff,#fff)}
.badge-soft.prop{background:var(--acc-soft);color:var(--acc-deep);margin-bottom:10px;display:inline-block}
.ac-actions{display:flex;gap:8px;margin-top:14px}
.ac-actions .btn{cursor:default}
.ac-h{margin:0 0 10px;font-size:1.02rem;color:var(--ink);font-weight:600}
.claimbar{margin-top:26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  background:linear-gradient(90deg,rgba(58,44,255,.06),rgba(27,217,131,.09));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.claimbar h3{margin:0 0 6px}
.claimbar p{margin:0;color:var(--muted);font-size:.94rem}
.availnote{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:.84rem;font-weight:600;color:var(--acc-deep);white-space:normal;max-width:260px}

/* ---------- 17. samenvatting ---------- */
.sumgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;margin-top:1.8rem;align-items:start}
.sumcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow)}
.sumlabel{margin:16px 0 6px;font-size:.8rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.sumtext{margin:0 0 16px;font-size:.95rem;background:var(--bg-alt);border-left:3px solid var(--green);
  border-radius:0 10px 10px 0;padding:12px 16px}
.sumproof h3{margin:0 0 12px;font-size:1rem}

/* ---------- screenshotframe (echt productbewijs) ---------- */
.appframe{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;box-shadow:var(--shadow);overflow:hidden}
.appframe img,.appframe video{display:block;width:100%;height:auto;border-radius:8px;background:var(--bg-alt)}
.appframe figcaption{font-size:.8rem;color:var(--muted);padding:10px 6px 4px}

/* ---------- 25. AnnTac in actie ---------- */
.acttabs-wrap{margin-top:1.8rem}
.acttabs-wrap>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.acttabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.acttabs label{padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-size:.9rem;font-weight:600;cursor:pointer;color:var(--muted);
  transition:border-color .15s,background .15s,color .15s}
.acttabs label:hover{border-color:var(--acc);color:var(--acc)}
.actpane{display:none;grid-template-columns:1fr 1.5fr;gap:26px;align-items:start}
.act-copy h3{margin:0 0 8px}
.act-copy p{margin:0;color:var(--muted);font-size:.95rem}
#ac-structuur:checked~.acttabs label[for="ac-structuur"],#ac-herkenning:checked~.acttabs label[for="ac-herkenning"],
#ac-zoeken:checked~.acttabs label[for="ac-zoeken"],#ac-structure:checked~.acttabs label[for="ac-structure"],
#ac-recognition:checked~.acttabs label[for="ac-recognition"],#ac-search:checked~.acttabs label[for="ac-search"],
#ac-struktur:checked~.acttabs label[for="ac-struktur"],#ac-erkennung:checked~.acttabs label[for="ac-erkennung"],
#ac-suche:checked~.acttabs label[for="ac-suche"],#ac-estructura:checked~.acttabs label[for="ac-estructura"],
#ac-reconocimiento:checked~.acttabs label[for="ac-reconocimiento"],#ac-busqueda:checked~.acttabs label[for="ac-busqueda"],
#ac-reconnaissance:checked~.acttabs label[for="ac-reconnaissance"],#ac-recherche:checked~.acttabs label[for="ac-recherche"]
{background:var(--acc);border-color:var(--acc);color:#fff}
#ac-structuur:checked~.actpanes #apn-structuur,#ac-herkenning:checked~.actpanes #apn-herkenning,
#ac-zoeken:checked~.actpanes #apn-zoeken,#ac-structure:checked~.actpanes #apn-structure,
#ac-recognition:checked~.actpanes #apn-recognition,#ac-search:checked~.actpanes #apn-search,
#ac-struktur:checked~.actpanes #apn-struktur,#ac-erkennung:checked~.actpanes #apn-erkennung,
#ac-suche:checked~.actpanes #apn-suche,#ac-estructura:checked~.actpanes #apn-estructura,
#ac-reconocimiento:checked~.actpanes #apn-reconocimiento,#ac-busqueda:checked~.actpanes #apn-busqueda,
#ac-reconnaissance:checked~.actpanes #apn-reconnaissance,#ac-recherche:checked~.actpanes #apn-recherche
{display:grid}
.acttabs-wrap>input:focus-visible~.acttabs label{outline:2px solid var(--acc);outline-offset:2px}
.searchline{margin-top:28px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.searchline h3{margin:0 0 8px}
.searchline p{margin:0;color:var(--muted);font-size:.94rem}
.searchsteps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.searchsteps li{background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:.85rem;font-weight:600}
.searchsteps li+li::before{content:"\2192";color:var(--acc);margin-right:10px;font-weight:400}

/* ---------- 26. hoe AnnTac werkt ---------- */
.howsteps{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.howsteps li{position:relative;padding-top:8px}
.hw-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc-deep);font-weight:700;font-size:.95rem;margin-bottom:12px}
.howsteps h3{margin:0 0 6px;font-size:1rem}
.howsteps p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- 27. branchekaarten ---------- */
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.8rem}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.bcard h3{margin:0 0 8px}
.bcard>p{margin:0 0 10px;color:var(--muted);font-size:.92rem}
.bcard .foldertree{margin-bottom:16px}
.bcard-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.bcard-cta .more{font-size:.86rem}

/* ---------- 31. productladder ---------- */
.pgroup{margin-top:2rem}
.pg-head h3{margin:0 0 4px;font-size:1.12rem}
.pg-head p{margin:0 0 16px;color:var(--muted);font-size:.94rem}
.pg-cards{display:grid;gap:20px}
.pg-cards[data-n="2"]{grid-template-columns:1fr 1fr}
.pg-cards[data-n="1"]{grid-template-columns:minmax(0,470px)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.pcard .tc-icon{height:72px;width:auto;margin:0 0 12px}
.pcard h4{margin:0 0 6px;font-size:1.1rem;font-family:"Gilroy","Poppins",sans-serif}
.pcard>p{margin:0 0 8px;color:var(--muted);font-size:.92rem}
.pcard .price-line{font-weight:600;color:var(--ink);margin-bottom:14px}
.pcard-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}

/* ---------- 34. veiligheid ---------- */
.secstrip{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.seclist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seclist li{font-size:.9rem;color:var(--muted)}
.seclist b{display:block;color:var(--ink);font-size:.94rem;margin-bottom:2px}
.secnote{margin-top:1.4rem;font-size:.9rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;max-width:980px;margin:1.6rem auto 0}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 34px 16px 2px;font-weight:600;font-size:.98rem;
  list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.3rem;
  color:var(--acc);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.faq details p{margin:0 0 18px;color:var(--muted);font-size:.95rem;padding-right:34px}
@media(max-width:760px){
  .faq-grid{grid-template-columns:1fr;gap:0}
  .faq-grid .faq+ .faq{border-top:0}
}

/* ---------- /start handoff ---------- */
.chosentpl{margin:10px 0 0;font-size:.92rem;color:var(--muted)}
.chosentpl b{color:var(--acc-deep)}
.startopts{display:grid;gap:14px;margin-top:1.2rem}
.startopt{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);
  transition:border-color .15s,transform .12s}
.startopt:hover{border-color:var(--acc);transform:translateY(-1px)}
.startopt h3{margin:0 0 4px;font-size:1rem;color:var(--acc)}
.startopt p{margin:0;color:var(--muted);font-size:.92rem}
.startnote{margin-top:1.4rem;font-size:.9rem;color:var(--muted)}

/* ---------- focus states (toegankelijkheid) ---------- */
a:focus-visible,button:focus-visible,label:focus-visible,summary:focus-visible,
.startopt:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}

/* ---------- responsive: tablet ---------- */
@media(max-width:1080px){
  .btn-quiet.hide-sm{display:none}
  .flow3{grid-template-columns:1fr}
  .fl-body{min-height:0}
  .aichain{grid-template-columns:1fr;gap:10px}
  .ac-arrow{transform:rotate(90deg);font-size:1.1rem}
  .howsteps{grid-template-columns:repeat(2,1fr)}
  .bcards{grid-template-columns:repeat(2,1fr)}
  .actpane{grid-template-columns:1fr}
  #ac-structuur:checked~.actpanes #apn-structuur,#ac-herkenning:checked~.actpanes #apn-herkenning,
  #ac-zoeken:checked~.actpanes #apn-zoeken,#ac-structure:checked~.actpanes #apn-structure,
  #ac-recognition:checked~.actpanes #apn-recognition,#ac-search:checked~.actpanes #apn-search,
  #ac-struktur:checked~.actpanes #apn-struktur,#ac-erkennung:checked~.actpanes #apn-erkennung,
  #ac-suche:checked~.actpanes #apn-suche,#ac-estructura:checked~.actpanes #apn-estructura,
  #ac-reconocimiento:checked~.actpanes #apn-reconocimiento,#ac-busqueda:checked~.actpanes #apn-busqueda,
  #ac-reconnaissance:checked~.actpanes #apn-reconnaissance,#ac-recherche:checked~.actpanes #apn-recherche
  {display:grid}
}

/* ---------- responsive: mobiel ---------- */
@media(max-width:900px){
  .quotes.qsmall{grid-template-columns:1fr}
  .quotes.qsmall blockquote:nth-child(n+2){display:none}
  .emptyrule,.fieldgrid,.sumgrid,.searchline,.claimbar,.secstrip{grid-template-columns:1fr}
  .claimbar .availnote{max-width:none}
  .seclist{grid-template-columns:1fr}
  .yearbox{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pg-cards,.pg-cards[data-n="2"],.pg-cards[data-n="1"]{grid-template-columns:1fr}
}
@media(max-width:700px){
  .howsteps,.bcards{grid-template-columns:1fr}
  .er-trees{grid-template-columns:1fr 1fr}
  /* Tabs blijven goed aantikbaar op mobiel */
  .archtabs label,.acttabs label{padding:11px 16px;font-size:.88rem;min-height:44px;
    display:flex;align-items:center}
  .archtabs,.acttabs{justify-content:flex-start}
  .archpane{padding:18px}
  .foldertree{font-size:.88rem}
  .fieldrows .fr{grid-template-columns:1fr;gap:0;padding:8px 0}
  .trustrow{gap:6px 14px;font-size:.84rem}
  .searchsteps{gap:8px}
}

/* Terughoudend met beweging wanneer de bezoeker dat vraagt */
@media(prefers-reduced-motion:reduce){
  .startopt:hover,.btn-primary:hover{transform:none}
}

/* ---------- Base: inrichtstappen en wat er bewust niet in zit ---------- */
.basesteps li{display:flex;gap:14px;align-items:flex-start;padding-top:0}
.basesteps .hw-num{margin-bottom:0;flex:0 0 auto}
.basesteps p{margin:5px 0 0;font-size:.95rem;color:var(--ink)}
.notincluded{margin-top:2rem;max-width:760px;margin-left:auto;margin-right:auto;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px}
.notincluded h3{margin:0 0 6px;font-size:1rem}
.notincluded p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- mobiele correctie: gridkinderen mogen krimpen ----------
   Grid-items krijgen standaard min-width:auto, waardoor een diepe
   boomstructuur de kolom breder maakte dan het scherm. */
.emptyrule>*,.er-trees>*,.fieldgrid>*,.sumgrid>*,.searchline>*,.claimbar>*,
.secstrip>*,.aichain>*,.actpane>*,.flow3>*,.bcards>*,.pg-cards>*,.howsteps>*{min-width:0}
.foldertree{overflow-x:auto}
@media(max-width:700px){
  .er-trees{grid-template-columns:1fr;gap:14px}
}

/* ---------- branchepagina: concreet archiefvoorbeeld onder de hero ---------- */
.branchexample{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.branchexample>*{min-width:0}
.branchexample h2{margin-bottom:8px}
.be-tree{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}
.bcard .foldertree{min-height:92px}
@media(max-width:900px){.branchexample{grid-template-columns:1fr;gap:22px}}

/* ---------- correctie productlader ----------
   De kaart is een flexkolom; zonder align-self rekte de browser het
   productlogo op tot de volle kaartbreedte en werd het platgedrukt. */
.pcard .tc-icon{display:block;align-self:flex-start;width:auto;height:84px;
  max-width:100%;object-fit:contain;margin:0 0 14px}
.pg-cards{align-items:stretch}

/* ---------- twee varianten naast elkaar (bewindvoering) ---------- */
.archpane.wide{max-width:840px}
.archvars{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.archvars>*{min-width:0}
.archvar{margin:0;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px}
.archvar figcaption{font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--acc-deep);margin-bottom:8px}
.archvar .archstruct.sm{margin-bottom:10px;font-size:.78rem}
.be-tree .archvars{grid-template-columns:1fr 1fr}
@media(max-width:900px){
  .archvars,.be-tree .archvars{grid-template-columns:1fr;gap:14px}
}

/* ---------- 28 aug: USP-iconen bij de Orbit-features ---------- */
.uspgrid{gap:26px 24px;margin-top:1.6rem}
.uspblock{text-align:left}
.usp-ico{display:block;width:76px;height:76px;object-fit:contain;margin:0 0 12px}
.uspblock h3{margin:0 0 6px}
.uspblock p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- productgroepen met een enkele kaart naast elkaar ---------- */
.pgroup-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:2rem}
.pgroup-row>*{min-width:0;margin-top:0}
.pgroup-row .pg-cards[data-n="1"]{grid-template-columns:1fr}
@media(max-width:900px){.pgroup-row{grid-template-columns:1fr;gap:2rem}}

/* ---------- nieuwspagina links uitlijnen ---------- */
/* Nieuwspagina links uitlijnen: de lijst gebruikt de volle container en de
   losse berichten houden een prettige leesbreedte. */
.newslist{max-width:var(--maxw)}
.newslist .newsitem{max-width:760px}

/* ---------- klantcitaten: kop plus schuifbare rij (28 aug) ---------- */
.proofbar{padding:26px 0 28px}
.proof-h{font-size:1.05rem;margin:0 0 14px;color:var(--muted);font-family:"Poppins",sans-serif;
  font-weight:600;letter-spacing:.01em}
.quotestrip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 14px;margin:0 -2px;scrollbar-width:thin}
.quotestrip blockquote{flex:0 0 clamp(240px,27%,320px);scroll-snap-align:start;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.quotestrip blockquote p{margin:0 0 10px;font-size:.94rem}
.quotestrip blockquote cite{margin-top:auto;font-style:normal;font-size:.82rem;color:var(--muted)}
.quotestrip:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:8px}
.quotestrip::-webkit-scrollbar{height:8px}
.quotestrip::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
@media(max-width:700px){
  .quotestrip blockquote{flex:0 0 78%}
}

/* ============================================================
   28 augustus, avond: consistentielaag.
   Eén set regels voor koppen, kaarten en witruimte, zodat de hele
   site dezelfde uitstraling krijgt. Deze laag staat bewust achteraan
   en overschrijft de losse uitzonderingen die in de loop van de bouw
   waren ontstaan.
   ============================================================ */

/* ---------- ritme ---------- */
.section{padding:64px 0}
.section + .section{padding-top:64px}
.pagehead{padding-bottom:8px}

/* Guardianship story, Playbook and the OnView integration. */
.story-copy{max-width:840px}
.story-copy p{font-size:1.04rem;line-height:1.8}
.story-credit{color:var(--muted);font-size:.9rem!important;font-weight:600}
.playbook-panel{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.playbook-panel>div{max-width:660px}
.playbook-panel .eyebrow{color:var(--acc);font-size:.78rem;font-weight:700;letter-spacing:.13em}
.playbook-panel .note{color:var(--muted);font-size:.86rem}
.playbook-cover{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.playbook-cover img{display:block;width:100%}
.integration-teaser{max-width:840px}
.integration-hero{padding:76px 0 70px}
.integration-hero h1{max-width:800px}
.integration-hero .lead{max-width:740px}
.integration-brands{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-weight:700}
.integration-brands span{padding:7px 14px;border-radius:9px;background:#e9f2ff;color:#1761ad}
.integration-brands span:last-child{background:#e7f9ee;color:#14744d}
.integration-brands b{font-size:1.3rem;color:var(--muted)}
.integration-step.alt{background:var(--bg-alt)}
.integration-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.integration-step.flip .integration-step-copy{order:2}
.integration-step.flip .integration-art{order:1}
.integration-step-copy{max-width:550px}
.integration-step-copy p{font-size:1.02rem;line-height:1.8;color:var(--muted)}
.step-count{display:inline-block;color:var(--acc);font-size:.82rem;font-weight:700;letter-spacing:.13em;margin-bottom:12px}
.integration-art{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--card-shadow)}
.integration-art img{display:block;width:100%;height:auto}
.integration-benefits ul{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:24px 0 32px;padding:0}
.integration-benefits li{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff;box-shadow:var(--card-shadow)}
.integration-benefits li:before{content:"✓";display:block;color:#14744d;font-size:1.4rem;font-weight:700;margin-bottom:8px}
.integration-benefits p{margin-top:18px}
.playbook-dialog{width:min(92vw,540px);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:0;box-shadow:0 25px 90px rgba(24,26,42,.23);color:var(--ink);font:inherit}
.playbook-dialog::backdrop{background:rgba(24,26,42,.56)}
.playbook-dialog-inner{position:relative;padding:32px}
.playbook-dialog p{color:var(--muted)}
.playbook-dialog-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--acc-soft);color:var(--acc);font-size:1.6rem;margin-bottom:18px}
.playbook-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--muted);font-size:1.8rem;line-height:1;cursor:pointer;padding:6px 10px}
@media(max-width:800px){
  .playbook-panel,.integration-step-grid{grid-template-columns:1fr;gap:26px}
  .integration-step.flip .integration-step-copy,.integration-step.flip .integration-art{order:initial}
  .integration-benefits ul{grid-template-columns:1fr}
  .integration-hero{padding:56px 0 50px}
}

/* ---------- sectiekoppen: overal hetzelfde ---------- */
h2{font-size:clamp(1.42rem,2.3vw,1.78rem);line-height:1.22;margin:0 0 10px;color:var(--ink)}
.container > h2.center{margin-bottom:8px}
.container > h2.center + .sub,.container > p.center.sub{margin-bottom:2.4rem;font-size:1.02rem}
.sub{line-height:1.55}

/* ---------- kaartkoppen: één maat, één kleur, één gewicht ---------- */
.featblock h3,.uspblock h3,.bcard h3,.fl-step h3,.fcard h3,.act-copy h3,
.sumproof h3,.howsteps h3,.startopt h3,.notincluded h3,.emptyrule h3,
.claimbar h3,.searchline h3,.yearbox h3,.pg-head h3,.pcard h4,
.partners .featblock h3,.pillar h3,.sector h3,.assistbox h2,.btwband h3{
  font-family:"Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.02rem;font-weight:600;line-height:1.35;letter-spacing:0;
  color:var(--ink);background:none;-webkit-text-fill-color:currentColor;
  margin:0 0 8px}
.pg-head h3{font-size:1.08rem}
.claimbar h3,.searchline h3,.emptyrule h3,.yearbox h3{font-size:1.08rem}

/* ---------- kaartvlakken: dezelfde rand, ronding, ruimte en schaduw ---------- */
:root{--card-shadow:0 2px 10px rgba(24,26,42,.05)}
.featblock,.uspblock,.fl-step,.fcard,.bcard,.pcard,.archpane,.sumcard,
.ac-step,.startopt,.be-tree,.emptyrule,.searchline,.appframe,.card,
.assistbox,.quotestrip blockquote,.notincluded{
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--card-shadow)}
.featblock,.uspblock,.fl-step,.fcard,.bcard,.pcard,.archpane,.sumcard,
.ac-step,.be-tree,.assistbox{padding:22px}
.startopt,.quotestrip blockquote{padding:18px 20px}
.emptyrule,.searchline,.claimbar{padding:22px 24px}

/* ---------- rasters: gelijke tussenruimte ---------- */
.grid2,.grid3,.grid4,.uspgrid,.bcards,.pg-cards,.flow3,.howsteps,
.fieldgrid,.sumgrid,.pgroup-row{gap:20px}
.uspgrid{gap:24px 20px}

/* ---------- accentkleur alleen nog voor links en knoppen ---------- */
.startopt h3{color:var(--ink)}
.price-line{color:var(--ink)}
.more{font-weight:600}

/* ---------- klantcitaten in dezelfde sectieopmaak ---------- */
.proofbar{background:var(--bg-alt);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:44px 0 40px}
.proofbar h2{text-align:center}
.proofbar .quotestrip{margin-top:1.6rem}
.quotestrip blockquote{box-shadow:var(--card-shadow)}

/* ---------- tijdwinstregel onder het driestapsblok ---------- */
.flow-time{margin:1.6rem auto 0;max-width:600px;text-align:center;
  font-size:1.02rem;font-weight:600;color:var(--ink)}

/* ---------- kleine rustpunten ---------- */
.fl-note,.micro,.example-note{color:var(--muted)}
.appframe{padding:10px}
.specbar{border-radius:var(--radius)}
@media(max-width:700px){
  .section{padding:44px 0}
  .section + .section{padding-top:44px}
  .proofbar{padding:34px 0 30px}
}

/* De tekst naast een schermafbeelding stond bovenaan tegen een hoog beeld aan;
   verticaal centreren houdt het rustiger. */
@media(min-width:1081px){
  .actpane{align-items:center}
  .act-copy{position:sticky;top:96px}
}

/* ---------- kanalen: waar documenten vandaan komen ---------- */
.chans{margin-top:1.8rem}
.chan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--card-shadow)}
.chan h3{font-size:1.02rem;font-weight:600;color:var(--ink);margin:0 0 6px}
.chan p{margin:0;color:var(--muted);font-size:.93rem}

/* ---------- Orbit prominent op de homepage ---------- */
.orbitsec .orbit-head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  margin-bottom:2.2rem}
.orbitsec .orbit-head>*{min-width:0}
.orbit-mark{width:220px;height:auto;display:block}
.orbitsec .orbit-head h2{margin:0 0 8px}
.orbitsec .orbit-head .sub{margin:0 0 16px;max-width:640px}
.orbit-problem{max-width:690px;margin:0 0 18px;padding:14px 16px;border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0;background:rgba(2,141,173,.07);color:var(--ink);font-size:.92rem;line-height:1.6}
.orbitsec .orbit-head p:last-child{margin:0}
@media(max-width:900px){
  .orbitsec .orbit-head{grid-template-columns:1fr;gap:18px;text-align:left}
  .orbit-mark{width:130px}
}

/* ============================================================
   Tweeluik: documentstroom en communicatiestroom komen samen.
   Dit blok mag opvallen; het is het onderscheidende verhaal.
   ============================================================ */
.duo{margin-top:2.2rem}
.duo-lanes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo-lanes>*{min-width:0}
.lane{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:24px 26px 22px;box-shadow:0 6px 24px rgba(24,26,42,.06);overflow:hidden}
.lane::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.lane-doc::before{background:linear-gradient(90deg,var(--acc),#6C7AFF)}
.lane-orbit::before{background:linear-gradient(90deg,var(--teal),var(--green))}
.lane-tag{display:flex;align-items:center;gap:9px;margin:4px 0 16px;font-weight:700;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.lane-doc .lane-tag{color:var(--acc)}
.lane-orbit .lane-tag{color:var(--teal)}
.lane-steps{list-style:none;margin:0;padding:0;counter-reset:lane}
.lane-steps li{counter-increment:lane;position:relative;padding:0 0 18px 40px;font-size:.98rem;
  line-height:1.45;color:var(--ink)}
.lane-steps li:last-child{padding-bottom:0}
.lane-steps li::before{content:counter(lane);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff}
.lane-doc .lane-steps li::before{background:var(--acc)}
.lane-orbit .lane-steps li::before{background:var(--teal)}
.lane-steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:26px;bottom:6px;
  width:1.5px;background:var(--line)}

.duo-merge{display:block;width:100%;height:64px;margin:0}
.duo-result{position:relative;text-align:center;border-radius:18px;padding:28px 30px;
  background:linear-gradient(135deg,rgba(58,44,255,.07),rgba(2,141,173,.07) 55%,rgba(27,217,131,.10));
  border:1px solid var(--line)}
.duo-result h3{font-family:"Gilroy","Poppins",sans-serif;font-size:clamp(1.2rem,2vw,1.5rem);
  font-weight:700;margin:0 0 8px;color:var(--ink)}
.duo-result p{margin:0 auto 18px;max-width:620px;color:var(--muted)}
.duo-result .btn{margin:0}

@media(max-width:900px){
  .duo-lanes{grid-template-columns:1fr;gap:16px}
  .duo-merge{height:40px}
  .duo-merge path:first-of-type{d:path("M400 0 C400 20 400 20 400 40")}
  .duo-merge path:last-of-type{display:none}
  .lane{padding:20px 22px}
}

/* ============================================================
   Phase 11: trial signup, proof points and audience cards.
   ============================================================ */

/* ---------- skip link ---------- */
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acc);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skiplink:focus{left:0}

/* ---------- hero microcopy ---------- */
.heromicro{margin:12px 0 0;max-width:520px;font-size:.9rem}

/* ---------- drie bewijspunten ---------- */
.proof3sec{padding:40px 0}
.proof3{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--card-shadow)}
.proof3 h3{font-size:1.02rem;font-weight:600;color:var(--ink);margin:0 0 6px}
.proof3 p{margin:0;color:var(--muted);font-size:.93rem}

/* ---------- doelgroepkaarten ---------- */
.audcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.8rem}
.audcards>*{min-width:0}
.audcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--card-shadow);display:flex;flex-direction:column}
.audcard h3{font-size:1.02rem;font-weight:600;color:var(--ink);margin:0 0 6px}
.audcard p{margin:0 0 14px;color:var(--muted);font-size:.93rem}
.aud-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
@media(max-width:900px){.audcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.audcards{grid-template-columns:1fr}}

/* ---------- interactive document journey ---------- */
.journey-section{overflow:hidden}
.journey-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.journey-head .sub{max-width:700px;margin-bottom:0}
.eyebrow{display:inline-block;margin-bottom:9px;color:var(--acc);font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.journey-choices{display:flex;gap:8px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:999px}
.journey-choice{appearance:none;border:0;border-radius:999px;background:transparent;color:var(--muted);
  padding:9px 15px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.journey-choice:hover,.journey-choice:focus-visible{color:var(--ink)}
.journey-choice:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.journey-choice.is-active{background:var(--acc);color:#fff;box-shadow:0 5px 16px rgba(58,44,255,.2)}
.journey{position:relative;display:grid;grid-template-columns:1fr 62px 1fr 62px 1.25fr;
  align-items:center;margin-top:30px;padding:26px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(135deg,#fff 0%,#f8f8ff 58%,#effcf7 100%);box-shadow:var(--card-shadow)}
.journey article{min-height:108px;display:flex;flex-direction:column;justify-content:center;padding:20px;
  background:#fff;border:1px solid var(--line);border-radius:16px}
.journey article span{margin-bottom:8px;color:var(--muted);font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.journey article b{font-size:.96rem;line-height:1.4;overflow-wrap:anywhere}
.journey i{position:relative;height:2px;background:linear-gradient(90deg,var(--acc),var(--teal))}
.journey i::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--teal);border-right:2px solid var(--teal);transform:translateY(-50%) rotate(45deg)}
.journey-result{border-color:rgba(27,217,131,.45)!important}
.journey.is-changing article{animation:journeyPulse .32s ease}
@keyframes journeyPulse{50%{transform:translateY(-3px);box-shadow:0 12px 24px rgba(58,44,255,.09)}}
@media(prefers-reduced-motion:reduce){.journey.is-changing article{animation:none}}
@media(max-width:850px){
  .journey-head{grid-template-columns:1fr;align-items:start}
  .journey-choices{width:max-content;max-width:100%;overflow-x:auto}
  .journey{grid-template-columns:1fr;gap:12px;padding:18px}
  .journey i{width:2px;height:28px;margin:auto;background:linear-gradient(var(--acc),var(--teal))}
  .journey i::after{right:50%;top:auto;bottom:-1px;transform:translateX(50%) rotate(135deg)}
}

/* ---------- mobile conversion bar ---------- */
.mobile-conversion{display:none}
@media(max-width:700px){
  body.home{padding-bottom:76px}
  .mobile-conversion{position:fixed;z-index:60;left:10px;right:10px;bottom:10px;display:flex;
    align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 15px;
    background:rgba(24,26,42,.94);color:#fff;border:1px solid rgba(255,255,255,.16);
    border-radius:16px;box-shadow:0 16px 40px rgba(12,13,24,.28);backdrop-filter:blur(12px)}
  .mobile-conversion span{font-size:.79rem;font-weight:600;line-height:1.3}
  .mobile-conversion .btn{white-space:nowrap}
}

/* ---------- native website forms connected to Zoho CRM ---------- */
.crm-form-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 16px 42px rgba(35,29,112,.09)}
.crm-form-card>h2{margin-bottom:22px}
.lead-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.lead-form label{display:flex;flex-direction:column;gap:7px;color:var(--ink);font-size:.88rem;font-weight:600}
.lead-form label>span b{color:#d33;font-weight:700}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;min-height:46px;padding:11px 13px;
  border:1px solid #d8d9e7;border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-weight:400;
  transition:border-color .15s ease,box-shadow .15s ease}
.lead-form textarea{min-height:128px;resize:vertical}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(58,44,255,.11)}
.lead-form .span-2{grid-column:1/-1}
.lead-form .consent{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px;
  color:var(--muted);font-size:.8rem;font-weight:400;line-height:1.5}
.lead-form .consent input{width:19px;min-height:19px;margin-top:1px;padding:0}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}
.form-status{margin:.8rem 0 0;color:var(--muted);font-size:.82rem}
.form-status.is-error{color:#b42338}
.form-status.is-success{color:#067647;font-weight:600}
.support-route{margin:18px 0 0}
.demo-lead-wrap{max-width:820px}
.support-form-wrap{max-width:860px;margin:34px auto 0}
.support-case-form{background:linear-gradient(155deg,#fff,#fafaff)}
.support-case-form>p{color:var(--muted)}
.zoho-support-form{display:block;width:100%;height:1060px;margin-top:22px;border:0;border-radius:14px;background:#fff}
.support-form-note{margin:12px 0 0;font-size:.82rem}
.support-fallback{margin:16px 0 0;font-size:.9rem}
.thanks-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#f7f7ff,#effcf7)}
.thanks-card{width:min(680px,100%);padding:44px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:24px;box-shadow:0 18px 50px rgba(35,29,112,.12)}
.thanks-card img{height:auto;margin:0 auto 28px}.thanks-card p:not(.eyebrow){color:var(--muted);line-height:1.65}
.thanks-card .btn{margin-top:12px}
@media(max-width:700px){
  .crm-form-card{padding:20px 17px;border-radius:18px}
  .lead-form-grid{grid-template-columns:1fr;gap:14px}
  .lead-form .span-2{grid-column:auto}
  .zoho-support-form{height:1200px}
  .thanks-card{padding:30px 20px}
}

/* ---------- trialaanvraag ---------- */
.nopay{font-weight:600;color:var(--ink);margin:0}
.choicecard:hover{border-color:var(--acc);transform:translateY(-1px)}
.choicecard:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.cc-h{font-weight:600;font-size:1.04rem;color:var(--ink)}
.cc-b{color:var(--muted);font-size:.93rem}
.trialafter{margin-top:1.4rem;color:var(--muted);font-size:.95rem}
.mt-s{margin-top:14px}
@media(max-width:700px){
  }

/* ---------------------------------------------------------------
   The hidden attribute must win from component display rules such as
   .btn{display:inline-flex}. Without this the trial back button and the
   chosen-label are visible before a choice has been made.
   --------------------------------------------------------------- */
[hidden]{display:none !important}

/* ---------------------------------------------------------------
   Duo block: a subtle product logo per lane and the merged dossier
   as a small folder tree inside the result panel.
   --------------------------------------------------------------- */
.lane{overflow:hidden}
/* The product logos sit in their own tinted panel at the top right of the
   lane, full strength so they stay readable, with the lane tag given room. */
.lane-logo{position:absolute;top:14px;right:16px;width:auto;height:82px;
  opacity:1;pointer-events:none;object-fit:contain;object-position:top right;
  padding:6px 8px;border-radius:14px;background:linear-gradient(180deg,#fff,#f7f8fd)}
.lane-orbit .lane-logo{height:88px}
.lane-tag,.lane-steps{position:relative}
.lane-tag{padding-right:112px}

.duo-tree{margin:0 auto 20px;max-width:420px;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:var(--card-shadow)}
.duo-tree-h{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.duo-tree .foldertree{margin:0;overflow-x:auto}
.duo-tree .foldertree .ft-name{font-size:.9rem}
.duo-tree .ft-ico.msg{color:var(--teal)}
.duo-tree .ft-ico.task{color:var(--green)}

@media (max-width:640px){
  .lane-logo{height:56px;top:10px;right:12px;padding:4px 6px}
  .lane-orbit .lane-logo{height:60px}
  .lane-tag{padding-right:74px}
  .duo-tree{padding:14px}
}

/* ---------------------------------------------------------------
   Footer: the legal links moved out of the company column into their
   own bar at the bottom, so the five columns stay evenly filled.
   --------------------------------------------------------------- */
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 24px}
.footer-legal ul{display:flex;flex-wrap:wrap;gap:6px 18px;
  list-style:none;margin:0;padding:0}
.footer-legal a{font-size:.82rem;color:var(--muted);text-decoration:none}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--ink);
  text-decoration:underline}

@media (max-width:760px){
  .footer-bottom{justify-content:flex-start}
  .footer-legal ul{gap:6px 14px}
}

/* ---------------------------------------------------------------
   Legal pages: long running text needs a narrower measure and more
   air between the articles than a normal content page.
   --------------------------------------------------------------- */
.legaltext{max-width:760px}
.legaltext h2{margin:2.2rem 0 .6rem;font-size:1.08rem}
.legaltext h2:first-of-type{margin-top:0}
.legaltext p{margin:0 0 .9rem;line-height:1.7}
.legaltext .prevailing{padding:14px 16px;margin:0 0 1.8rem;
  border-left:3px solid var(--acc);background:var(--bg-alt);
  border-radius:0 10px 10px 0;color:var(--muted);font-size:.92rem}

/* ---------------------------------------------------------------
   Signup embed sizing, per the measurements supplied by AnnTac.
   --------------------------------------------------------------- */
@media (max-width:768px){
  }
@media (max-width:480px){
  }

/* ---------------------------------------------------------------
   Start page. Two primary cards, an optional grid with all six
   branches, and one calm form shell. The whole card is the control,
   so the visible button is a span rather than a nested button.
   --------------------------------------------------------------- */
.choice-h{font-size:1.12rem;margin:0 0 1rem}
.branch-h{font-size:.95rem;margin:1.6rem 0 .9rem;color:var(--muted)}
.starthead{padding:46px 0 30px;text-align:center}
.start-intro{max-width:760px;margin:0 auto}
.start-intro .lead{margin-left:auto;margin-right:auto}
.start-intro .nopay{display:inline-flex;align-items:center;gap:8px;margin:.4rem 0 0;
  padding:7px 13px;border-radius:999px;background:rgba(27,217,131,.11);color:#126440;font-size:.88rem;font-weight:600}
.start-intro .nopay::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
/* The header is sticky, so leave room for it when scrolling to the form. */
#trial-form{scroll-margin-top:96px}

.trialchoice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trialchoice>*,.branchgrid>*{min-width:0}

.choicecard{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;padding:22px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--card-shadow);cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.choicecard:hover,.branchcard:hover{border-color:var(--acc)}
.choicecard:focus-visible,.branchcard:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.choicecard.is-selected,.branchcard.is-selected{border-color:var(--acc);
  background:rgba(85,80,255,.045)}

.cc-h{font-weight:600;font-size:1.04rem;color:var(--ink)}
.cc-b{color:var(--muted);font-size:.93rem;line-height:1.5}
.cc-cta{margin-top:12px;pointer-events:none}
.choicecard.is-selected .cc-cta{background:var(--acc);border-color:var(--acc);color:#fff}

.branchgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.branchcard{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:16px 18px;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.bc-h{font-weight:600;font-size:.95rem;color:var(--ink)}

/* Photorealistic branch images: contained, never cropped, at the top of the
   card. Sizes per the brief: about 128 on desktop, 104 on tablet, 92 on phone. */
.bcard-ico{width:128px;height:128px;display:block;flex:none;object-fit:contain}
.choicecard .bcard-ico{margin-bottom:8px}
.branchcard{align-items:center;text-align:center}
@media (max-width:1024px){
  .bcard-ico{width:104px;height:104px}
}
@media (max-width:650px){
  .bcard-ico{width:92px;height:92px}
}

.chosentpl{margin:0 0 .9rem;color:var(--muted);font-size:.95rem}
.chosentpl b{color:var(--ink)}
.trialafter{margin-top:1.2rem;color:var(--muted);font-size:.95rem}
#trial-back{margin-top:1.2rem}

/* Public Creator embeds stay isolated in a clean, branded shell. */
.creator-form-shell{width:100%;max-width:760px;min-height:620px;margin:16px 0 0;
  overflow:hidden;background:#fff;border:1px solid #ecebff;border-radius:20px}
.creator-form-shell iframe{display:block;width:100%;height:620px;border:0}
#trial-signup-panel{scroll-margin-top:96px}
.trial-layout{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,760px);gap:28px;align-items:start;justify-content:center}
.trial-context{position:sticky;top:94px;padding:26px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(155deg,#fff 0%,#f8f8ff 68%,#f0fbf6 100%);box-shadow:var(--shadow)}
.trial-kicker{display:inline-block;margin:0 0 12px;padding:6px 11px;border-radius:999px;
  background:var(--acc);color:#fff;font-size:.78rem;font-weight:700}
.selected-choice{margin:0 0 20px;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.035em}
.selected-choice b{display:block;margin-top:4px;color:var(--ink);font-size:1.08rem;text-transform:none;letter-spacing:0}
.trial-mini-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:13px}
.trial-mini-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.trial-mini-steps li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc-deep);font-weight:700;font-size:.82rem}
.trial-mini-steps b{display:block;font-size:.86rem}
.trial-mini-steps small{display:block;color:var(--muted);font-size:.74rem;line-height:1.45}
.trial-context .trialafter{margin:16px 0 8px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;line-height:1.55}
.trial-context .micro{font-size:.75rem;line-height:1.55}
.change-selection{margin-top:.65rem;width:100%}
.trial-form-card{min-width:0;padding:0;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 16px 42px rgba(35,29,112,.11);overflow:hidden}
#anntac-creator-trial-form{padding:28px}
#anntac-creator-trial-form h2{margin:0 0 22px;font-size:1.45rem}
#anntac-creator-trial-form .trial-company-field small{color:var(--muted);font-size:.75rem;font-weight:400}
#anntac-creator-trial-form .consent a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
#orbit-waitlist-cta[disabled]{opacity:.55;cursor:not-allowed}
#orbit-waitlist-frame{margin-top:20px}
.orbit-native-shell{width:100%;max-width:820px;overflow:hidden;border:1px solid var(--line);
  border-radius:24px;background:#fff;box-shadow:0 18px 48px rgba(35,29,112,.10)}
.orbit-native-shell::before{display:block;height:5px;content:"";
  background:linear-gradient(90deg,var(--acc),#6c7aff 55%,#1bd983)}
.orbit-native-form{padding:30px}
.orbit-native-head{margin-bottom:22px}
.orbit-native-head h3{margin:0 0 8px;font-size:clamp(1.4rem,3vw,1.85rem)}
.orbit-native-head p{max-width:650px;margin:0;color:var(--muted);line-height:1.65}
.orbit-native-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.orbit-native-grid label{display:flex;flex-direction:column;gap:7px;min-width:0}
.orbit-native-grid label span{font-size:.88rem;font-weight:650}
.orbit-native-grid label b{color:#d33045}
.orbit-native-grid input{width:100%;min-height:49px;padding:11px 13px;border:1px solid #dfe2f0;
  border-radius:11px;background:#fff;color:var(--ink);font:inherit;
  transition:border-color .15s ease,box-shadow .15s ease}
.orbit-native-grid input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px rgba(81,60,255,.11)}
.orbit-native-consent{display:grid;grid-template-columns:21px 1fr;gap:10px;align-items:start;margin:22px 0}
.orbit-native-consent input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--acc)}
.orbit-native-consent label{color:var(--muted);font-size:.84rem;line-height:1.55}
.orbit-native-consent a{color:var(--acc);text-underline-offset:2px}
.orbit-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}
.orbit-native-actions{display:flex;align-items:center;gap:14px}
.orbit-native-status{min-height:1.5em;margin:0;color:var(--muted);font-size:.82rem}
.orbit-native-status.is-error{color:#b42338}
.orbit-native-success{padding:50px 32px;text-align:center}
.orbit-native-success>span{display:grid;width:68px;height:68px;margin:0 auto 18px;place-items:center;
  border-radius:50%;background:#edfbf4;color:#159863;font-size:2rem;font-weight:700}
.orbit-native-success h3{margin:0 0 10px;font-size:clamp(1.45rem,3vw,1.9rem)}
.orbit-native-success p{max-width:590px;margin:0 auto;color:var(--muted);line-height:1.7}
.waitlist-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  max-width:900px;margin:28px 0;padding:0;list-style:none;counter-reset:none}
.waitlist-steps li{display:flex;align-items:center;gap:12px;min-height:74px;padding:14px 16px;
  border:1px solid #e7e6f7;border-radius:14px;background:#fff;color:var(--ink)}
.waitlist-steps li span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;
  border-radius:50%;background:linear-gradient(135deg,var(--acc),#3ddc97);color:#fff;
  font-family:"Gilroy","Poppins",sans-serif;font-weight:700}
.waitlist-steps li strong{font-size:.95rem;line-height:1.4}
.waitlist-privacy{max-width:760px;margin:14px 0 0;color:var(--muted);font-size:.88rem;line-height:1.6}
.waitlist-privacy a{color:var(--acc);text-underline-offset:2px}

@media (max-width:768px){
  .creator-form-shell,
  .creator-form-shell iframe{min-height:640px;height:640px}
  .trial-layout{grid-template-columns:1fr;gap:18px}
  .trial-context{position:static;order:2;padding:22px}
  .trial-form-card{order:1;border-radius:18px}
  #anntac-creator-trial-form{padding:22px 18px}
  .waitlist-steps{grid-template-columns:1fr}
  .orbit-native-form{padding:24px 20px}
  .orbit-native-grid{grid-template-columns:1fr;gap:14px}
  .orbit-native-actions{align-items:stretch;flex-direction:column}
  .orbit-native-actions .btn{width:100%}
}
@media (max-width:650px){
  .trialchoice{grid-template-columns:1fr}
  .branchgrid{grid-template-columns:repeat(2,1fr)}
}

/* Text-only button used for the "another choice" toggle. */
.btn-link{background:none;border:0;padding:0;color:var(--acc);font-weight:600;
  font-size:.95rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn-link:hover{color:var(--ink)}
.btn-link:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------
   Orbit band on the pricing page: a solution of its own, so it gets
   a full width panel in the Orbit gradient rather than a module card.
   --------------------------------------------------------------- */
.pricing-orbit .container{padding-top:0;padding-bottom:0}
.ob-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;
  padding:40px 40px;border-radius:22px;
  background:linear-gradient(120deg,rgba(58,44,255,.07),rgba(27,217,131,.10))}
.ob-grid>*{min-width:0}
.ob-logo{height:56px;width:auto;display:block;margin-bottom:16px;
  padding:8px 12px;border-radius:14px;background:#fff;box-shadow:var(--card-shadow)}
.ob-copy h2{margin:0 0 .5rem}
.ob-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:.9rem 0 1rem}
.ob-price{margin:0;padding:14px 16px;border:1px solid rgba(77,60,255,.14);border-radius:14px;
  background:rgba(255,255,255,.76);font-family:"Gilroy","Poppins",sans-serif;
  font-size:1.22rem;font-weight:700;color:var(--acc)}
.ob-price>small{display:block;margin-bottom:5px;font-family:"Inter",Arial,sans-serif;
  font-size:.72rem;font-weight:600;color:var(--muted)}
.ob-price .dual-net{font-family:"Inter",Arial,sans-serif;font-size:.74em}
.ob-note{margin:0 0 1.2rem;color:var(--muted);font-size:.92rem}
.ob-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ob-points li{position:relative;padding-left:30px;line-height:1.5}
.ob-points li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;
  border-radius:50%;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/16px no-repeat}

/* ---------------------------------------------------------------
   Orbit page: pillars, branch use cases and the standalone block.
   --------------------------------------------------------------- */
.pillars{gap:20px}
.pillar{position:relative;padding:24px 22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--card-shadow)}
.pillar h3{margin:.6rem 0 .4rem;font-size:1.02rem}
.pillar p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.pnum{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;font-size:.85rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--teal))}

.casegrid{gap:20px}
.casecard{padding:24px 22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--card-shadow)}
.casecard h3{margin:.7rem 0 .5rem;font-size:1.02rem}
.casecard p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}

.solorow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.6rem}
.solorow>*{min-width:0}
.solocard{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--bg-alt)}
.solocard h3{margin:0 0 .4rem;font-size:.98rem}
.solocard p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}

@media (max-width:900px){
  .ob-grid{grid-template-columns:1fr;padding:32px 26px;gap:26px}
  .ob-prices{grid-template-columns:1fr}
  .solorow{grid-template-columns:1fr}
}

/* Price lines carry the VAT note inline, quiet but always present. */
.vatnote{font-size:.72em;font-weight:400;color:var(--muted);white-space:nowrap}
.bigprice .vatnote{font-size:.5em}

/* The duo logos must read at full strength, also on a pale product image:
   a defined white chip with a border makes them stand out from the card. */
.lane-logo{border:1px solid var(--line);background:#fff;opacity:1}

/* Orbit screenshot gallery: appears automatically once the files exist. */
.orbitshots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.orbitshots>*{min-width:0}
.orbitshot{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--card-shadow)}
.orbitshot img{display:block;width:100%;height:260px;object-fit:contain;
  background:#f7f8fd;padding:10px;box-sizing:border-box}
.orbitshot figcaption{padding:12px 16px;font-size:.88rem;color:var(--muted);line-height:1.5}
@media (max-width:900px){
  .orbitshots{grid-template-columns:1fr}
  .orbitshot img{height:auto;max-height:340px}
}

/* Branch pages: the branch image accompanies the signup block further down
   the page; the office photo stays in the pagehead. */
.branch-visual{width:150px;height:150px;object-fit:contain;display:block;margin:0 0 14px}
@media (max-width:650px){.branch-visual{width:110px;height:110px}}

/* Privacy-first cookie choice. The site remains fully usable without the
   optional Zoho chat and marketing services. */
.footer-cookie-link{border:0;background:none;padding:0;color:inherit;font:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cookie-banner{position:fixed;z-index:10000;left:20px;right:20px;bottom:20px}
.cookie-banner[hidden]{display:none}
.cookie-card{max-width:1080px;margin:0 auto;padding:22px 24px;display:grid;
  grid-template-columns:1fr auto;gap:28px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(17,24,39,.22)}
.cookie-card h2{margin:0 0 6px;font-size:1.2rem}
.cookie-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.cookie-actions{display:flex;gap:10px;align-items:center;white-space:nowrap}
@media (max-width:780px){
  .cookie-banner{left:10px;right:10px;bottom:10px}
  .cookie-card{grid-template-columns:1fr;gap:16px;padding:20px}
  .cookie-actions{white-space:normal;flex-wrap:wrap}
  .cookie-actions .btn{flex:1 1 180px}
}

/* Orbit hero: one case manager receives messages, documents and tasks from
   several clients. Animation is decorative and switches off on user request. */
.orbit-hero{padding:46px 0 48px}
.orbit-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);gap:46px;align-items:center}
.orbit-hero-copy h1{max-width:760px}
.orbit-network{position:relative;min-height:455px;margin:0;border:1px solid rgba(77,60,255,.13);
  border-radius:28px;background:radial-gradient(circle at 85% 18%,rgba(30,219,139,.18),transparent 30%),
  linear-gradient(145deg,#fff,#f1f0ff);box-shadow:0 28px 70px rgba(32,25,112,.13);overflow:hidden}
.ov-logo{position:absolute;left:22px;top:20px;width:150px;height:auto;object-fit:contain}
.ov-manager{position:absolute;left:50%;top:52%;width:280px;transform:translate(-50%,-43%);z-index:3;
  border:1px solid rgba(77,60,255,.18);border-radius:18px;background:#fff;box-shadow:0 18px 42px rgba(39,31,130,.15);overflow:hidden}
.ov-manager header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(100deg,#4d3cff,#6d64ff);color:#fff;font-size:.78rem}
.ov-manager header span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;color:#4d3cff;font-weight:700}
.ov-manager ul{list-style:none;margin:0;padding:8px}
.ov-manager li{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:10px 8px;border-bottom:1px solid #eceef7}
.ov-manager li:last-child{border-bottom:0}.ov-manager li strong{display:block;font-size:.72rem}.ov-manager li small{display:block;color:var(--muted);font-size:.62rem}.ov-manager li b{font-size:.54rem;color:#087758;background:#e0faef;padding:4px 6px;border-radius:99px}
.ov-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#4d3cff,#1edb8b);font-size:.68rem;font-weight:700}
.ov-client{position:absolute;z-index:4;width:86px;padding:10px 8px;text-align:center;border:1px solid rgba(77,60,255,.15);border-radius:15px;background:#fff;box-shadow:0 12px 26px rgba(39,31,130,.12)}
.ov-client>span{display:grid;place-items:center;width:31px;height:31px;margin:0 auto 5px;border-radius:50%;background:#eceaff;color:#4d3cff;font-weight:700;font-size:.72rem}
.ov-client strong,.ov-client small{display:block}.ov-client strong{font-size:.68rem}.ov-client small{color:var(--muted);font-size:.58rem}.ov-client i{position:absolute;right:-5px;top:-5px;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#1edb8b;animation:orbitPulse 2.4s infinite}
.ov-client-1{right:18px;top:82px}.ov-client-2{left:18px;bottom:38px}.ov-client-3{right:26px;bottom:26px}
.ov-route{position:absolute;z-index:1;height:2px;transform-origin:left;background:repeating-linear-gradient(90deg,#756cff 0 8px,transparent 8px 15px);animation:orbitRoute 1.5s linear infinite}
.ov-route-1{width:120px;right:88px;top:174px;transform:rotate(156deg)}.ov-route-2{width:105px;left:88px;bottom:112px;transform:rotate(-28deg)}.ov-route-3{width:110px;right:92px;bottom:102px;transform:rotate(207deg)}
@keyframes orbitPulse{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.25);opacity:1}}
@keyframes orbitRoute{to{background-position:30px 0}}
@media(max-width:1000px){.orbit-hero-grid{grid-template-columns:1fr}.orbit-network{min-height:420px;max-width:620px;width:100%;margin:10px auto 0}}
@media(max-width:560px){.orbit-network{min-height:390px}.ov-logo{width:120px}.ov-manager{width:235px}.ov-client{width:72px}.ov-client-1{right:8px}.ov-client-2{left:8px}.ov-client-3{right:10px}.ov-route{display:none}}
@media(prefers-reduced-motion:reduce){.ov-client i,.ov-route{animation:none}}

/* Current Orbit capabilities use real product screens where possible and
   documentary photography for the human and infrastructure context. */
.orbit-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.orbit-feature-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--card-shadow)}
.orbit-feature-card img{display:block;width:100%;height:190px;object-fit:cover;background:#f5f6fb}
.orbit-feature-card div{padding:20px}
.orbit-feature-card h3{margin:0 0 8px;font-size:1.12rem}
.orbit-feature-card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.62}
.orbit-feature-card:nth-child(7){grid-column:2}

/* A manual, touch-friendly carousel is clearer than the former screenshot
   grid and does not pretend that still-image montages are product videos. */
.orbit-screen-section{overflow:hidden;background:linear-gradient(180deg,#f8f8ff 0%,#fff 100%)}
.orbit-screen-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:24px}
.orbit-screen-heading>div:first-child{max-width:860px}
.orbit-screen-heading h2{margin-bottom:10px}
.orbit-screen-heading .lead{margin:0}
.orbit-carousel-controls{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.orbit-carousel-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:1.25rem;cursor:pointer;box-shadow:var(--card-shadow)}
.orbit-carousel-button:hover{border-color:var(--acc);color:var(--acc)}
.orbit-carousel-button:focus-visible{outline:3px solid rgba(77,60,255,.22);outline-offset:2px}
.orbit-carousel-count{min-width:54px;color:var(--muted);font-size:.88rem;text-align:center}
.orbit-screen-carousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:2px 2px 14px}
.orbit-screen-carousel:focus-visible{outline:3px solid rgba(77,60,255,.18);outline-offset:4px;border-radius:16px}
.orbit-screen-slide{flex:0 0 min(88%,1040px);margin:0;scroll-snap-align:start;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(35,29,112,.10)}
.orbit-screen-slide img{display:block;width:100%;height:auto;aspect-ratio:1.5/1;object-fit:contain;background:#f5f6fb}
.orbit-screen-slide figcaption{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;padding:18px 20px;border-top:1px solid var(--line)}
.orbit-screen-slide figcaption>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--acc-soft);color:var(--acc-deep);font-weight:700}
.orbit-screen-slide strong{display:block;margin-bottom:4px}
.orbit-screen-slide p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.orbit-screen-note{max-width:900px;margin:14px 0 0;color:var(--muted);font-size:.82rem;line-height:1.55}
@media(max-width:1000px){.orbit-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.orbit-feature-card:nth-child(7){grid-column:auto}.orbit-screen-slide{flex-basis:94%}}
@media(max-width:700px){.orbit-feature-grid{grid-template-columns:1fr}.orbit-feature-card img{height:auto;aspect-ratio:16/9}.orbit-screen-heading{display:block}.orbit-carousel-controls{margin-top:18px}.orbit-screen-slide{flex-basis:96%}.orbit-screen-slide figcaption{grid-template-columns:34px 1fr;padding:15px}.orbit-screen-slide figcaption>span{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.orbit-screen-carousel{scroll-behavior:auto}}